fix: appshell host runtime configuration

.eslintrc.js

@@ -31,23 +31,23 @@ module.exports = {
   },
   settings: {
     'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
+      '@typescript-eslint/parser': ['.js', '.ts', '.tsx'],
     },
     'import/resolver': {
       node: {
         paths: ['src'],
-        extensions: ['.ts', '.tsx'],
+        extensions: ['.js', '.ts', '.tsx'],
       },
       typescript: {
         alwaysTryTypes: true,
-        extensions: ['.ts'],
+        extensions: ['.js', '.ts'],
         project,
       },
     },
   },
   overrides: [
     {
-      files: ['*.ts'],
+      files: ['*.js', '*.ts'],
       parserOptions: {
         project,
       },

.github/workflows/pipeline.yml

@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v3

Dockerfile

@@ -1,5 +1,5 @@
 ### BASE
-FROM node:16-alpine AS base
+FROM node:20-alpine AS base
 LABEL maintainer "Robert Hamilton <[email protected]>"
 # Set the working directory
 WORKDIR /appshell
@@ -29,7 +29,7 @@ FROM base AS dependencies
 # Copy source
 COPY . .
 # Install dependencies
-RUN yarn --pure-lockfile
+RUN yarn --pure-lockfile 
 
 ### BUILD
 FROM dependencies as build
@@ -43,7 +43,7 @@ ENV SOURCE_DIR=${SOURCE_DIR}
 ENV APPSHELL_CONTAINER_COMMAND=${APPSHELL_CONTAINER_COMMAND:-'yarn serve'}
 
 # Install global dependencies
-RUN yarn global add dotenv-cli serve
+RUN yarn global add dotenv-cli
 
 WORKDIR /appshell/${SOURCE_DIR}
 
@@ -56,6 +56,7 @@ COPY --from=build /appshell/${SOURCE_DIR}/dist ./dist
 
 COPY --from=build /appshell/packages/cli /appshell/packages/cli
 RUN yarn global add file:/appshell/packages/cli
+RUN yarn install --pure-lockfile --production
 
 
 ### DEVELOPMENT

examples/appshell-react-host/Dockerfile

@@ -1,5 +1,5 @@
 ### BASE
-FROM node:16-alpine AS base
+FROM node:20-alpine AS base
 LABEL maintainer "Robert Hamilton <[email protected]>"
 
 # Set the working directory

examples/appshell-react-host/docker-compose.yml

@@ -5,6 +5,7 @@ services:
     # image: appshell/react-host:latest # production image (no hot module replacement support)
     image: appshell/react-host:developer
     env_file: ./${ENV_TARGET}.env
+    command: ${APPSHELL_CONTAINER_COMMAND}
     deploy:
       mode: replicated
       replicas: ${APPSHELL_CONTAINER_SCALE}
@@ -18,6 +19,7 @@ services:
     profiles:
       - apps
     env_file: ./${ENV_TARGET}.env
+    command: ${CONTAINER_COMMAND}
     build:
       context: .
       target: ${BUILD_TARGET}
@@ -29,5 +31,6 @@ services:
       - ${SAMPLE_MFE_PING_PORT}:${SAMPLE_MFE_PING_PORT}
       - ${SAMPLE_MFE_PONG_PORT}:${SAMPLE_MFE_PONG_PORT}
     volumes:
+      - ./apps:/appshell/apps
       - ./${ENV_TARGET}.env/:/appshell/${ENV_TARGET}.env
       - ./appshell_registry:/appshell/appshell_registry

examples/appshell-react-host/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@appshell/core": "0.2.0",
-    "@appshell/react": "0.2.1",
+    "@appshell/react": "^0.3.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",

examples/appshell-react-host/yarn.lock

@@ -30,10 +30,10 @@
   resolved "https://registry.yarnpkg.com/@appshell/manifest-webpack-plugin/-/manifest-webpack-plugin-0.3.3.tgz#bc61aaa8c5ecc05bc535543f5afe4965ef5e97d2"
   integrity sha512-8Y2b+ZxTnqAeN0uygPn3Q+66qq8kFn3kzwFv3+727+1ckWwMcUov+iBNVbgNhOnZizjs7hNxcxFSQqvU3gBeXQ==
 
-"@appshell/react@0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@appshell/react/-/react-0.2.1.tgz#f14b476a8c18048c668e9735e324a03a12a1f8a5"
-  integrity sha512-T0PssAlqTQTzPQVm8SECFobTY2XT6XHK1zKqMIolQAVBW4YSKiZkBapeAVD1FqTPG+/33WNIJ2N6u5DaS5GAYQ==
+"@appshell/react@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@appshell/react/-/react-0.3.0.tgz#17fbdcb604b89ed605741ef8be6224e23f4025e1"
+  integrity sha512-NT/V9WxAj3m7U3fG8ozXGKHhGRro8J/mD3tshtJNBDZgmLR4M0FspaZrF26XhTddM+yV1yc3D7+yyKP/Il7vkw==
 
 "@babel/cli@^7.21.0":
   version "7.22.10"

package.json

@@ -20,7 +20,7 @@
     "@automapper/core": "8.7.7",
     "@automapper/pojos": "8.7.7",
     "axios": "1.4.0",
-    "chalk": "^5.3.0",
+    "chalk": "4",
     "cpy-cli": "5.0.0",
     "cross-env": "7.0.3",
     "dotenv-cli": "7.0.0",
@@ -99,4 +99,4 @@
     "appshell"
   ],
   "license": "MIT"
-}
+}

