Client: Support any number of SPAs with SSR enabled

Author: winwiz1

README.md

@@ -30,7 +30,7 @@
 
     The backend implements HTTP caching and allows long term storage of script bundles in browser's cache that further enhances performance yet supports smooth deployment of versioning changes in production (eliminating the risk of stale bundles getting stuck in the cache).
 
-* SSR. Build-time SSR (also known as prerendering) is supported. The solution allows to selectively turn the SSR on or off for the chosen part (e.g. a particular SPA) of the React application. This innovative flexibility is important because as noted by the in-depth [article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) on this subject, SSR is not a good recipe for every project and comes with costs. For example, the costs analysis could lead to a conclusion the Login part of an application is a good fit for SSR whereas the Reporting module is not. Implementing each part as an SPA with selectively enabled/disabled SSR would provide an optimal implementation and resolve this design disjuncture.
+* SSR. Build-time SSR (also known as prerendering or static generation) is supported. The solution allows to selectively turn the SSR on or off for the chosen parts (e.g. particular SPAs) of the React application. This innovative flexibility is important because as noted by the in-depth [article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) on this subject, SSR is not a good recipe for every project and comes with costs. For example, the costs analysis could lead to a conclusion the Login part of an application is a good fit for SSR whereas the Reporting module is not. Implementing each part as an SPA with selectively enabled/disabled SSR would provide an optimal implementation and resolve this design disjuncture.
 
     The SSR related costs depend on:
 
@@ -42,7 +42,7 @@
 
     Choosing build-time SSR allows to exclude the last two costs and effectively mitigate the first one by providing a concise implementation comprised of just few small source [files](https://github.com/winwiz1/crisp-react/tree/master/client/src/utils/ssr). The implementation is triggered as an optional post-build step and is consistent with script bundle compression also performed at the build time to avoid loading the webserver CPU.
 
-    Only the SPA landing page is prerendered. Other SPA pages are not prerendered because these are the internal SPA pages. Switch to the internal pages is performed by SPA without spending time on network trips and hitting the webserver thus lowering its workload and letting it serve more clients simultaneously.
+    Only the landing page of an SPA is prerendered. Other SPA pages are not because those are the internal SPA pages. Switching to the internal pages is performed by SPA without spending time on network trips and hitting the webserver thus lowering its workload and letting it serve more clients simultaneously.
 
 * Overall simplicity. For any starter project or boilerplate, the probability of having bugs/issues down the track increases along with the amount of code. It is shown by the code size badge and can be checked for any GitHub repository using the link: `https://img.shields.io/github/languages/code-size/<user-name>/<repo-name>`. For Crisp React, the React client and the Express backend each contribute ~50% of the codebase.<br/>The code size of other starter projects was a main motivation to develop this solution. The other projects were enjoyable for learning purposes however the amount of code was percieved to be excessive for use in production.
 

client/.vscode/launch.json

@@ -11,7 +11,7 @@
       "url": "http://localhost:3000/first.html",
       "sourceMaps": true,
       "preLaunchTask": "npm build:prod-debug",
-      "trace": "verbose",
+      "trace": true,
       "webRoot": "${workspaceFolder}",
       "breakOnLoad": true,
       "disableNetworkCache": true,
@@ -24,7 +24,7 @@
       "sourceMaps": true,
       "preLaunchTask": "npm dev",
       "postDebugTask": "kill process in terminal",
-      "trace": "verbose",
+      "trace": true,
       "webRoot": "${workspaceFolder}",
       "breakOnLoad": true,
       "disableNetworkCache": true,
@@ -37,7 +37,7 @@
       "sourceMaps": true,
       "preLaunchTask": "npm dev",
       "postDebugTask": "kill process in terminal",
-      "trace": "verbose",
+      "trace": true,
       "webRoot": "${workspaceFolder}",
       "breakOnLoad": true,
       "disableNetworkCache": true,

client/config/spa.config.js

@@ -15,22 +15,25 @@ Each SPA has:
 - SSR flag. If set to true, the SPA landing page will be prerendered at the
   build time e.g. its HTML will be generated and inserted into the <body> of
   the .html file.
-  Only one SPA can have this flag set. When the flag is not set, the <body>
+  Any SPA can have this flag set. When the flag is not set, the <body>
   contains mainly references to the script bundles with very little HTML markup.
 
 You can customize SPAs by modifying the SPA Configuration block below. It will
-reconfigure client, backend and the tests. You'll need to adjust 3 lines
-"http://localhost:<port>/first.html" in the ../.vscode/launch.json file.
-If the first SPA is called 'login' then change these lines to:
-"http://localhost:<port>/login.html".
+reconfigure client, backend and the tests.
 
 Note: Page transitions within an SPA are performed as usual using <Link>,
   <NavLink> and other means (like history.push if enabled) customary to all
   SPAs. Transitions from one SPA to another should be performed using HTML
   anchor element (or its replacement provided by the UI library) targeting the
-  other SPA landing page:
+  other SPA landing page. For example:
   <a href="/first.html"> or <Menu.Item href="/second.html">.
 
+Note: To facilitate debugging, edit the ../.vscode/launch.json file to reflect
+  the SPA Configuration block changes. You'll need to adjust the three lines
+  with the text "http://localhost:<port>/first.html".
+  For example, if you renamed the first SPA from 'first' to 'login' then
+  change these three lines to: "http://localhost:<port>/login.html".
+
 To turn off code splitting using multiple SPAs simply leave one SPA in the
 SPA Configuration block.
 */
@@ -76,13 +79,16 @@ var ConfiguredSPAs = function() {
       throw new RangeError("One and only one SPA must have 'redirect: true'");
     }
 
-    num = SPAs.reduce(function(acc, item) {
-      return item.params.ssr ? acc + 1 : acc;
-    }, 0);
-
-    if (num > 1) {
-      throw new RangeError("At most one SPA can have 'ssr: true'");
-    }
+    SPAs.forEach(function(spa) {
+      var spaName = spa.params.name.toLowerCase();
+      var spas = SPAs.filter(function(item) {
+        return item.params.name.toLowerCase().startsWith(spaName);
+      });
+
+      if (spas.length !== 1) {
+        throw new RangeError("SPAs have names that are not distinct enough");
+      }
+    });
   };
 
   SPAs.getEntrypoints = function() {
@@ -99,12 +105,13 @@ var ConfiguredSPAs = function() {
     }).params.name;
   };
 
