Add server rendering to the example app

bensampaio · Sep 14, 2018 · fdfcb29 · fdfcb29
1 parent 1e7997c
commit fdfcb29
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 169 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ npm-debug.log
 yarn-error.log
 node_modules
 /examples/**/public/build
+/examples/**/server/build
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -17,12 +17,12 @@
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.2",
     "css-loader": "^1.0.0",
+    "express": "^4.16.3",
     "mini-css-extract-plugin": "^0.4.0",
     "prop-types": "^15.6.2",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
     "react-hot-loader": "^4.3.7",
-    "serve": "^10.0.1",
     "webpack": "^4.18.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8"
@@ -36,11 +36,11 @@
   "main": "index.js",
   "name": "external-svg-sprite-loader-react-example",
   "scripts": {
-    "start:dev": "webpack-dev-server --content-base public/ --port 3000",
+    "start:dev": "NODE_ENV=development webpack-dev-server --content-base public/ --port 3000",
     "start:dev:hot": "yarn start:dev --hot",
     "start:dev:no-hash": "EXAMPLE_NO_HASH=1 yarn start:dev",
     "start:dev:hot-no-hash": "EXAMPLE_NO_HASH=1 yarn start:hot",
-    "start:prd": "serve -l 3000 public/",
+    "start:prd": "NODE_ENV=production node server/build/js/main.js",
     "build:prd": "NODE_ENV=production webpack -p"
   },
   "version": "3.4.0"

diff --git a/examples/react/public/index.html b/examples/react/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/html" lang="en">
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="/build/css/main.css">

diff --git a/examples/react/src/index.jsx → examples/react/src/index.client.jsx b/examples/react/src/index.jsx → examples/react/src/index.client.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
+
 import App from './App.jsx';
 
 render(<App />, document.getElementById('root'));
diff --git a/examples/react/src/index.server.jsx b/examples/react/src/index.server.jsx
@@ -0,0 +1,23 @@
+import express from 'express';
+import fs from 'fs';
+import http from 'http';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import App from './App.jsx';
+
+const app = express();
+
+app.use(express.static('public', {
+    maxAge: Infinity,
+}));
+
+app.get('*', (request, response) => {
+    const content = renderToString(<App />);
+
+    fs.readFile('public/index.html', (err, document) => {
+        response.send(document.replace('<div id="root"></div>', `<div id="root">${content}</div>`));
+    });
+});
+
+http.createServer(app).listen(3000);
diff --git a/examples/react/webpack.config.js b/examples/react/webpack.config.js
@@ -1,13 +1,11 @@
 const path = require('path');
 
-const SvgStorePlugin = require('../../lib/SvgStorePlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-module.exports = {
-    entry: {
-        main: path.join(__dirname, 'src', 'index.jsx'),
-    },
-    mode: process.env.NODE_ENV || 'development',
+const SvgStorePlugin = require('../../lib/SvgStorePlugin');
+
+const create = () => ({
+    mode: process.env.NODE_ENV,
     module: {
         rules: [
             {
@@ -49,11 +47,6 @@ module.exports = {
             },
         },
     },
-    output: {
-        filename: 'js/[name].js',
-        path: path.join(__dirname, 'public', 'build'),
-        publicPath: '/build/',
-    },
     plugins: [
         new MiniCssExtractPlugin({
             filename: 'css/[name].css',
@@ -68,4 +61,39 @@ module.exports = {
             },
         }),
     ],
-};
+});
+
+const configs = [
+    Object.assign(create(), {
+        entry: {
+            main: path.join(__dirname, 'src', 'index.client.jsx'),
+        },
+        name: 'client',
+        output: {
+            filename: 'js/[name].js',
+            path: path.join(__dirname, 'public', 'build'),
+            publicPath: '/build/',
+        },
+    }),
+];
+
+if (process.env.NODE_ENV === 'production') {
+    configs.push(
+        Object.assign(create(), {
+            entry: {
+                main: path.join(__dirname, 'src', 'index.server.jsx'),
+            },
+            externals: /^[a-z\-0-9]+$/,
+            name: 'server',
+            output: {
+                filename: 'js/[name].js',
+                libraryTarget: 'commonjs2',
+                path: path.join(__dirname, 'server', 'build'),
+                publicPath: '/build/',
+            },
+            target: 'node',
+        })
+    );
+}
+
+module.exports = configs;