feat: webpack config changes

.eslintignore

@@ -4,4 +4,6 @@ src/generated/
 dist/
 node_modules/
 tsd/
-webpack.config.ts
+webpack.common.config.ts
+webpack.dev.config.ts
+webpack.prod.config.ts

CONTRIBUTING.md

@@ -139,6 +139,7 @@ yarn install
     ```
       export ADMIN_API_URL=https://different.admin.service.com
       export ADMIN_API_USE_SSL="https"
+      export LOCAL_DEV_HOST=localhost.different.admin.service.com
     ```
 
     _NOTE:_ Add these to your local profile (e.g., `./profile`) to prevent having to do this step each time

README.md

@@ -141,6 +141,7 @@ More info on each section could be found at [CONTRIBUTING.md](CONTRIBUTING.md)
    ```bash
    export ADMIN_API_URL=https://different.admin.service.com
    export ADMIN_API_USE_SSL="https"
+   export LOCAL_DEV_HOST=localhost.different.admin.service.com
    ```  
 
    > **Hint:** Add these to your local profile (eg, `./profile`) to prevent having to do this step each time

env.js

@@ -11,6 +11,8 @@ const ADMIN_API_URL = process.env.ADMIN_API_URL;
 // Use this to create SSL server
 const ADMIN_API_USE_SSL = process.env.ADMIN_API_USE_SSL || 'http';
 
+const LOCAL_DEV_HOST = process.env.LOCAL_DEV_HOST;
+
 const BASE_URL = process.env.BASE_URL || '';
 
 // Defines a file to be required which will provide implementations for
@@ -42,5 +44,6 @@ module.exports = {
     GA_TRACKING_ID,
     NODE_ENV,
     STATUS_URL,
+    LOCAL_DEV_HOST,
   },
 };

index.js

@@ -6,6 +6,11 @@
 /* eslint-disable no-console */
 const morgan = require('morgan');
 const express = require('express');
+const path = require('path');
+const expressStaticGzip = require('express-static-gzip');
+const serverRenderer = require('./dist/server.js').default;
+const clientStats = require('./dist/client-stats.json');
+
 const env = require('./env');
 const { applyMiddleware } = require('./plugins');
 
@@ -21,61 +26,15 @@ if (typeof applyMiddleware === 'function') {
   applyMiddleware(app);
 }
 
-if (process.env.NODE_ENV === 'production') {
-  const path = require('path');
-  const expressStaticGzip = require('express-static-gzip');
-  const serverRenderer = require('./dist/server.js').default;
-  const clientStats = require('./dist/client-stats.json');
-  const distPath = path.join(__dirname, 'dist');
-  app.use(
-    // This path should be in sync with the `publicPath` from webpack config.
-    `${env.BASE_URL}/assets`,
-    expressStaticGzip(distPath, {
-      maxAge: '1d',
-    }),
-  );
-  app.use(serverRenderer({ clientStats, currentDirectory: __dirname }));
-} else {
-  process.env.NODE_ENV = 'development';
-  console.log('Server is running in development mode');
-  const webpack = require('webpack');
-  const webpackDevMiddleware = require('webpack-dev-middleware');
-  const webpackHotMiddleWare = require('webpack-hot-middleware');
-  const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
-
-  require('ts-node').register({
-    compilerOptions: { module: 'commonjs' },
-    cacheDirectory: '/tmp',
-  });
-  const { default: configs, clientConfig } = require('./webpack.config');
-
-  const compiler = webpack(
-    configs.map((c) =>
-      Object.assign({}, c, {
-        mode: 'development',
-      }),
-    ),
-  );
-  const clientCompiler = compiler.compilers.find(({ name }) => name === 'client');
-
-  const devMiddleware = webpackDevMiddleware(compiler, {
-    serverSideRender: true,
-    publicPath: clientConfig.output.publicPath,
-  });
-
-  app.use(devMiddleware);
-  app.use(webpackHotMiddleWare(clientCompiler));
-  app.use(
-    webpackHotServerMiddleware(compiler, {
-      serverRendererOptions: {
-        // Send client compiler FS for reading index.html for emitted assets
-        fileSystem: clientCompiler.outputFileSystem,
-        // Helps with finding the output folder in memory-fs
-        currentDirectory: __dirname,
-      },
-    }),
-  );
-}
+const distPath = path.join(__dirname, 'dist');
+app.use(
+  // This path should be in sync with the `publicPath` from webpack config.
+  `${env.BASE_URL}/assets`,
+  expressStaticGzip(distPath, {
+    maxAge: '1d',
+  }),
+);
+app.use(serverRenderer({ clientStats, currentDirectory: __dirname }));
 
 /* Set ADMIN_API_USE_SSL to https for CORS support */
 let server;

