feat: webpack config changes (#419)

* feat: webpack config split * chore: import react from cdn * chore: update readmes * chore: add script to start prod build locally Signed-off-by: Carina Ursu <[email protected]>
flyteorg · Apr 22, 2022 · f93e94f · f93e94f
1 parent cbc210c
commit f93e94f
Show file tree

Hide file tree

Showing 15 changed files with 666 additions and 674 deletions.
diff --git a/.eslintignore b/.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
diff --git a/CONTRIBUTING.md b/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

diff --git a/README.md b/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

diff --git a/env.js b/env.js
@@ -11,8 +11,15 @@ 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 || '';
 
+/** All emitted assets will have relative path to this path
+ * every time it is changed - the index.js app.use should also be updated.
+ */
+const ASSETS_PATH = `${BASE_URL}/assets/`;
+
 // Defines a file to be required which will provide implementations for
 // any user-definable code.
 const PLUGINS_MODULE = process.env.PLUGINS_MODULE;
@@ -35,6 +42,8 @@ module.exports = {
   STATUS_URL,
   ENABLE_GA,
   GA_TRACKING_ID,
+  ASSETS_PATH,
+  LOCAL_DEV_HOST,
   processEnv: {
     ADMIN_API_URL,
     BASE_URL,

diff --git a/index.js b/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.ASSETS_PATH,
+  expressStaticGzip(distPath, {
+    maxAge: '1d',
+  }),
+);
+app.use(serverRenderer({ clientStats, currentDirectory: __dirname }));
 
 /* Set ADMIN_API_USE_SSL to https for CORS support */
 let server;

diff --git a/jest.config.js b/jest.config.js
@@ -33,6 +33,7 @@ module.exports = {
     '<rootDir>/dist',
     '<rootDir>/build',
     '<rootDir>/src/tsd',
+    '<rootDir>/src/server.ts',
     '<rootDir>/.eslintrc.js',
     '\\.config.js$',
   ],

diff --git a/package.json b/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:prod": "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)\"",
@@ -50,7 +51,6 @@
         "chalk": "^2.0.1",
         "chart.js": "^3.6.2",
         "chartjs-plugin-datalabels": "^2.0.0",
-        "cheerio": "^1.0.0-rc.2",
         "cookie-parser": "^1.4.3",
         "dagre-d3": "^0.6.4",
         "dotenv": "^5.0.1",
@@ -59,12 +59,10 @@
         "fuzzysort": "^1.1.1",
         "js-yaml": "^3.13.1",
         "lodash": "^4.17.21",
-        "memory-fs": "^0.4.1",
         "morgan": "^1.8.2",
         "react-chartjs-2": "^4.0.0",
         "react-flow-renderer": "10.1.1",
         "react-ga4": "^1.4.1",
-        "react-helmet": "^5.1.3",
         "react-responsive": "^4.1.0",
         "react-transition-group": "^2.3.1",
         "serve-static": "^1.12.3",
@@ -104,7 +102,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",
@@ -123,7 +120,6 @@
         "@types/pure-render-decorator": "^0.2.27",
         "@types/react": "^16.9.34",
         "@types/react-dom": "^16.9.7",
-        "@types/react-helmet": "^5.0.3",
         "@types/react-hot-loader": "^3.0.3",
         "@types/react-json-tree": "^0.6.8",
         "@types/react-responsive": "^3.0.1",
@@ -136,7 +132,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 +160,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 +199,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"
     },

diff --git a/src/assets/index.html b/src/assets/index.html
@@ -1,10 +1,22 @@
 <!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" />
+        <title>Flyte Console</title>
+        <meta name="viewport" content="width=device-width" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:400,700"
+            rel="stylesheet"
+        />
+
+        <script>window.env = <%= htmlWebpackPlugin.options.clientEnv %></script>
     </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>
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -12,7 +12,6 @@ import { SystemStatusBanner } from 'components/Notifications/SystemStatusBanner'
 import { skeletonColor, skeletonHighlightColor } from 'components/Theme/constants';
 import { muiTheme } from 'components/Theme/muiTheme';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { hot } from 'react-hot-loader';
 import { SkeletonTheme } from 'react-loading-skeleton';
 import { QueryClientProvider } from 'react-query';
@@ -44,10 +43,6 @@ export const AppComponent: React.FC = () => {
               <QueryAuthorizationObserver />
               <SkeletonTheme color={skeletonColor} highlightColor={skeletonHighlightColor}>
                 <CssBaseline />
-                <Helmet>
-                  <title>Flyte Console</title>
-                  <meta name="viewport" content="width=device-width" />
-                </Helmet>
                 <Router history={history}>
                   <ErrorBoundary fixed={true}>
                     <NavBarRouter />

diff --git a/src/server.ts b/src/server.ts
@@ -0,0 +1,22 @@
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface ServerRendererArguments {
+  currentDirectory: string;
+}
+
+/**
+ * Universal render function in development mode
+ */
+export default function serverRenderer({ currentDirectory }: ServerRendererArguments) {
+  const html = fs.readFileSync(path.join(currentDirectory, 'dist/index.html')).toString();
+
+  return (_req: express.Request, res: express.Response) => {
+    if (html === '') {
+      throw new ReferenceError('Could not find index.html to render');
+    }
+
+    res.status(200).send(html);
+  };
+}
diff --git a/src/server.tsx b/src/server.tsx