-  SPAs.getSsrName = function() {
-    var spa = SPAs.find(function(spa) {
+  SPAs.getSsrNames = function() {
+    var spas = SPAs.filter(function(spa) {
       return spa.params.ssr;
     });
-    // eslint-disable-next-line
-    return !!spa? spa.params.name : undefined;
+    return spas.map(function(spa) {
+      return spa.params.name;
+    });
   };
 
   SPAs.getNames = function() {

client/src/utils/postprocess/postProcess.ts

@@ -7,73 +7,93 @@ import { postProcess as postProcessCSS } from "./postProcessCSS";
 
 const workDir = "./dist/";
 
-export async function postProcess(): Promise<void> {
-  const ssrSpaName = require("../../../config/spa.config").getSsrName();
-
-  if (ssrSpaName) {
-
-    type SSRTuple = [string, string];
-    let tp: SSRTuple|undefined;
+// stackoverflow.com/a/16060619
+function requireUncached(module: string) {
+  delete require.cache[require.resolve(module)];
+  return require(module);
+}
 
-    console.log("Starting SSR post-processing");
+export async function postProcess(): Promise<void> {
+  const ssrSpaNames = require("../../../config/spa.config").getSsrNames();
 
+  if (ssrSpaNames.length > 0) {
     const getEntrypoints = require("../../../config/spa.config").getEntrypoints;
 
-    for (const [key, value] of Object.entries(getEntrypoints())) {
-      if (key === ssrSpaName) {
-        const ssrFileName = `${key}-SSR.txt`;
-        tp = [ssrFileName, value as string];
-        break;
+    const performSsr = async (ssrSpaName: any) => {
+      type SSRTuple = [string, string];
+      let tp: SSRTuple|undefined;
+
+      for (const [key, value] of Object.entries(getEntrypoints())) {
+        if (key === ssrSpaName) {
+          const ssrFileName = `${key}-SSR.txt`;
+          tp = [ssrFileName, value as string];
+          break;
+        }
       }
-    }
 
-    if (!tp) {
-      console.error("Internal SSR processing error");
-      process.exit(1);
-    }
+      if (!tp) {
+        console.error("Internal SSR processing error");
+        process.exit(1);
+      }
 
-    const webpackConfig = require("../../../webpack.config.ssr.js");
-    const compiler = webpack({...webpackConfig, entry: tp[1]});
+      const webpackConfig = require("../../../webpack.config.ssr.js");
+      const compiler = webpack({...webpackConfig, entry: tp[1]});
 
-    type PromiseCallback = () => void;
+      type PromiseCallback = () => void;
 
-    class CallbackWrapper {
-      constructor(readonly callback: PromiseCallback) {
-      }
-      readonly invoke = (): void => {
-        this.callback();
+      class CallbackWrapper {
+        constructor(readonly callback: PromiseCallback) {
+        }
+        readonly invoke = (): void => {
+          this.callback();
+        }
       }
-    }
-
-    let cbWrapper: CallbackWrapper|undefined;
-    const waitForCompiler = new Promise<void>((resolve) => { cbWrapper = new CallbackWrapper(resolve)});
 
-    compiler.run((err, stats) => {
-      if (err) {
-        console.error(`Library compilation failed, error: ${err}`);
+      let cbWrapper: CallbackWrapper|undefined;
+      const waitForCompiler = new Promise<void>((resolve) => { cbWrapper = new CallbackWrapper(resolve)});
+
+      compiler.run((err, stats) => {
+        if (err) {
+          console.error(`Library compilation failed, error: ${err}`);
+          process.exit(1);
+        }
+        if (stats?.hasErrors()) {
+          console.error(`Library compilation failed, error: ${stats?.toString() ?? "no description"}`);
+          process.exit(1);
+        }
+        cbWrapper?.invoke();
+      });
+
+      await waitForCompiler;
+
+      const { ssrLibrary }  = requireUncached("../../../dist-ssr/ssr-library");
+      const { default: asString } = ssrLibrary;
+
+      if (!asString) {
+        console.error("Error: Any SPA with SSR enabled must have 'asString' function exported as default in its entrypoint .tsx file. \
+Please check the 4-step sequence (provided in the comments at the top of each entrypoints/xxx.tsx file) has been followed.");
         process.exit(1);
       }
-      if (stats?.hasErrors()) {
-        console.error(`Library compilation failed, error: ${stats?.toString() ?? "no description"}`);
+
+      const writeFile = promisify(fs.writeFile);
+
+      try {
+        await writeFile(path.join(workDir, tp[0]), asString());
+        await postProcessSSR(workDir, ssrSpaName);
+      } catch (e) {
+        console.error(`Failed to create pre-built SSR file, exception: ${e}`);
         process.exit(1);
       }
-      cbWrapper?.invoke();
-    });
+    };
 
-    await waitForCompiler;
-
-    const { ssrLibrary }  = require("../../../dist-ssr/ssr-library");
-    const { default: asString } = ssrLibrary;
-    const writeFile = promisify(fs.writeFile);
+    console.log("Starting SSR post-processing");
 
-    try {
-      await writeFile(path.join(workDir, tp[0]), asString());
-      await postProcessSSR();
-    } catch (e) {
-      console.error(`Failed to create pre-built SSR file, exception: ${e}`);
-      process.exit(1);
+    for (const spa of ssrSpaNames) {
+      await performSsr(spa);
     }
-  } //if (ssrSpaName)
+
+    console.log("Finished SSR post-processing")
+  }
 
   if (process.env.CF_PAGES) {
     const writeFile = promisify(fs.writeFile);
@@ -95,11 +115,11 @@ export async function postProcess(): Promise<void> {
     await postProcessCSS();
   } catch (e) {
     console.error(`Failed to post-process CSS, exception: ${e}`);
-    process.exit(1);
+    process.exit(2);
   }
 }
 
 postProcess().catch((e: Error) => {
   console.error(`SSR/CSS processing failed, error: ${e}`);
-  process.exit(2);
+  process.exit(3);
 });

client/src/utils/postprocess/postProcessSSR.ts

@@ -2,30 +2,22 @@ import * as fs from "fs";
 import * as path from "path";
 import { promisify } from "util";
 
-const workDir = "./dist/";
-
-export async function postProcess(): Promise<void> {
+export async function postProcess(workDir: string, filePattern: string): Promise<void> {
   const readdir = promisify(fs.readdir);
   const files = await readdir(workDir);
-  const txtFiles = files.filter(file => path.extname(file) === ".txt");
-  const htmlFiles = files.filter(file => path.extname(file) === ".html");
-  const ar = new Array<[string, string]>();
-
-  htmlFiles.forEach(file => {
-    const fileFound = txtFiles.find(txt => txt.startsWith(file.replace(/\.[^/.]+$/, "")));
-    if (fileFound) {
-      ar.push([file, fileFound]);
-    }
-  });
+  const txtFiles = files.filter(file =>
+    path.extname(file) === ".txt" && path.basename(file).startsWith(filePattern));
+  const htmlFiles = files.filter(file =>
+    path.extname(file) === ".html" && path.basename(file).startsWith(filePattern));
 
-  await Promise.all(ar.map(([k, v]) => {
-    return postProcessFile(k, v);
-  }));
+  if (txtFiles.length !== 1 || htmlFiles.length !== 1) {
+    throw new Error("Unexpected count of SSR related files");
+  }
 
-  console.log("Finished SSR post-processing")
+  await postProcessFile(workDir, htmlFiles[0], txtFiles[0]);
 }
 
-async function postProcessFile(htmlFile: string, ssrFile: string): Promise<void> {
+async function postProcessFile(workDir: string, htmlFile: string, ssrFile: string): Promise<void> {
   const readFile = promisify(fs.readFile);
   const htmlFilePath = path.join(workDir, htmlFile);
   const ssrFilePath = path.join(workDir, ssrFile);

client/webpack.config.js

@@ -1,7 +1,6 @@
 const path = require("path");
 const fs = require("fs");
 const webpack = require("webpack")
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const HtmlWebpackHarddiskPlugin = require("html-webpack-harddisk-plugin");
@@ -127,6 +126,8 @@ const getWebpackConfig = (env, argv) => {
       path: path.resolve(__dirname, "dist"),
       publicPath: isJamstack? "/" : "/static/",
       crossOriginLoading: "anonymous",
+      clean: true,
+      compareBeforeEmit: false,
     },
     optimization: {
       splitChunks: {
@@ -169,7 +170,6 @@ const getWebpackConfig = (env, argv) => {
       }),
     },
     plugins: [
-      new CleanWebpackPlugin(),
       new webpack.DefinePlugin({
         "process.env.DEVELOPMENT": JSON.stringify(isProduction === false),
         "CF_PAGES": !!process.env.CF_PAGES,

client/webpack.config.ssr.js

@@ -1,7 +1,6 @@
 const path = require("path");
 const webpack = require("webpack")
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const nodeExternals = require("webpack-node-externals");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@@ -80,7 +79,6 @@ module.exports = {
       ]
     },
     plugins: [
-      new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["dist-ssr"]}),
       new webpack.DefinePlugin({
         "process.env.DEVELOPMENT": JSON.stringify(isProduction === false),
         "CF_PAGES": !!process.env.CF_PAGES,
@@ -101,6 +99,8 @@ module.exports = {
       filename: "ssr-library.js",
       library: "ssrLibrary",
       libraryTarget: "commonjs",
+      clean: true,
+      compareBeforeEmit: false,
     },
     externals: [nodeExternals()],
   };