Serve a proper SSR page to browser

infernojs · Dec 23, 2022 · 32add9e · 32add9e
1 parent 2cbae82
commit 32add9e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/demo/inferno-router-demo/.gitignore b/demo/inferno-router-demo/.gitignore
@@ -17,5 +17,6 @@ lerna-debug.log
 
 dist
 distServer
+distBrowser
 package-lock.json
 .parcel-cache
diff --git a/demo/inferno-router-demo/package.json b/demo/inferno-router-demo/package.json
@@ -20,7 +20,9 @@
     "koa": "^2.14.1",
     "koa-json-body": "^5.3.0",
     "koa-logger": "^3.2.1",
-    "koa-router": "^12.0.0"
+    "koa-mount": "^4.0.0",
+    "koa-router": "^12.0.0",
+    "koa-static": "^5.0.0"
   },
   "devDependencies": {
     "@parcel/packager-ts": "^2.8.1",

diff --git a/demo/inferno-router-demo/src/index.tsx b/demo/inferno-router-demo/src/index.tsx
@@ -4,5 +4,12 @@ import { BrowserRouter } from 'inferno-router'
 import { appFactory } from './App';
 
 // hydrate(<BrowserRouter>{appFactory()}</BrowserRouter>, document.getElementById('app'))
-render(<BrowserRouter>{appFactory()}</BrowserRouter>, document.getElementById('app'))
+
+declare global {
+  interface Window {
+    __initialData__: any
+  }
+}
+
+render(<BrowserRouter initialData={window.__initialData__}>{appFactory()}</BrowserRouter>, document.getElementById('app'))
 // render(<Body>Test</Body>, document.getElementById('app'))
diff --git a/demo/inferno-router-demo/src/server.ts b/demo/inferno-router-demo/src/server.ts
@@ -1,11 +1,14 @@
 import koa from 'koa';; // koa@2
 import logger from 'koa-logger';
 import koaRouter from 'koa-router'; // koa-router@next
+import koaStatic from 'koa-static';
+import koaMount from 'koa-mount';
 import koaJSONBody from 'koa-json-body';
 import { renderToString, resolveLoaders } from 'inferno-server';
 import { StaticRouter } from 'inferno-router'
 import {Parcel} from '@parcel/core';
 import { createElement } from 'inferno-create-element';
+import path from 'path';
 
 const PORT = process.env.PORT || 3000
 
@@ -14,7 +17,8 @@ let subscription;
 let bundles;
 
 let bundler = new Parcel({
-  entries: './src/App.tsx',
+  // NOTE: Specifying target: { source: './src/App.tsx' } didn't work for me
+  entries: ['./src/App.tsx', './src/index.tsx'],
   defaultConfig: '@parcel/config-default',
   targets: {
     default: {
@@ -24,6 +28,14 @@ let bundler = new Parcel({
       },
       distDir: "./distServer",
       publicUrl: "/", // Should be picked up from environment
+    },
+    browser: {
+      context: 'browser',
+      engines: {
+        browsers: '> 0.5%, last 2 versions, not dead'
+      },
+      distDir: "./distBrowser",
+      publicUrl: "/", // Should be picked up from environment
     }
   },
   mode: 'development'
@@ -60,10 +72,30 @@ api.get('/api/about', async (ctx) => {
   })
 });
 
+function renderPage(html, initialData) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Inferno Router Demo</title>
+    <link rel="stylesheet" href="dist/App.css"/>
+    <script type="module" src="/dist/index.js"></script>
+    <script>
+    window.__initialData__ = ${JSON.stringify(initialData)};
+    </script>
+  </head>
+  <body>
+    <div id="app">${html}</div>
+  </body>
+</html>  
+`
+  return html;
+}
+
 frontend.get('/:slug?', async (ctx) => {
   const location = ctx.params.slug === undefined ? '/': `/${ctx.params.slug}`;
 
-  const pathToAppJs  = bundles.find(b => b.name === 'App.js').filePath;
+  const pathToAppJs  = bundles.find(b => b.name === 'App.js' && b.env.context === 'node').filePath;
   const { appFactory } = require(pathToAppJs)
   const app = appFactory();
 
@@ -75,7 +107,7 @@ frontend.get('/:slug?', async (ctx) => {
     initialData,
   }, app))
 
-  ctx.body = htmlApp;
+  ctx.body = renderPage(htmlApp, initialData);
 })
 
 
@@ -86,6 +118,7 @@ app.use(api.routes());
 app.use(api.allowedMethods());
 app.use(frontend.routes());
 app.use(frontend.allowedMethods());
+app.use(koaMount('/dist', koaStatic('distBrowser')));
 
 // bundler.watch((err, event) => {
 //   if (err) {