packages/manifest-webpack-plugin/__tests__/AppshellManifestPlugin.spec.ts

@@ -8,7 +8,7 @@ import sampleConfig from './assets/complete-config.json';
 import missingConfiguredEntrypoint from './assets/missing-configured-entrypoint.json';
 import missingRemoteEntrypoint from './assets/missing-remote-entrypoint.json';
 import { MODULE_FEDERATION_PLUGIN_OPTIONS } from './assets/module-federation-plugin-options';
-import webpackConfig from './assets/webpack.config.js';
+import webpackConfig from './assets/webpack.config';
 
 class MockCompiler {
   options: Partial<WebpackOptionsNormalized>;

packages/react-host/README.md

@@ -75,8 +75,8 @@ APPSHELL_PRIMARY_COLOR=
 APPSHELL_TITLE=My App
 # Description of the application
 APPSHELL_DESCRIPTION=Appshell React host
-# Custom URL for global stylesheet (defaults to Google Roboto)
-APPSHELL_STYLESHEET_URL=
+# Custom URL for global stylesheet
+APPSHELL_STYLESHEET_URL=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap
 
 APPSHELL_CONTAINER_SCALE=1
 ENV_TARGET=

packages/react-host/package.json

@@ -5,17 +5,21 @@
   "main": "index.js",
   "private": true,
   "scripts": {
+    "generate": "run-p generate:*",
     "generate:env": "appshell generate env -e .env --prefix $APPSHELL_ENV_PREFIX",
     "generate:global-config": "appshell generate global-config --validate-registry-ssl-cert $APPSHELL_VALIDATE_REGISTRY_SSL_CERT --registry $APPSHELL_BASE_REGISTRY $APPSHELL_REGISTRY",
-    "start": "dotenv -- run-p start:appshell start:run",
+    "start": "dotenv -- run-p start:appshell start:dev",
+    "start:dev": "run-s build:development start:server",
     "start:appshell": "appshell start --host --validate-registry-ssl-cert $APPSHELL_VALIDATE_REGISTRY_SSL_CERT --registry $APPSHELL_REGISTRY --base-registry $APPSHELL_BASE_REGISTRY --env $APPSHELL_ENV --env-prefix $APPSHELL_ENV_PREFIX --env-global-name $APPSHELL_ENV_GLOBAL_VAR",
-    "start:run": "webpack-cli serve --mode development",
+    "start:server": "NODE_ENV=development node dist/server.js",
     "prebuild": "yarn clean",
-    "build": "webpack --mode production",
-    "build:development": "webpack --mode development",
-    "serve": "dotenv -- run-s generate:env serve:run",
-    "serve:run": "serve dist -p $APPSHELL_PORT",
-    "serve:developer": "dotenv -- run-p start:appshell serve:run",
+    "build": "webpack --mode production && yarn build:server",
+    "build:development": "webpack --mode development && yarn build:server",
+    "build:server": "tsc -p tsconfig.server.json",
+    "copy:config": "cp -R ./appshell_registry/* ./dist/",
+    "serve": "dotenv -- run-s generate:env copy:config serve:server",
+    "serve:server": "NODE_ENV=production node dist/server.js",
+    "serve:developer": "dotenv -- run-p start:appshell start:server",
     "clean": "rm -rf dist"
   },
   "author": "Robert Hamilton <[email protected]>",
@@ -37,5 +41,16 @@
     "micro-frontends",
     "appshell"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "ejs": "^3.1.9",
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "@types/ejs": "^3.1.5",
+    "@types/webpack-hot-middleware": "2.25.0",
+    "webpack-dev-middleware": "^7.0.0",
+    "webpack-hot-middleware": "^2.26.0",
+    "webpack-node-externals": "^3.0.0"
+  }
 }

