Add webpack and dev server config for ssr

Author: joernb

.gitignore

@@ -0,0 +1,14 @@
+.idea/
+.vscode/
+node_modules/
+build
+.DS_Store
+*.tgz
+my-app*
+template/src/__tests__/__snapshots__/
+lerna-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.changelog
+.npm/

config/paths.js

@@ -81,6 +81,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexSsrJs: resolveModule(resolveApp, 'src/index.ssr'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -103,6 +104,7 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexSsrJs: resolveModule(resolveApp, 'src/index.ssr'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
@@ -137,6 +139,7 @@ if (
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
     appIndexJs: resolveModule(resolveOwn, 'template/src/index'),
+    appIndexSsrJs: resolveModule(resolveOwn, 'src/index.ssr'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),

config/webpack.ssr.config.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpackConfigFactory = require('./webpack.config.js');
+const paths = require('./paths');
+
+// decorate original webpack config
+module.exports = function (webpackEnv) {
+  const template = webpackConfigFactory(webpackEnv);
+  return Object.assign(
+    // multi compiler config (client + server)
+    [
+      // ssr compiler config
+      {
+        ...template,
+        name: 'ssr',
+        target: 'node',
+        entry: [
+          // ssr entry point, usually s.th. like `./src/index.ssr.tsx` with `export default (req,res) => {}`
+          paths.appIndexSsrJs
+        ],
+        output: {
+          ...template.output,
+          filename: 'ssr.js',
+          libraryTarget: 'commonjs2',
+          // avoid using absolute path '/' defined by template
+          publicPath: ''
+        },
+        optimization: {
+          ...template.optimization,
+          // disable chunk splitting
+          splitChunks: {},
+          runtimeChunk: false
+        },
+        // filter out some plugins
+        plugins: template.plugins.filter(plugin =>
+          [
+            // do not generate an additional index.html for ssr
+            HtmlWebpackPlugin,
+            // Avoid shadowing of process.env for ssr handler
+            webpack.DefinePlugin
+          ].every(pluginClass => !(plugin instanceof pluginClass))
+        )
+      },
+      // client compiler config
+      {
+        // use original config
+        ...template,
+        name: 'client'
+      },
+    ],
+    // workarounds
+    {
+      // at least one script expects to find `config.output.publicPath` but `config` is now an array
+      output: {
+        publicPath: template.output.publicPath
+      }
+    }
+  );
+};

config/webpackDevServer.ssr.config.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const webpackDevServerConfigFactory = require('./webpackDevServer.config.js');
+const requireFromString = require('require-from-string');
+const path = require('path');
+const paths = require('./paths');
+
+// decorate original webpack dev server config
+module.exports = function(proxy, allowedHost) {
+  const template = webpackDevServerConfigFactory(proxy, allowedHost);
+
+  return {
+    ...template,
+    serverSideRender: true,
+    before(app, server) {
+      const multiCompiler = server.middleware.context.compiler;
+      const compiler = multiCompiler.compilers.filter(c => c.name === 'ssr')[0];
+      if(!compiler) {
+        throw new Error("Webpack compiler with name 'ssr' not found.");
+      }
+
+      // stores current request handler, changes after every compilation
+      let ssrHandler;
+
+      // fetch ssr handler after every compilation
+      multiCompiler.hooks.done.tap('webpackDevServer.ssr', () => {
+        // fetch ssr entry point file name
+        const filename = path.resolve(paths.appBuild, "..", "dist", "ssr.js");
+        // read code from in memory fs
+        const code = compiler.outputFileSystem.readFileSync(filename).toString();
+        // compile code to node module
+        const exports = requireFromString(code, filename);
+
+        if (exports.devServerHandler) {
+          // install dev server handler
+          ssrHandler = exports.devServerHandler(compiler);
+        } else if (exports.default) {
+          // install production handler
+          ssrHandler = exports.default;
+        } else {
+          // no handler found
+          throw new Error("SSR entry point does not export a handler.");
+        }
+      });
+
+      // install request handler in webpack dev server
+      app.use((request, response, next) => {
+        // forward to handler if it exists
+        if (ssrHandler) {
+          ssrHandler(request, response, next);
+        } else {
+          // skip to dev middleware
+          next();
+        }
+      });
+    }
+  };
+};