package.json

@@ -10,10 +10,11 @@
     "scripts": {
         "clean": "rm -rf dist",
         "prebuild": "yarn run clean",
-        "build": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --config webpack.config.ts --mode=development",
-        "build:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' NODE_ENV=production webpack --config webpack.config.ts --mode=production",
+        "build": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' webpack --config webpack.dev.config.ts --mode=development",
+        "build:prod": "TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' NODE_ENV=production webpack --config webpack.prod.config.ts --mode=production --progress",
         "build:storybook": "build-storybook",
-        "start": "node -r dotenv/config index.js",
+        "start": "webpack serve --open --config webpack.dev.config.ts --hot",
+        "start:start:prodmode": "NODE_ENV=production node -r dotenv/config index.js",
         "storybook": "start-storybook -p 6006",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "format": "prettier --ignore-path .eslintignore --write \"**/*.+(js|jsx|ts|tsx|json)\"",
@@ -104,7 +105,6 @@
         "@testing-library/react": "^10.0.3",
         "@testing-library/react-hooks": "^7.0.2",
         "@types/cheerio": "^0.22.2",
-        "@types/compression-webpack-plugin": "^9.1.1",
         "@types/d3-shape": "^1.2.6",
         "@types/debug": "^0.0.30",
         "@types/dom-helpers": "^3.4.1",
@@ -136,7 +136,6 @@
         "@typescript-eslint/eslint-plugin": "^5.15.0",
         "@typescript-eslint/parser": "^5.15.0",
         "@xstate/react": "^1.0.0",
-        "add-asset-html-webpack-plugin": "^3.2.0",
         "autoprefixer": "^8.3.0",
         "axios": "^0.21.2",
         "axios-mock-adapter": "^1.16.0",
@@ -165,7 +164,6 @@
         "fork-ts-checker-webpack-plugin": "^7.2.1",
         "html-webpack-plugin": "^5.5.0",
         "husky": "^4.2.5",
-        "identity-obj-proxy": "^3.0.0",
         "intersection-observer": "^0.7.0",
         "jest": "^26.0.0",
         "linkify-it": "^2.2.0",
@@ -205,11 +203,9 @@
         "use-react-router": "^1.0.7",
         "webpack": "^5.68.0",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-middleware": "^5.3.1",
-        "webpack-hot-middleware": "^2.25.1",
-        "webpack-hot-server-middleware": "^0.6.1",
+        "webpack-dev-server": "^4.8.1",
+        "webpack-merge": "^5.8.0",
         "webpack-node-externals": "^3.0.0",
-        "webpack-plugin-serve": "^1.6.0",
         "webpack-stats-plugin": "^1.0.3",
         "xstate": "^4.11.0"
     },

src/assets/index.html

@@ -1,10 +1,18 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8">
-        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700" rel="stylesheet">
+        <meta charset="UTF-8" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700"
+            rel="stylesheet"
+        />
     </head>
     <body>
         <div id="react-app"></div>
+        <% if (htmlWebpackPlugin.options.cdnReact) { %>
+        <script crossorigin src="<%= htmlWebpackPlugin.options.cdnReact %>"></script>
+        <% } %> <% if (htmlWebpackPlugin.options.cdnReactDOM) { %>
+        <script crossorigin src="<%= htmlWebpackPlugin.options.cdnReactDOM %>"></script>
+        <% } %>
     </body>
 </html>