Updated Admin-X bundling process

refs https://github.com/TryGhost/DevOps/issues/80

- as part of moving Admin-X-Setting towards GA, we want to change it from
  loading the settings externally via a CDN, to bundling it in with
  Admin
- the bulk of the changes here are removing the config in Ghost, setting
  up the copy to the Admin assets dir, and loading the new path in Admin
- several other changes have come along the way as I've cleaned up
  unneeded code
This commit is contained in:
Daniel Lockyer 2023-09-18 15:11:45 +02:00 committed by Daniel Lockyer
parent 9cd542dc59
commit f705dda314
12 changed files with 62 additions and 36 deletions

View File

@ -33,7 +33,7 @@ const COMMAND_GHOST = {
const COMMAND_ADMIN = {
name: 'admin',
command: `yarn start --live-reload-base-url=${liveReloadBaseUrl} --live-reload-port=4201`,
command: `nx run ghost-admin:dev --live-reload-base-url=${liveReloadBaseUrl} --live-reload-port=4201`,
cwd: path.resolve(__dirname, '../../ghost/admin'),
prefixColor: 'green',
env: {}
@ -63,18 +63,6 @@ if (DASH_DASH_ARGS.includes('admin-x') || DASH_DASH_ARGS.includes('adminx') || D
prefixColor: '#C35831',
env: {}
});
if (DASH_DASH_ARGS.includes('https')) {
// Safari needs HTTPS for it to work
// To make this work, you'll need a CADDY server running in front
// Note the port is different because of this extra layer. Use the following Caddyfile:
// https://localhost:41740 {
// reverse_proxy http://localhost:4174
// }
COMMAND_GHOST.env['adminX__url'] = 'https://localhost:41740/admin-x-settings.js';
} else {
COMMAND_GHOST.env['adminX__url'] = 'http://localhost:4174/admin-x-settings.js';
}
}
if (DASH_DASH_ARGS.includes('portal') || DASH_DASH_ARGS.includes('all')) {

View File

@ -237,7 +237,7 @@ jobs:
env:
DEPENDENCY_CACHE_KEY: ${{ needs.job_install_deps.outputs.dependency_cache_key }}
- run: yarn workspace ghost-admin run test
- run: yarn nx run ghost-admin:test
env:
BROWSER: Chrome

View File

@ -25,7 +25,7 @@
"registry": "https://registry.npmjs.org/"
},
"scripts": {
"dev": "concurrently \"vite preview\" \"vite build --watch\"",
"dev": "vite build --watch",
"dev:start": "vite",
"build": "tsc && vite build",
"lint": "yarn run lint:js",
@ -36,11 +36,7 @@
"test:e2e:full": "ALL_BROWSERS=1 yarn test:e2e",
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"preship": "yarn lint",
"ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version; fi",
"postship": "git push ${GHOST_UPSTREAM:-origin} --follow-tags && npm publish",
"prepublishOnly": "yarn build"
"build-storybook": "storybook build"
},
"dependencies": {
"@codemirror/lang-html": "^6.4.5",

View File

@ -2,6 +2,7 @@ import * as Sentry from '@sentry/ember';
import Component from '@glimmer/component';
import React, {Suspense} from 'react';
import config from 'ghost-admin/config/environment';
import ghostPaths from 'ghost-admin/utils/ghost-paths';
import {action} from '@ember/object';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
@ -200,14 +201,8 @@ export const importSettings = async () => {
return window['@tryghost/admin-x-settings'];
}
// the manual specification of the protocol in the import template string is
// required to work around ember-auto-import complaining about an unknown dynamic import
// during the build step
const GhostAdmin = window.GhostAdmin || window.Ember.Namespace.NAMESPACES.find(ns => ns.name === 'ghost-admin');
const urlTemplate = GhostAdmin.__container__.lookup('config:main').adminX?.url;
const urlVersion = GhostAdmin.__container__.lookup('config:main').adminX?.version;
const url = new URL(urlTemplate.replace('{version}', urlVersion));
const baseUrl = (config.cdnUrl || ghostPaths().assetRootWithHost);
const url = new URL(`${baseUrl}libs/admin-x-settings/admin-x-settings.js`);
if (url.protocol === 'http:') {
window['@tryghost/admin-x-settings'] = await import(`http://${url.host}${url.pathname}`);

View File

@ -3,13 +3,14 @@ import {inject as service} from '@ember/service';
export default class SettingsXRoute extends AuthenticatedRoute {
@service session;
@service feature;
@service ui;
@service modals;
beforeModel() {
super.beforeModel(...arguments);
if (!this.config.adminX?.url) {
if (!this.feature.adminXSettings) {
return this.router.transitionTo('settings');
}
}

View File

@ -19,8 +19,10 @@ export default function () {
let adminRoot = `${subdir}/ghost/`;
let assetRoot = `${subdir}/ghost/assets/`;
let apiRoot = `${subdir}/ghost/api/admin`;
let assetRootWithHost = `${window.location.protocol}//${window.location.host}${assetRoot}`;
return {
assetRootWithHost,
adminRoot,
assetRoot,
apiRoot,

View File

@ -4,6 +4,16 @@
module.exports = {
name: 'asset-delivery',
env: null,
config(env) {
// only set this.env on the first call otherwise when `postBuild()` is
// called this.env will always be 'test' due to multiple `config()` calls
if (!this.env) {
this.env = env;
}
},
isDevelopingAddon() {
return true;
},
@ -33,5 +43,19 @@ module.exports = {
fs.copySync(`${results.directory}/assets/${relativePath}`, `${assetsOut}/assets/${relativePath}`, {overwrite: true, dereference: true});
});
// copy the @tryghost/admin-x-settings assets
const adminXSettingsPath = '../../apps/admin-x-settings/dist';
const assetsAdminXPath = `${assetsOut}/assets/libs/admin-x-settings`;
if (fs.existsSync(assetsAdminXPath)) {
if (this.env === 'production') {
fs.copySync(adminXSettingsPath, assetsAdminXPath, {overwrite: true, dereference: true});
} else {
fs.ensureSymlinkSync(adminXSettingsPath, assetsAdminXPath);
}
} else {
console.log('Admin-X-Settings folder not found');
}
}
};

View File

@ -16,7 +16,7 @@
"test": "tests"
},
"scripts": {
"start": "ember serve",
"dev": "ember serve",
"build": "ember build --environment=production --silent",
"build:dev": "yarn build --environment=development",
"test:unit": "true",
@ -181,5 +181,30 @@
"jose": "4.14.6",
"path-browserify": "1.0.1",
"webpack": "5.88.2"
},
"nx": {
"targets": {
"build:dev": {
"dependsOn": [
{
"projects": [
"@tryghost/admin-x-settings"
],
"target": "build"
}
]
},
"build": {
"dependsOn": [
"build",
{
"projects": [
"@tryghost/admin-x-settings"
],
"target": "build"
}
]
}
}
}
}

View File

@ -21,7 +21,6 @@ module.exports = {
'tenor',
'editor',
'pintura',
'adminX',
'signupForm'
];

View File

@ -201,10 +201,6 @@
"url": "https://cdn.jsdelivr.net/ghost/koenig-lexical@~{version}/dist/koenig-lexical.umd.js",
"version": "0.4"
},
"adminX": {
"url": "https://cdn.jsdelivr.net/ghost/admin-x-settings@~{version}/dist/admin-x-settings.js",
"version": "0.0"
},
"signupForm": {
"url": "https://cdn.jsdelivr.net/ghost/signup-form@~{version}/umd/signup-form.min.js",
"version": "0.1"

View File

@ -42,7 +42,6 @@ const expectedProperties = {
'tenor',
'mailgunIsConfigured',
'editor',
'adminX',
'signupForm'
],

View File

@ -4,6 +4,7 @@
"runner": "nx/tasks-runners/default",
"options": {
"cacheableOperations": [
"build",
"build:ts",
"lint",
"test",