feat: prerender script

.gitignore

@@ -11,6 +11,7 @@
 
 # production
 /build
+build-*
 
 # misc
 .DS_Store

package.json

@@ -38,6 +38,7 @@
   "scripts": {
     "start": "webpack-dev-server",
     "build": "webpack",
+    "prerender": "npm run build && webpack --config ./webpack.prerender.js && node build-prerender",
     "test": "jest"
   },
   "browserslist": {

scripts/prerender.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import { StaticRouter } from 'react-router-dom/server'
+import Home from '../src/HomePage'
+import About from '../src/AboutPage'
+import Team from '../src/TeamPage'
+import fs from 'fs'
+import path from 'path'
+
+const template = fs.readFileSync(path.join(__dirname, '../build/index.html')).toString()
+
+const pages = [
+  { Component: Home, output: '/index.html' },
+  { Component: About, output: '/about' },
+  { Component: Team, output: '/team' },
+]
+
+for (const page of pages) {
+  const { Component, output } = page
+  const app = ReactDOMServer.renderToString((
+    <StaticRouter location={'/'}>
+      <Component />
+    </StaticRouter>
+  ))
+  const html = `${template}`.replace('<div id="root"></div>', `
+  <div id="root">${app}</div>
+  `)
+  if (output.indexOf('html') !== -1) {
+    fs.writeFileSync(path.join(__dirname, `../build/${output}`), html)
+  } else {
+    // make a directory and put an index.html in that
+    fs.mkdirSync(path.join(__dirname, `../build/${output}`))
+    fs.writeFileSync(path.join(__dirname, `../build/${output}`, 'index.html'), html)
+  }
+}

src/index.tsx

@@ -4,20 +4,19 @@ import './index.css';
 import HomePage from './HomePage';
 import TeamPage from './TeamPage';
 import AboutPage from './AboutPage';
-import { HashRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <HashRouter>
+  <BrowserRouter>
     <Routes>
       <Route index element={<HomePage />} />
       <Route path="projects" element={<HomePage />} />
       <Route path="team" element={<TeamPage />} />
       <Route path="about" element={<AboutPage />} />
-      <Route path="*" element={<HomePage />} />
     </Routes>
-  </HashRouter>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function

webpack.prerender.js

@@ -0,0 +1,51 @@
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+
+module.exports = {
+  entry: './scripts/prerender.tsx',
+  mode: 'development',
+  target: 'node',
+  output: {
+    path: path.resolve(__dirname, 'build-prerender'),
+    filename: 'index.js',
+    publicPath: '/',
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.json'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|tsx?)$/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        loader: 'file-loader',
+        options: {
+          // publicPath: 'build',
+          esModule: false,
+        }
+      },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: MiniCssExtractPlugin.loader,
+        }, 'css-loader',]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'styles.css',
+    }),
+  ],
+  optimization: {
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin(),
+    ],
+  },
+}