feat: build pluginified app

dhis2 · Feb 13, 2024 · 684db12 · 684db12
1 parent 700628e
commit 684db12
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 13 deletions.
diff --git a/cli/config/plugin.webpack.config.js b/cli/config/plugin.webpack.config.js
@@ -23,7 +23,7 @@ const babelWebpackConfig = {
 const cssRegex = /\.css$/
 const cssModuleRegex = /\.module\.css$/
 
-module.exports = ({ env: webpackEnv, config, paths }) => {
+module.exports = ({ env: webpackEnv, config, paths, pluginifiedApp }) => {
     const isProduction = webpackEnv === 'production'
     const isDevelopment = !isProduction
 
@@ -94,18 +94,33 @@ module.exports = ({ env: webpackEnv, config, paths }) => {
         ].filter(Boolean)
     }
 
+    // .d2/shell/src/index.js or .../plugin.index.js
+    const entry = pluginifiedApp
+        ? paths.shellAppBundleEntrypoint
+        : paths.shellPluginBundleEntrypoint
+    // plugin.html or app.html
+    const htmlFilename = pluginifiedApp
+        ? paths.pluginifiedAppLaunchPath
+        : paths.pluginLaunchPath
+    // .d2/shell/public/app.html or .../plugin.html
+    const htmlTemplate = pluginifiedApp
+        ? paths.shellPublicPluginifiedAppHtml
+        : paths.shellPublicPluginHtml
+
+    const outputFilenamePrefix = pluginifiedApp ? 'app' : 'plugin'
+
     return {
         mode: webpackEnv,
         bail: isProduction,
-        entry: paths.shellPluginBundleEntrypoint,
+        entry: entry,
         output: {
             path: paths.shellBuildOutput,
             filename: isProduction
-                ? 'static/js/plugin-[name].[contenthash:8].js'
-                : 'static/js/plugin.bundle.js',
+                ? `static/js/${outputFilenamePrefix}-[name].[contenthash:8].js`
+                : `static/js/${outputFilenamePrefix}.bundle.js`,
             chunkFilename: isProduction
-                ? 'static/js/plugin-[name].[contenthash:8].chunk.js'
-                : 'static/js/plugin-[name].chunk.js',
+                ? `static/js/${outputFilenamePrefix}-[name].[contenthash:8].chunk.js`
+                : `static/js/${outputFilenamePrefix}-[name].chunk.js`,
             // TODO: investigate dev source maps here (devtoolModuleFilenameTemplate)
         },
         optimization: {
@@ -143,8 +158,8 @@ module.exports = ({ env: webpackEnv, config, paths }) => {
                 Object.assign(
                     {
                         inject: true,
-                        filename: paths.pluginLaunchPath,
-                        template: paths.shellPublicPluginHtml,
+                        filename: htmlFilename,
+                        template: htmlTemplate,
                     },
                     isProduction
                         ? {

diff --git a/cli/src/commands/build.js b/cli/src/commands/build.js
@@ -70,6 +70,7 @@ const handler = async ({
     const config = parseConfig(paths)
     const shell = makeShell({ config, paths })
     const plugin = makePlugin({ config, paths })
+    const pluginifiedApp = makePlugin({ config, paths, pluginifiedApp: true })
 
     if (config.type === 'app') {
         setAppParameters(standalone, config)
@@ -132,6 +133,9 @@ const handler = async ({
                 reporter.info('Building appShell...')
                 await shell.build()
 
+                reporter.info('Building pluginified app...')
+                await pluginifiedApp.build()
+
                 if (config.entryPoints.plugin) {
                     reporter.info('Building plugin...')
                     await plugin.build()

diff --git a/cli/src/lib/paths.js b/cli/src/lib/paths.js
@@ -59,6 +59,7 @@ module.exports = (cwd = process.cwd()) => {
         shell: path.join(base, './.d2/shell'),
         shellSrc: path.join(base, './.d2/shell/src'),
         shellAppEntrypoint: path.join(base, './.d2/shell/src/App.js'),
+        shellAppBundleEntrypoint: path.join(base, './.d2/shell/src/index.js'),
         shellAppDirname,
         shellApp: path.join(base, `./.d2/shell/${shellAppDirname}`),
         shellPluginBundleEntrypoint: path.join(
@@ -75,6 +76,10 @@ module.exports = (cwd = process.cwd()) => {
             base,
             './.d2/shell/public/plugin.html'
         ),
+        shellPublicPluginifiedAppHtml: path.join(
+            base,
+            './.d2/shell/public/app.html'
+        ),
         shellPublicServiceWorker: path.join(
             base,
             './.d2/shell/public/service-worker.js'
@@ -114,6 +119,7 @@ module.exports = (cwd = process.cwd()) => {
 
         launchPath: 'index.html',
         pluginLaunchPath: 'plugin.html',
+        pluginifiedAppLaunchPath: 'app.html',
     }
 
     reporter.debug('PATHS', paths)

diff --git a/cli/src/lib/plugin/build.js b/cli/src/lib/plugin/build.js
@@ -4,13 +4,14 @@ const { reporter } = require('@dhis2/cli-helpers-engine')
 const webpack = require('webpack')
 const webpackConfigFactory = require('../../../config/plugin.webpack.config')
 
-module.exports = async ({ config, paths }) => {
+module.exports = async ({ config, paths, pluginifiedApp }) => {
     reporter.debug('Building plugin...')
 
     const webpackConfig = webpackConfigFactory({
         env: 'production',
         config,
         paths,
+        pluginifiedApp,
     })
     const compiler = webpack(webpackConfig)
     return new Promise((resolve, reject) => {

diff --git a/cli/src/lib/plugin/index.js b/cli/src/lib/plugin/index.js
@@ -1,7 +1,7 @@
 const build = require('./build')
 const start = require('./start')
 
-module.exports = ({ config, paths }) => ({
-    build: () => build({ config, paths }),
-    start: ({ port }) => start({ port, config, paths }),
+module.exports = ({ config, paths, pluginifiedApp = false }) => ({
+    build: () => build({ config, paths, pluginifiedApp }),
+    start: ({ port }) => start({ port, config, paths, pluginifiedApp }),
 })
diff --git a/cli/src/lib/plugin/start.js b/cli/src/lib/plugin/start.js
@@ -5,13 +5,14 @@ const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
 const webpackConfigFactory = require('../../../config/plugin.webpack.config')
 
-module.exports = async ({ port, config, paths }) => {
+module.exports = async ({ port, config, paths, pluginifiedApp }) => {
     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',
         config,
         paths,
+        pluginifiedApp,
     })
     const compiler = webpack(webpackConfig)
 

diff --git a/shell/public/app.html b/shell/public/app.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <title>Plugin</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this plugin.</noscript>
+        <div id="dhis2-app-root"></div>
+        <div id="dhis2-portal-root"></div>
+        <!--
+            This HTML file is a template.
+            If you open it directly in the browser, you will see an empty page.
+
+            You can add webfonts, meta tags, or analytics to this file.
+            The build step will place the bundled scripts into the <body> tag.
+
+            To begin the development, run `npm start` or `yarn start`.
+            To create a production bundle, use `npm run build` or `yarn build`.
+        -->
+    </body>
+</html>