Add HTML pre-rendering

Replace dr:surge with react-spa-prerender
Add react-spa config
Add new postbuild step

Author: F-X64

.rsp.json

@@ -0,0 +1,25 @@
+{
+  "port": 3000,
+  "buildDirectory": "./dist",
+  "engine": {
+    "launchOptions": {
+      "args": [
+        "--no-sandbox",
+        "--disable-setuid-sandbox"
+      ],
+      "product": "chrome",
+      "headless": true,
+      "ignoreHTTPSErrors": true
+    },
+    "gotoOptions": {
+      "timeout": 0
+    }
+  },
+  "routes": [
+    "/",
+    "/browser/aws",
+    "/browser/azure",
+    "/browser/google",
+    "/blog"
+  ]
+}

package-lock.json

@@ -44,6 +44,7 @@
     "prop-types": "^15.8.1",
     "react-axe": "^3.5.4",
     "react-router-dom": "^6.6.2",
+    "react-spa-prerender": "^1.0.14",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^5.0.0",
     "sass": "^1.60.0",
@@ -69,7 +70,7 @@
   "private": true,
   "repository": "https://github.com/redhatcloudx/cloud-image-directory-frontend",
   "scripts": {
-    "build": "webpack --config webpack.prod.js && npm run dr:surge",
+    "build": "webpack --config webpack.prod.js",
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
     "bundle-profile:analyze": "npm run build:bundle-profile && webpack-bundle-analyzer ./stats.json",
     "ci-checks": "npm run type-check && npm run lint && npm run test:coverage",
@@ -79,6 +80,7 @@
     "format": "prettier --check --write ./src/**/*.{tsx,ts}",
     "lint": "npm run eslint",
     "prebuild": "npm run clean",
+    "postbuild": "react-spa-prerender",
     "start": "sirv dist --cors --single --host --port 8080",
     "start:dev": "webpack serve --color --progress --stats-error-details --config webpack.dev.js",
     "test": "jest --watch",

package.json

@@ -15,5 +15,10 @@ if (process.env.NODE_ENV !== 'production') {
   const axe = require('react-axe')
   axe(React, ReactDOM, 1000, config)
 }
+const rootElement = document.getElementById("root") as HTMLElement;
 
-ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
+if (rootElement.hasChildNodes()) {
+  ReactDOM.hydrate(<App />, rootElement);
+} else {
+  ReactDOM.render(<App />, rootElement);
+}

src/index.tsx

@@ -4,7 +4,7 @@ const CopyPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const BG_IMAGES_DIRNAME = 'bgimages';
-const ASSET_PATH = process.env.ASSET_PATH || '/web-app/';
+const ASSET_PATH = process.env.ASSET_PATH || '/';
 module.exports = env => {
 
   return {
@@ -99,12 +99,12 @@ module.exports = env => {
     },
     output: {
       filename: '[name].bundle.js',
-      path: path.resolve(__dirname, 'dist/web-app'),
+      path: path.resolve(__dirname, 'dist'),
       publicPath: ASSET_PATH
     },
     plugins: [
       new HtmlWebpackPlugin({
-        filename: '../index.html',
+        filename: 'index.html',
         template: path.resolve(__dirname, 'src', 'index.html')
       }),
       new Dotenv({