Pre-render the React app to HTML template

ktkiiski · Dec 16, 2024 · e95ab5c · e95ab5c
1 parent e729c77
commit e95ab5c
Show file tree

Hide file tree

Showing 10 changed files with 886 additions and 66 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -43,7 +43,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist'
+          path: './dist/client'
 
       - name: Deploy to GitHub Pages
         id: deployment

diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
     </script>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root"><!-- pre-rendering placeholder --></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/lib/prerender.mjs b/lib/prerender.mjs
@@ -0,0 +1,16 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const distPath = path.resolve(import.meta.dirname, '../dist');
+const prerendererPath = path.join(distPath, 'prerenderer/prerenderer.mjs');
+const indexHtmlPath = path.join(distPath, 'client/index.html');
+
+async function prerenderIndex() {
+  const render = (await import(prerendererPath)).default;
+  const prerenderedElement = render();
+  const indexHtml = await fs.readFile(indexHtmlPath, 'utf-8');
+  const resultHtml = indexHtml.replace(`<!-- pre-rendering placeholder -->`, () => prerenderedElement);
+  await fs.writeFile(indexHtmlPath, resultHtml);
+}
+
+prerenderIndex();