feat: start plugin and app separately [LIBS-391] [LIBS-392]

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',

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',

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,
     })

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