packages/react-host/public/index.html

@@ -2,15 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="<%=APPSHELL_PUBLIC_URL%>/favicon.ico" />
+    <link rel="icon" href="<%= favIcon %>" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="<%=APPSHELL_THEME_COLOR%>" />
-    <meta name="description" content="<%=APPSHELL_DESCRIPTION%>" />
-    <link rel="apple-touch-icon" href="<%=APPSHELL_PUBLIC_URL%>/logo192.png" />
-    <link rel="manifest" href="<%=APPSHELL_PUBLIC_URL%>/manifest.json" />
-    <link rel="stylesheet" href="<%=APPSHELL_STYLESHEET_URL%>" />
-    <script src="<%=APPSHELL_PUBLIC_URL%>/appshell.env.js"></script>
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta name="theme-color" content="<%= themeColor %>" />
+    <meta name="description" content="<%= description %>" />
+    <link rel="apple-touch-icon" href="<%= publicUrl %>logo192.png" />
+    <link rel="manifest" href="<%= publicUrl %>manifest.json" />
+    <link rel="stylesheet" href="<%= stylesheetUrl %>" />
+    <script src="<%= publicUrl %>appshell.env.js"></script>
+    <script defer src="<%= publicUrl %>main.js"></script>
+    <title><%= title %></title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/react-host/src/server.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable global-require */
+import chalk from 'chalk';
+import ejs from 'ejs';
+import express from 'express';
+import path from 'path';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+const port = process.env.APPSHELL_PORT || 9000;
+const app = express();
+
+if (isDevelopment) {
+  const webpack = require('webpack');
+  const webpackDevMiddleware = require('webpack-dev-middleware');
+  const webpackHotMiddleware = require('webpack-hot-middleware');
+  const webpackConfig = require('../webpack.config');
+
+  const config = webpackConfig(null, { mode: process.env.NODE_ENV });
+  const compiler = webpack(config);
+
+  app.use(
+    webpackDevMiddleware(compiler, {
+      publicPath: config.output.publicPath,
+    }),
+  );
+
+  app.use(webpackHotMiddleware(compiler));
+}
+
+// Serve static files from the 'dist' directory
+app.use(express.static(__dirname));
+
+app.engine('.html', ejs.renderFile);
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'html');
+
+app.get('*', (req, res) => {
+  res.render('index', {
+    favIcon: process.env.APPSHELL_FAVICON || '/favicon.ico',
+    title: process.env.APPSHELL_TITLE || 'Appshell',
+    description: process.env.APPSHELL_DESCRIPTION || 'Appshell is awesome!',
+    publicUrl: path.join(process.env.APPSHELL_PUBLIC_URL || '', '/'),
+    themeColor: process.env.APPSHELL_THEME_COLOR,
+    stylesheetUrl: process.env.APPSHELL_STYLESHEET_URL,
+  });
+});
+
+app.listen(port, () => {
+  // eslint-disable-next-line no-console
+  console.log(
+    chalk.cyan(`Appshell host listening on port ${port} in ${process.env.NODE_ENV} mode`),
+  );
+});

