From 82003e73fce995a83318c623da6028d9975e6686 Mon Sep 17 00:00:00 2001 From: Kai Vandivier <49666798+KaiVandivier@users.noreply.github.com> Date: Thu, 30 May 2024 15:07:38 +0200 Subject: [PATCH] feat: start plugin and app separately [LIBS-391] [LIBS-392] (#848) * feat: only start plugin if --plugin flag is used * fix(plugin): properly use dev build * chore: skip plugin logic in PWA app * fix: preserve original behavior; use a flag to start only app * docs: document app and plugin options on start script --- cli/config/plugin.webpack.config.js | 6 ++-- cli/src/commands/start.js | 49 +++++++++++++++++++---------- cli/src/lib/plugin/start.js | 4 +-- docs/scripts/start.md | 3 ++ examples/pwa-app/d2.config.js | 1 + 5 files changed, 40 insertions(+), 23 deletions(-) diff --git a/cli/config/plugin.webpack.config.js b/cli/config/plugin.webpack.config.js index 96f7a6984..81ee88635 100644 --- a/cli/config/plugin.webpack.config.js +++ b/cli/config/plugin.webpack.config.js @@ -103,7 +103,7 @@ module.exports = ({ env: webpackEnv, config, paths }) => { path: paths.shellBuildOutput, filename: isProduction ? 'static/js/plugin-[name].[contenthash:8].js' - : 'static/js/plugin.bundle.js', + : 'static/js/plugin-[name].bundle.js', chunkFilename: isProduction ? 'static/js/plugin-[name].[contenthash:8].chunk.js' : 'static/js/plugin-[name].chunk.js', @@ -192,9 +192,7 @@ module.exports = ({ env: webpackEnv, config, paths }) => { // dhis2: Inject plugin static assets to the existing SW's precache // manifest. Don't need to do in dev because precaching isn't done // in dev environments. - // Check the actual NODE_ENV because `isProduction` is currently - // always true due to a bug (see src/lib/plugin/start.js) - process.env.NODE_ENV === 'production' && + isProduction && new WorkboxWebpackPlugin.InjectManifest({ swSrc: paths.shellBuildServiceWorker, injectionPoint: 'self.__WB_PLUGIN_MANIFEST', diff --git a/cli/src/commands/start.js b/cli/src/commands/start.js index 660cea866..6370b7651 100644 --- a/cli/src/commands/start.js +++ b/cli/src/commands/start.js @@ -23,6 +23,8 @@ const handler = async ({ shell: shellSource, proxy, proxyPort, + app: shouldStartOnlyApp, + plugin: shouldStartOnlyPlugin, }) => { const paths = makePaths(cwd) @@ -125,29 +127,34 @@ const handler = async ({ reporter.print('') reporter.info('Starting development server...') - reporter.print( - `The app ${chalk.bold( - config.name - )} is now available on port ${newPort}` - ) - reporter.print('') - const shellStartPromise = shell.start({ port: newPort }) + // start app and/or plugin, depending on flags + const shouldStartBoth = + (!shouldStartOnlyApp && !shouldStartOnlyPlugin) || + // it would be weird to use both flags, but start both if so + (shouldStartOnlyApp && shouldStartOnlyPlugin) + const startPromises = [] - if (config.entryPoints.plugin) { - const pluginPort = await detectPort(newPort + 1) + if (shouldStartBoth || shouldStartOnlyApp) { reporter.print( - `The plugin is now available on port ${pluginPort} at /${paths.pluginLaunchPath}` + `The app ${chalk.bold( + config.name + )} is now available on port ${newPort}` ) reporter.print('') + startPromises.push(shell.start({ port: newPort })) + } - await Promise.all([ - shellStartPromise, - plugin.start({ port: pluginPort }), - ]) - } else { - await shellStartPromise + if (shouldStartBoth || shouldStartOnlyPlugin) { + reporter.print( + `The plugin is now available on port ${newPort} at /${paths.pluginLaunchPath}` + ) + reporter.print('') + const pluginPort = shouldStartBoth ? newPort + 1 : newPort + startPromises.push(plugin.start({ port: pluginPort })) } + + await Promise.all(startPromises) }, { name: 'start', @@ -179,6 +186,16 @@ const command = { description: 'The port to use when running the proxy', default: 8080, }, + // todo: change with Vite + app: { + type: 'boolean', + description: + 'Start a dev server for just the app entrypoint (instead of both app and plugin, if this app has a plugin)', + }, + plugin: { + type: 'boolean', + description: 'Start a dev server for just the plugin entrypoint', + }, }, handler, } diff --git a/cli/src/lib/plugin/start.js b/cli/src/lib/plugin/start.js index 09d378262..75ba7ab57 100644 --- a/cli/src/lib/plugin/start.js +++ b/cli/src/lib/plugin/start.js @@ -7,9 +7,7 @@ const webpackConfigFactory = require('../../../config/plugin.webpack.config') module.exports = async ({ port, config, paths }) => { const webpackConfig = webpackConfigFactory({ - // todo: change to development, but this creates a compilation error - // can read more here: https://github.com/dhis2/app-platform/pull/740/files/69411d9b61845cbd0d053f2313bdbd4e80fdf2ac#r1031576956 - env: 'production', + env: 'development', config, paths, }) diff --git a/docs/scripts/start.md b/docs/scripts/start.md index 696f8c6be..a9cb6d575 100644 --- a/docs/scripts/start.md +++ b/docs/scripts/start.md @@ -23,4 +23,7 @@ Options: --port, -p The port to use when running the development server [number] --proxy, -P The remote DHIS2 instance the proxy should point to [string] --proxyPort The port to use when running the proxy [number] [default: 8080] + --app Start a dev server for just the app entrypoint (instead of both + app and plugin, if this app has a plugin) [boolean] + --plugin Start a dev server for just the plugin entrypoint [boolean] ``` diff --git a/examples/pwa-app/d2.config.js b/examples/pwa-app/d2.config.js index 2b6efe325..a2de6f927 100644 --- a/examples/pwa-app/d2.config.js +++ b/examples/pwa-app/d2.config.js @@ -16,6 +16,7 @@ const config = { // Uncomment this to test plugin builds: // plugin: './src/components/VisualizationsList.js', }, + skipPluginLogic: true, } module.exports = config