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
dhis2 · May 30, 2024 · 82003e7 · 82003e7
1 parent f7a7e24
commit 82003e7
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -16,6 +16,7 @@ const config = {
         // Uncomment this to test plugin builds:
         // plugin: './src/components/VisualizationsList.js',
     },
+    skipPluginLogic: true,
 }
 
 module.exports = config