packages/react-host/tsconfig.server.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": false,
+    "declarationMap": false,
+    "emitDeclarationOnly": false,
+    "sourceMap": false
+  },
+  "include": ["./src/server.ts"]
+}

packages/react-host/webpack.config.js

@@ -1,7 +1,6 @@
 const path = require('path');
-const { container, DefinePlugin } = require('webpack');
+const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ReactRefreshSingleton = require('single-react-refresh-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -12,7 +11,12 @@ module.exports = (env, { mode }) => {
   const isDevelopment = mode === 'development';
 
   return {
-    entry: './src/index',
+    entry: isDevelopment
+      ? [
+          'webpack-hot-middleware/client', // HMR entry point
+          './src/index',
+        ]
+      : './src/index',
     mode,
     devtool: isDevelopment ? 'eval-source-map' : false,
     devServer: {
@@ -63,31 +67,16 @@ module.exports = (env, { mode }) => {
       ],
     },
     plugins: [
-      new DefinePlugin({
-        APPSHELL_TITLE: JSON.stringify(process.env.APPSHELL_TITLE),
-        APPSHELL_DESCRIPTION: JSON.stringify(process.env.APPSHELL_DESCRIPTION),
-        APPSHELL_PUBLIC_URL: JSON.stringify(process.env.APPSHELL_PUBLIC_URL),
-        APPSHELL_THEME_COLOR: JSON.stringify(process.env.APPSHELL_THEME_COLOR),
-        APPSHELL_STYLESHEET_URL: JSON.stringify(
-          process.env.APPSHELL_STYLESHEET_URL ||
-            'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
-        ),
-      }),
       new CopyPlugin({
         patterns: [
+          { from: 'public/index.html', to: './views' },
+          { from: 'public/favicon.ico', to: '.' },
           { from: 'public/manifest.json', to: '.' },
           { from: 'public/logo192.png', to: '.' },
           { from: 'public/logo512.png', to: '.' },
-          { from: 'serve.json', to: '.' },
         ],
       }),
-      new HtmlWebpackPlugin({
-        publicPath: path.join(process.env.APPSHELL_PUBLIC_URL || '', '/'),
-        title: process.env.APPSHELL_TITLE,
-        favicon: './public/favicon.ico',
-        template: './public/index.html',
-      }),
-      new container.ModuleFederationPlugin({
+      new webpack.container.ModuleFederationPlugin({
         name: 'Appshell',
         shared: {
           react: {
@@ -108,6 +97,7 @@ module.exports = (env, { mode }) => {
           },
         },
       }),
+      isDevelopment && new webpack.HotModuleReplacementPlugin(),
       isDevelopment && new ReactRefreshWebpackPlugin(),
       isDevelopment && new ReactRefreshSingleton(),
     ].filter(Boolean),

tsconfig.json

@@ -19,8 +19,8 @@
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
-    "plugins": [{ "name": "@typescript-eslint"}]
+    "plugins": [{ "name": "@typescript-eslint" }]
   },
   "include": ["./packages/*/src", "./examples/**/src", "./**/__tests__", "./**/__fixtures__"],
   "exclude": ["dist", "node_modules"]
-}
+}