Add templates, add serve script, improve other scripts

joernb · joernb · commit 452b6aa400b2 · 2019-01-27T22:04:55.000+01:00
diff --git a/bin/react-scripts.js b/bin/react-scripts.js
@@ -28,7 +28,8 @@ switch (script) {
   case 'build':
   case 'eject':
   case 'start':
-  case 'test': {
+  case 'test':
+  case 'serve': {
     const result = spawn.sync(
       'node',
       nodeArgs
diff --git a/config/webpack.ssr.config.js b/config/webpack.ssr.config.js
@@ -41,7 +41,11 @@ module.exports = function (webpackEnv) {
             // Avoid shadowing of process.env for ssr handler
             webpack.DefinePlugin
           ].every(pluginClass => !(plugin instanceof pluginClass))
-        )
+        ),
+        // do not bundle express
+        externals: [
+          "express"
+        ]
       },
       // client compiler config
       {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
   "dependencies": {
     "@babel/core": "7.1.6",
     "@svgr/webpack": "2.4.1",
+    "@types/express": "^4.16.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
@@ -53,6 +54,7 @@
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
+    "express": "^4.16.4",
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
diff --git a/scripts/init.js b/scripts/init.js
@@ -95,10 +95,11 @@ module.exports = function(
 
   // Setup the script rules
   appPackage.scripts = {
-    start: 'react-scripts start',
-    build: 'react-scripts build',
-    test: 'react-scripts test',
-    eject: 'react-scripts eject',
+    start: 'react-scripts-with-ssr start',
+    build: 'react-scripts-with-ssr build',
+    test: 'react-scripts-with-ssr test',
+    eject: 'react-scripts-with-ssr eject',
+    serve: 'react-scripts-with-ssr serve',
   };
 
   // Setup the eslint config
diff --git a/scripts/serve.js b/scripts/serve.js
@@ -0,0 +1,24 @@
+const express = require('express');
+const path = require('path');
+const paths = require('../config/paths');
+
+// read environment variables
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+require('../config/env');
+
+const PORT = parseInt(process.env.PORT) || 3000;
+const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';
+
+// serve static files from build dir
+process.chdir(paths.appBuild);
+
+// include compiled server-side request handler
+const ssrModuleFile = path.resolve(paths.appBuild, "ssr.js");
+const ssrModule = require(ssrModuleFile);
+
+// start express server
+console.log(`Serving from '${process.cwd()}' with public path '${PUBLIC_PATH}'`);
+const app = express();
+app.use(PUBLIC_PATH, ssrModule.default);
+app.listen(PORT, () => console.log(`Open http://localhost:${PORT}${PUBLIC_PATH} for testing!`));
diff --git a/scripts/utils/verifyTypeScriptSetup.js b/scripts/utils/verifyTypeScriptSetup.js
@@ -252,7 +252,7 @@ function verifyTypeScriptSetup() {
   if (!fs.existsSync(paths.appTypeDeclarations)) {
     fs.writeFileSync(
       paths.appTypeDeclarations,
-      `/// <reference types="react-scripts" />${os.EOL}`
+      `/// <reference types="react-scripts-with-ssr" />${os.EOL}`
     );
   }
 }
diff --git a/template-typescript/public/index.html b/template-typescript/public/index.html
@@ -26,7 +26,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">ROOT</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/template-typescript/src/index.ssr.tsx b/template-typescript/src/index.ssr.tsx
@@ -0,0 +1,73 @@
+/**
+ * This file is supposed to export a request handler, which implements server-side rendering in a Node.js runtime
+ * environment.
+ * 
+ * In production, the request handler may be imported by an executable node script, which sets up an express server.
+ * A sample script is provided in `react-scripts-with-ssr/scripts/serve.js`, which you may start with `npm run serve`
+ * to test your production builds of the request handler. That script however is not part of the compilation. It is up
+ * to you to implement, how the request handler is integrated in your server-side infrastructure.
+ * 
+ * This file may also export a function called `devServerHandler`, which is supposed to return a request handler for
+ * the development environment. That request handler is plugged into the local webpack dev server started by `npm start`.
+ */
+import React from 'react';
+import { renderToNodeStream } from "react-dom/server";
+import * as express from "express";
+import * as fs from "fs";
+import * as path from "path";
+
+import App from './App';
+
+// provide a way to emulate fs access in development mode when builds are served from in-memory
+let readFileSync: (filename: string) => Buffer = fs.readFileSync;
+
+const router = express.Router();
+// serve static files from the node runtime's current working dir
+router.use(express.static(
+  // serve files from current working dir
+  ".",
+  {
+    // do not send index.html for "/"
+    index: false
+  }
+));
+
+// do server-side rendering
+router.use((request: express.Request, response: express.Response, next: express.NextFunction) => {
+  const template = readFileSync("index.html").toString();
+  const [head, tail] = template.split("ROOT");
+  const stream = renderToNodeStream(<App />);
+  response.write(head);
+  stream.pipe(response, { end: false });
+  stream.on("end", () => {
+    response.write(tail);
+    response.end();
+  });
+});
+
+/**
+ * Export a request handler. This can be plugged into an express instance or deployed as a serverless function.
+ * An express router itself implements the request handler interface (composite design pattern).
+ */
+export default router;
+
+/**
+ * Supposed to return a request handler which can be plugged into a webpack dev server during development.
+ * This function should return a somehow altered or decorated version of the 'export default' request handler,
+ * which handles differences between development and production environment.
+ * @param compiler webpack compiler which compiles the ssr entry point
+ */
+export const devServerHandler = (compiler: any) => {
+  // redirect file access to use in-memory fs of the compiler
+  readFileSync = fileName =>
+    compiler.outputFileSystem.readFileSync(path.resolve("dist", fileName));
+
+  // wrap the production router to handle some requests in another way
+  const devServerRouter = express.Router();
+
+  // skip all requests to static files, the webpack dev middleware will handle them
+  const notAStaticFile = /^\/(?!static|favicon\.ico).*/;
+  devServerRouter.use(notAStaticFile, router);
+
+  return devServerRouter;
+};
diff --git a/template/public/index.html b/template/public/index.html
@@ -26,7 +26,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">ROOT</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/template/src/index.ssr.js b/template/src/index.ssr.js
@@ -0,0 +1,73 @@
+/**
+ * This file is supposed to export a request handler, which implements server-side rendering in a Node.js runtime
+ * environment.
+ * 
+ * In production, the request handler may be imported by an executable node script, which sets up an express server.
+ * A sample script is provided in `react-scripts-with-ssr/scripts/serve.js`, which you may start with `npm run serve`
+ * to test your production builds of the request handler. That script however is not part of the compilation. It is up
+ * to you to implement, how the request handler is integrated in your server-side infrastructure.
+ * 
+ * This file may also export a function called `devServerHandler`, which is supposed to return a request handler for
+ * the development environment. That request handler is plugged into the local webpack dev server started by `npm start`.
+ */
+import React from 'react';
+import { renderToNodeStream } from "react-dom/server";
+import * as express from "express";
+import * as fs from "fs";
+import * as path from "path";
+
+import App from './App';
+
+// provide a way to emulate fs access in development mode when builds are served from in-memory
+let readFileSync = fs.readFileSync;
+
+const router = express.Router();
+// serve static files from the node runtime's current working dir
+router.use(express.static(
+  // serve files from current working dir
+  ".",
+  {
+    // do not send index.html for "/"
+    index: false
+  }
+));
+
+// do server-side rendering
+router.use((request, response, next) => {
+  const template = readFileSync("index.html").toString();
+  const [head, tail] = template.split("ROOT");
+  const stream = renderToNodeStream(<App />);
+  response.write(head);
+  stream.pipe(response, { end: false });
+  stream.on("end", () => {
+    response.write(tail);
+    response.end();
+  });
+});
+
+/**
+ * Export a request handler. This can be plugged into an express instance or deployed as a serverless function.
+ * An express router itself implements the request handler interface (composite design pattern).
+ */
+export default router;
+
+/**
+ * Supposed to return a request handler which can be plugged into a webpack dev server during development.
+ * This function should return a somehow altered or decorated version of the 'export default' request handler,
+ * which handles differences between development and production environment.
+ * @param compiler webpack compiler which compiles the ssr entry point
+ */
+export const devServerHandler = compiler => {
+  // redirect file access to use in-memory fs of the compiler
+  readFileSync = fileName =>
+    compiler.outputFileSystem.readFileSync(path.resolve("dist", fileName));
+
+  // wrap the production router to handle some requests in another way
+  const devServerRouter = express.Router();
+
+  // skip all requests to static files, the webpack dev middleware will handle them
+  const notAStaticFile = /^\/(?!static|favicon\.ico).*/;
+  devServerRouter.use(notAStaticFile, router);
+
+  return devServerRouter;
+};

Original file line number	Diff line number	Diff line change
`@@ -252,7 +252,7 @@ function verifyTypeScriptSetup() {`
`252`	`252`	`if (!fs.existsSync(paths.appTypeDeclarations)) {`
`253`	`253`	`fs.writeFileSync(`
`254`	`254`	`paths.appTypeDeclarations,`
`255`		- `/// <reference types="react-scripts" />${os.EOL}`
	`255`	+ `/// <reference types="react-scripts-with-ssr" />${os.EOL}`
`256`	`256`	`);`
`257`	`257`	`}`
`258`	`258`	`}`