From edbed587defb8254098fd3e61869097e53880a67 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Wed, 3 Apr 2019 23:18:53 +0900
Subject: [PATCH 01/12] SSR support

---
 README.md                                     |   8 +-
 packages/create-react-app/createReactApp.js   |  11 +-
 .../react-dev-utils/WebpackDevServerUtils.js  |  10 +-
 .../react-dev-utils/devRendererMiddleware.js  | 175 ++++++++++++++++
 packages/react-dev-utils/package.json         |   4 +-
 .../printHostingInstructions.js               |  12 +-
 packages/react-scripts/bin/react-scripts.js   |   1 +
 packages/react-scripts/config/env.js          |  16 +-
 packages/react-scripts/config/paths.js        | 103 +++++++---
 .../react-scripts/config/webpack.config.js    | 186 +++++++++++-------
 .../config/webpackDevServer.config.js         |  78 +++++++-
 packages/react-scripts/package.json           |   6 +
 packages/react-scripts/scripts/build.js       |  28 +--
 packages/react-scripts/scripts/init.js        |  10 +-
 packages/react-scripts/scripts/serve.js       | 110 +++++++++++
 packages/react-scripts/scripts/start.js       |  26 ++-
 .../scripts/utils/createJestConfig.js         |   2 +-
 .../react-scripts/template-ssr/src/index.js   |  12 ++
 .../template-ssr/src/index.node.js            |  24 +++
 .../src/index.node.tsx                        |  24 +++
 .../template-typescript-ssr/src/index.tsx     |  12 ++
 .../template-typescript/public/index.html     |   2 +-
 .../react-scripts/template/public/index.html  |   2 +-
 23 files changed, 712 insertions(+), 150 deletions(-)
 create mode 100644 packages/react-dev-utils/devRendererMiddleware.js
 create mode 100644 packages/react-scripts/scripts/serve.js
 create mode 100644 packages/react-scripts/template-ssr/src/index.js
 create mode 100644 packages/react-scripts/template-ssr/src/index.node.js
 create mode 100644 packages/react-scripts/template-typescript-ssr/src/index.node.tsx
 create mode 100644 packages/react-scripts/template-typescript-ssr/src/index.tsx

diff --git a/README.md b/README.md
index 347d4359760..9fc198cf9d1 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,11 @@ The build is minified and the filenames include the hashes.<br>
 
 Your app is ready to be deployed.
 
+### `npm run serve` or `yarn serve`
+
+Launches a server for the content in the `build` folder.<br>
+When an `index.node.js` file exists, it loads the Node bundle and server the app with server rendering.
+
 ## User Guide
 
 You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/).
@@ -149,6 +154,7 @@ Your environment will have everything you need to build a modern single-page Rea
 - A live development server that warns about common mistakes.
 - A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
 - An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_)
+- Ability to build a Node.js version of the app, which can be used for implementind Server Rendering.
 - Hassle-free updates for the above tools with a single dependency.
 
 Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.
@@ -171,8 +177,6 @@ Here are a few common cases where you might want to try something else:
 
 - If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/).
 
-- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles.
-
 - If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
 
 - Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/).
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index 2e69901b455..67a8c612c6f 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -79,6 +79,7 @@ const program = new commander.Command(packageJson.name)
   .option('--use-npm')
   .option('--use-pnp')
   .option('--typescript')
+  .option('--ssr')
   .allowUnknownOption()
   .on('--help', () => {
     console.log(`    Only ${chalk.green('<project-directory>')} is required.`);
@@ -181,6 +182,7 @@ createApp(
   program.useNpm,
   program.usePnp,
   program.typescript,
+  program.ssr,
   hiddenProgram.internalTestingTemplate
 );
 
@@ -191,6 +193,7 @@ function createApp(
   useNpm,
   usePnp,
   useTypescript,
+  useSsr,
   template
 ) {
   const root = path.resolve(name);
@@ -296,7 +299,8 @@ function createApp(
     template,
     useYarn,
     usePnp,
-    useTypescript
+    useTypescript,
+    useSsr
   );
 }
 
@@ -380,7 +384,8 @@ function run(
   template,
   useYarn,
   usePnp,
-  useTypescript
+  useTypescript,
+  useSsr
 ) {
   getInstallPackage(version, originalDirectory).then(packageToInstall => {
     const allDependencies = ['react', 'react-dom', packageToInstall];
@@ -436,7 +441,7 @@ function run(
             cwd: process.cwd(),
             args: nodeArgs,
           },
-          [root, appName, verbose, originalDirectory, template],
+          [root, appName, verbose, originalDirectory, template, useSsr],
           `
         var init = require('${packageName}/scripts/init.js');
         init.apply(null, JSON.parse(process.argv[1]));
diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index 1d7021e037c..4c654a67646 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -139,14 +139,14 @@ function createCompiler({
   let tsMessagesResolver;
 
   if (useTypeScript) {
-    compiler.hooks.beforeCompile.tap('beforeCompile', () => {
+    compiler.compilers[0].hooks.beforeCompile.tap('beforeCompile', () => {
       tsMessagesPromise = new Promise(resolve => {
         tsMessagesResolver = msgs => resolve(msgs);
       });
     });
 
     forkTsCheckerWebpackPlugin
-      .getCompilerHooks(compiler)
+      .getCompilerHooks(compiler.compilers[0])
       .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
         const allMsgs = [...diagnostics, ...lints];
         const format = message =>
@@ -173,7 +173,7 @@ function createCompiler({
     // them in a readable focused way.
     // We only construct the warnings and errors for speed:
     // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548
-    const statsData = stats.toJson({
+    const statsData = stats.stats[0].toJson({
       all: false,
       warnings: true,
       errors: true,
@@ -195,8 +195,8 @@ function createCompiler({
 
       // Push errors and warnings into compilation result
       // to show them after page refresh triggered by user.
-      stats.compilation.errors.push(...messages.errors);
-      stats.compilation.warnings.push(...messages.warnings);
+      stats.stats[0].compilation.errors.push(...messages.errors);
+      stats.stats[0].compilation.warnings.push(...messages.warnings);
 
       if (messages.errors.length > 0) {
         devSocket.errors(messages.errors);
diff --git a/packages/react-dev-utils/devRendererMiddleware.js b/packages/react-dev-utils/devRendererMiddleware.js
new file mode 100644
index 00000000000..b3ff9b59267
--- /dev/null
+++ b/packages/react-dev-utils/devRendererMiddleware.js
@@ -0,0 +1,175 @@
+'use strict';
+
+const chalk = require('chalk');
+const Module = require('module');
+const path = require('path');
+const tmp = require('tmp');
+const fs = require('fs');
+const clearConsole = require('./clearConsole');
+
+module.exports = function devRendererMiddleware(
+  nodeBuildPath,
+  registerSourceMap
+) {
+  return (req, res, next) => {
+    let cache = {};
+    let { webpackStats, fs: memoryFs } = res.locals;
+
+    // The index.html file contains `<script>` and `<link>` files that load
+    // the web bundle. We provide it to the node app by writing it to a
+    // temporary file.
+    let indexMemoryPathname = path.join(nodeBuildPath, 'index.html');
+    let indexHtmlTemplate = memoryFs.readFileSync(indexMemoryPathname, 'utf8');
+    let { name: indexPathname, fd } = tmp.fileSync();
+    fs.writeSync(fd, indexHtmlTemplate, 0, 'utf8');
+
+    let cleanup = () => {
+      clearCache(cache);
+      fs.close(fd);
+    };
+
+    let handleError = (error = 'Unknown Error') => {
+      try {
+        // Handle any errors by injecting the stack trace into the rendered
+        // HTML.
+        if (error && typeof error !== 'string') {
+          let indexHtml = indexHtmlTemplate
+            .replace(/%\w+%/g, '')
+            .replace(
+              '<body>',
+              '<body><pre style="border: 2px red solid; margin: 1rem; padding: 1rem;">' +
+                error.stack +
+                '</pre>'
+            );
+          renderError(res, indexHtml, error);
+        } else {
+          next(error);
+        }
+      } finally {
+        cleanup();
+      }
+    };
+
+    try {
+      let {
+        children: [web, node],
+      } = webpackStats.toJson({
+        all: false,
+        assets: true,
+        entrypoints: true,
+      });
+
+      let nodeEntrypoints = node.entrypoints.main.assets
+        .filter(asset => /\.js$/.test(asset))
+        .map(asset => path.join(nodeBuildPath, asset));
+
+      // Find any source map files, and pass them to the calling app so that
+      // it can transform any error stack traces appropriately.
+      for (let { name } of node.assets) {
+        let pathname = path.join(nodeBuildPath, name);
+        if (/\.map$/.test(pathname) && memoryFs.existsSync(pathname)) {
+          registerSourceMap(pathname, memoryFs.readFileSync(pathname, 'utf8'));
+        }
+      }
+
+      let { default: app } = requireFromFS(nodeEntrypoints[0], memoryFs, cache);
+      process.env.HTML_TEMPLATE_PATH = indexPathname;
+      let maybePromise = app(req, res, handleError);
+      if (maybePromise && maybePromise.then) {
+        maybePromise.then(cleanup, handleError);
+      } else {
+        cleanup();
+      }
+    } catch (error) {
+      handleError(error);
+    }
+  };
+};
+
+function renderError(res, template, error) {
+  res.status(500);
+  res.send(template);
+
+  clearConsole();
+  console.log();
+  console.log(chalk.red('An error occured while server-rendering your app:'));
+  console.log();
+  console.error(error);
+}
+
+// Stubs the `require()` function within any evaluated code, so that entire
+// bundles can be loaded from a memory FS like the one passed in by Webpack.
+//
+// Based on require-from-string
+// MIT License, Copyright (c) Vsevolod Strukchinsky
+// https://github.com/floatdrop/require-from-string/blob/d1575a49065eb7a49b86b4de963f04f1a14dfd60/index.js
+function requireFromFS(absoluteFilename, fs, cache = {}) {
+  if (typeof absoluteFilename !== 'string') {
+    throw new Error(
+      '[requireFromFS] filename must be a string, not ' +
+        typeof absoluteFilename
+    );
+  }
+
+  let cached = cache[absoluteFilename];
+  if (cached) {
+    return cached.exports;
+  }
+
+  let moduleDirname = path.dirname(absoluteFilename);
+  let moduleExtension = path.extname(absoluteFilename);
+  let code = fs.readFileSync(absoluteFilename, 'utf8');
+
+  if (typeof code !== 'string') {
+    throw new Error(
+      '[requireFromFS] code must be a string, not ' + typeof code
+    );
+  }
+
+  if (moduleExtension === '.json') {
+    code = 'module.exports = ' + code;
+  }
+
+  let paths = Module._nodeModulePaths(moduleDirname);
+  let parent = module.parent;
+  let m = new Module(absoluteFilename, parent);
+  m.filename = absoluteFilename;
+  m.require = filename => {
+    if (filename[0] === '.') {
+      let resolvedFilename = m.require.resolve(filename);
+      return requireFromFS(resolvedFilename, fs, cache);
+    } else {
+      return require(filename);
+    }
+  };
+  m.require.resolve = filename => {
+    if (filename[0] === '.') {
+      let resolvedFilename = path.resolve(moduleDirname, filename);
+      if (fs.existsSync(resolvedFilename)) {
+        return resolvedFilename;
+      } else {
+        throw new Error(`Cannot find module '${filename}'`);
+      }
+    } else {
+      return require.resolve(filename);
+    }
+  };
+  m.paths = paths;
+  m._compile(code, absoluteFilename);
+  cache[absoluteFilename] = m;
+  require.cache[absoluteFilename] = m;
+
+  if (parent && parent.children) {
+    parent.children.splice(parent.children.indexOf(m), 1);
+  }
+
+  return m.exports;
+}
+
+function clearCache(cache) {
+  let keys = Object.keys(cache);
+  for (let key of keys) {
+    delete cache[key];
+    delete require.cache[key];
+  }
+}
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index d05e7f2ebb6..61bfb63c64b 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -20,6 +20,7 @@
     "checkRequiredFiles.js",
     "clearConsole.js",
     "crossSpawn.js",
+    "devRendererMiddleware.js",
     "errorOverlayMiddleware.js",
     "eslintFormatter.js",
     "evalSourceMapMiddleware.js",
@@ -74,7 +75,8 @@
     "shell-quote": "1.6.1",
     "sockjs-client": "1.3.0",
     "strip-ansi": "5.2.0",
-    "text-table": "0.2.0"
+    "text-table": "0.2.0",
+    "tmp": "^0.1.0"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js
index 39d7de0fe7f..1fbe1cc162f 100644
--- a/packages/react-dev-utils/printHostingInstructions.js
+++ b/packages/react-dev-utils/printHostingInstructions.js
@@ -110,17 +110,9 @@ function printDeployInstructions(publicUrl, hasDeployScript, useYarn) {
 }
 
 function printStaticServerInstructions(buildFolder, useYarn) {
-  console.log('You may serve it with a static server:');
+  console.log('You may serve it with the serve script:');
   console.log();
-
-  if (!fs.existsSync(`${globalModules}/serve`)) {
-    if (useYarn) {
-      console.log(`  ${chalk.cyan('yarn')} global add serve`);
-    } else {
-      console.log(`  ${chalk.cyan('npm')} install -g serve`);
-    }
-  }
-  console.log(`  ${chalk.cyan('serve')} -s ${buildFolder}`);
+  console.log(`  ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run serve`);
 }
 
 module.exports = printHostingInstructions;
diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js
index 84cc59b7253..5fc0469ae8c 100755
--- a/packages/react-scripts/bin/react-scripts.js
+++ b/packages/react-scripts/bin/react-scripts.js
@@ -27,6 +27,7 @@ const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 switch (script) {
   case 'build':
   case 'eject':
+  case 'serve':
   case 'start':
   case 'test': {
     const result = spawn.sync(
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 7565cecd001..43e7da7014d 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -87,12 +87,18 @@ function getClientEnvironment(publicUrl) {
         PUBLIC_URL: publicUrl,
       }
     );
-  // Stringify all values so we can feed into Webpack DefinePlugin
+  // Stringify all values so we can feed into Webpack DefinePlugin. Fall back
+  // to process.env if it exists, as it will in Node environments.
   const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
+    'process.env':
+      'Object.assign({},typeof process !== "undefined" && process.env,' +
+      JSON.stringify(
+        Object.keys(raw).reduce((env, key) => {
+          env[key] = JSON.stringify(raw[key]);
+          return env;
+        }, {})
+      ) +
+      ')',
   };
 
   return { raw, stringified };
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index e5a3e0b5374..45033e93c0f 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -46,47 +46,65 @@ function getServedPath(appPackageJson) {
   return ensureSlash(servedUrl, true);
 }
 
-const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
-];
+const moduleFileExtensions = ['mjs', 'js', 'ts', 'tsx', 'json', 'jsx'];
+const webModuleFileExtensions = moduleFileExtensions
+  .map(ext => 'web.' + ext)
+  .concat(moduleFileExtensions);
+const nodeModuleFileExtensions = moduleFileExtensions
+  .map(ext => 'node.' + ext)
+  .concat(moduleFileExtensions);
 
 // Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(extension =>
+const resolveModule = (
+  resolveFn,
+  extensions,
+  filePath,
+  defaultExtension = 'js'
+) => {
+  let extension = extensions.find(extension =>
     fs.existsSync(resolveFn(`${filePath}.${extension}`))
   );
-
+  if (!extension && defaultExtension) {
+    extension = defaultExtension;
+  }
   if (extension) {
     return resolveFn(`${filePath}.${extension}`);
   }
-
-  return resolveFn(`${filePath}.js`);
 };
 
+const webIndexJs = resolveModule(
+  resolveApp,
+  webModuleFileExtensions,
+  'src/index'
+);
+const nodeIndexJs = resolveModule(
+  resolveApp,
+  nodeModuleFileExtensions,
+  'src/index',
+  null
+);
+const useNodeEnv = nodeIndexJs !== webIndexJs;
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appNodeBuild: useNodeEnv && resolveApp('build/node'),
+  appWebBuild: useNodeEnv ? resolveApp('build/web') : resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appWebIndexJs: webIndexJs,
+  appNodeIndexJs: useNodeEnv && nodeIndexJs,
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  testsSetup: resolveModule(
+    resolveApp,
+    nodeModuleFileExtensions,
+    'src/setupTests'
+  ),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -100,16 +118,22 @@ const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appNodeBuild: useNodeEnv && resolveApp('build/node'),
+  appWebBuild: useNodeEnv ? resolveApp('build/web') : resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appWebIndexJs: webIndexJs,
+  appNodeIndexJs: useNodeEnv && nodeIndexJs,
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  testsSetup: resolveModule(
+    resolveApp,
+    nodeModuleFileExtensions,
+    'src/setupTests'
+  ),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
@@ -132,19 +156,41 @@ if (
   !reactScriptsLinked &&
   __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
 ) {
+  const webIndexJs = resolveModule(
+    resolveOwn,
+    webModuleFileExtensions,
+    'template/src/index'
+  );
+  const nodeIndexJs = resolveModule(
+    resolveOwn,
+    nodeModuleFileExtensions,
+    'template/src/index',
+    null
+  );
+
+  const useNodeEnv = webIndexJs !== nodeIndexJs;
+
   module.exports = {
     dotenv: resolveOwn('template/.env'),
     appPath: resolveApp('.'),
-    appBuild: resolveOwn('../../build'),
+    appNodeBuild: useNodeEnv && resolveOwn('../../build/node'),
+    appWebBuild: useNodeEnv
+      ? resolveOwn('../../build/web')
+      : resolveOwn('../../build'),
     appPublic: resolveOwn('template/public'),
     appHtml: resolveOwn('template/public/index.html'),
-    appIndexJs: resolveModule(resolveOwn, 'template/src/index'),
+    appWebIndexJs: webIndexJs,
+    appNodeIndexJs: useNodeEnv && nodeIndexJs,
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),
     appJsConfig: resolveOwn('template/jsconfig.json'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
-    testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'),
+    testsSetup: resolveModule(
+      resolveOwn,
+      nodeModuleFileExtensions,
+      'template/src/setupTests'
+    ),
     proxySetup: resolveOwn('template/src/setupProxy.js'),
     appNodeModules: resolveOwn('node_modules'),
     publicUrl: getPublicUrl(resolveOwn('package.json')),
@@ -158,4 +204,5 @@ if (
 }
 // @remove-on-eject-end
 
-module.exports.moduleFileExtensions = moduleFileExtensions;
+module.exports.nodeModuleFileExtensions = nodeModuleFileExtensions;
+module.exports.webModuleFileExtensions = webModuleFileExtensions;
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 8f70442d584..405bfe3a5b5 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -22,6 +22,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const nodeExternals = require('webpack-node-externals');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
@@ -47,6 +48,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// Check if a Node bundle should be output
+const useNodeEnv = !!paths.appNodeBuild;
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -55,9 +59,11 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
+module.exports = function(webpackEnv, executionEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
+  const isEnvNode = useNodeEnv && executionEnv === 'node';
+  const isEnvWeb = executionEnv === 'web';
 
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -81,7 +87,10 @@ module.exports = function(webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvDevelopment &&
+        (isEnvWeb
+          ? require.resolve('style-loader')
+          : require.resolve('null-loader')),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
         options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
@@ -138,41 +147,51 @@ module.exports = function(webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
+    entry: isEnvNode
+      ? paths.appNodeIndexJs
+      : [
+          // Include an alternative client for WebpackDevServer. A client's job is to
+          // connect to WebpackDevServer by a socket and get notified about changes.
+          // When you save a file, the client will either apply hot updates (in case
+          // of CSS changes), or refresh the page (in case of JS changes). When you
+          // make a syntax error, this client will display a syntax error overlay.
+          // Note: instead of the default WebpackDevServer client, we use a custom one
+          // to bring better experience for Create React App users. You can replace
+          // the line below with these two lines if you prefer the stock client:
+          // require.resolve('webpack-dev-server/client') + '?/',
+          // require.resolve('webpack/hot/dev-server'),
+          isEnvDevelopment &&
+            require.resolve('react-dev-utils/webpackHotDevClient'),
+          // Finally, this is your app's code:
+          paths.appWebIndexJs,
+          // We include the app code last so that if there is a runtime error during
+          // initialization, it doesn't blow up the WebpackDevServer client, and
+          // changing JS code would still trigger a refresh.
+        ].filter(Boolean),
+    target: isEnvWeb ? 'web' : 'node',
     output: {
+      libraryTarget: isEnvNode ? 'commonjs2' : undefined,
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      path: isEnvWeb ? paths.appWebBuild : paths.appNodeBuild,
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
+      filename:
+        isEnvProduction && isEnvWeb
+          ? 'static/js/[name].[contenthash:8].js'
+          : isEnvNode
+          ? 'index.js'
+          : 'static/js/bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      chunkFilename:
+        isEnvProduction && isEnvWeb
+          ? 'static/js/[name].[contenthash:8].chunk.js'
+          : isEnvNode
+          ? '[name].chunk.js'
+          : 'static/js/[name].chunk.js',
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
       publicPath: publicPath,
@@ -185,6 +204,14 @@ module.exports = function(webpackEnv) {
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
     },
+    externals: isEnvWeb
+      ? undefined
+      : [
+          // When performing server side rendering, the app should load modules
+          // from node_modules instead of bundling them. This function take care
+          // of making sure that any module in node_modules is treated as external.
+          nodeExternals(),
+        ],
     optimization: {
       minimize: isEnvProduction,
       minimizer: [
@@ -257,9 +284,10 @@ module.exports = function(webpackEnv) {
         chunks: 'all',
         name: false,
       },
-      // Keep the runtime chunk separated to enable long term caching
+      // Keep the runtime chunk separated to enable long term caching,
+      // except for SSR where it isn't supported.
       // https://twitter.com/wSokra/status/969679223278505985
-      runtimeChunk: true,
+      runtimeChunk: isEnvWeb,
     },
     resolve: {
       // This allows you to set a fallback for where Webpack should look for modules.
@@ -275,7 +303,10 @@ module.exports = function(webpackEnv) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: paths.moduleFileExtensions
+      extensions: (isEnvWeb
+        ? paths.webModuleFileExtensions
+        : paths.nodeModuleFileExtensions
+      )
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
@@ -524,31 +555,34 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
+      isEnvWeb &&
+        new HtmlWebpackPlugin(
+          Object.assign(
+            useNodeEnv && {
+              filename: path.join(paths.appNodeBuild, 'index.html'),
+            },
+            {
+              inject: true,
+              template: paths.appHtml,
+            },
+            isEnvProduction
+              ? {
+                  minify: {
+                    removeComments: true,
+                    collapseWhitespace: true,
+                    removeRedundantAttributes: true,
+                    useShortDoctype: true,
+                    removeEmptyAttributes: true,
+                    removeStyleLinkTypeAttributes: true,
+                    keepClosingSlash: true,
+                    minifyJS: true,
+                    minifyCSS: true,
+                    minifyURLs: true,
+                  },
+                }
+              : undefined
+          )
+        ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
       isEnvProduction &&
@@ -561,6 +595,10 @@ module.exports = function(webpackEnv) {
       // in `package.json`, in which case it will be the pathname of that URL.
       // In development, this will be an empty string.
       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // Remove the default %RENDERED_CONTENT% placeholder when not using
+      // server rendering
+      !useNodeEnv &&
+        new InterpolateHtmlPlugin(HtmlWebpackPlugin, { RENDERED_CONTENT: '' }),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
       new ModuleNotFoundPlugin(paths.appPath),
@@ -570,6 +608,14 @@ module.exports = function(webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
+      // HTML_TEMPLATE_PATH env variable is used so that the Node bundle doesn't
+      // need to hard-code the location of the index.html template, and to draw
+      // attention to the fact that index.html is indeed a template.
+      isEnvProduction &&
+        new webpack.DefinePlugin({
+          'process.env.HTML_TEMPLATE_PATH':
+            'require("path").join(__dirname, "index.html")',
+        }),
       // This is necessary to emit hot updates (currently CSS only):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use
@@ -592,20 +638,21 @@ module.exports = function(webpackEnv) {
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without
       // having to parse `index.html`.
-      new ManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-        generate: (seed, files) => {
-          const manifestFiles = files.reduce(function(manifest, file) {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
+      isEnvWeb &&
+        new ManifestPlugin({
+          fileName: 'asset-manifest.json',
+          publicPath: publicPath,
+          generate: (seed, files) => {
+            const manifestFiles = files.reduce(function(manifest, file) {
+              manifest[file.name] = file.path;
+              return manifest;
+            }, seed);
 
-          return {
-            files: manifestFiles,
-          };
-        },
-      }),
+            return {
+              files: manifestFiles,
+            };
+          },
+        }),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how Webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.
@@ -615,6 +662,7 @@ module.exports = function(webpackEnv) {
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the Webpack build.
       isEnvProduction &&
+        isEnvWeb &&
         new WorkboxWebpackPlugin.GenerateSW({
           clientsClaim: true,
           exclude: [/\.map$/, /asset-manifest\.json$/],
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index 60a9713df33..58df23314e0 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -12,14 +12,27 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const devRendererMiddleware = require('react-dev-utils/devRendererMiddleware');
 const paths = require('./paths');
 const fs = require('fs');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
-module.exports = function(proxy, allowedHost) {
-  return {
+// Check if a Node bundle should be output
+const useNodeEnv = !!paths.appNodeBuild;
+
+module.exports = function(proxy, allowedHost, registerSourceMap) {
+  // By default, webpack-dev-server uses the express serve-index middleware
+  // to serve a directory listing when you access the root URL. This behavior
+  // is undesirable when server-rendering, as it makes it impossible to perform
+  // server rendering of the root page with an `after()` middleware.
+  //
+  // Currently, the only way to disable the serve-index middleware is to
+  // re-implement the WDS code that builds a list of features, and pass in a
+  // full list of features that WDS should enable -- minus the
+  // `contentBaseIndex` feature.
+  return mergeDevServerFeatures({
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
     // https://github.com/webpack/webpack-dev-server/issues/887
@@ -83,11 +96,13 @@ module.exports = function(proxy, allowedHost) {
     https: protocol === 'https',
     host,
     overlay: false,
-    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
-    },
+    historyApiFallback: useNodeEnv
+      ? undefined
+      : {
+          // Paths with dots should still use the history fallback.
+          // See https://github.com/facebook/create-react-app/issues/387.
+          disableDotRule: true,
+        },
     public: allowedHost,
     proxy,
     before(app, server) {
@@ -108,5 +123,52 @@ module.exports = function(proxy, allowedHost) {
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware());
     },
-  };
+    // Adds `fs` and `webpackStats` objects to the response, which can be
+    // accessed within `after()` middleware. This allows us to provide a
+    // middleware that renders each requested page using the app using the
+    // app's server renderer, even in development mode.
+    serverSideRender: true,
+    // When an index.node.js is provided, instead of serving the index.html
+    // using webpack-dev-server, serve it using the devRendererMiddleware.
+    staticOptions: {
+      index: false,
+    },
+    after(app) {
+      // Render each requested page using the middleware exported by the
+      // application.
+      if (useNodeEnv) {
+        app.use(devRendererMiddleware(paths.appNodeBuild, registerSourceMap));
+      }
+    },
+    // This can be disabled to write files to the disk, which is helpful for
+    // debugging issues with server-rendering code.
+    writeToDisk: false,
+  });
 };
+
+// Currently, the only way to disable the serve-index middleware is to
+// re-implement the WDS code that builds a list of features, and pass in a
+// full list of features that WDS should enable -- minus the
+// `contentBaseIndex` feature. This should be fixed when #1752 is merged into
+// webpack-dev-server: https://github.com/webpack/webpack-dev-server/pull/1752
+function mergeDevServerFeatures(options) {
+  let features = ['setup', 'before', 'headers', 'middleware'];
+  if (options.proxy) {
+    features.push('proxy', 'middleware');
+  }
+  features.push('contentBaseFiles');
+  if (options.watchContentBase) {
+    features.push('watchContentBase');
+  }
+  features.push('magicHtml');
+  if (options.compress) {
+    features.unshift('compress');
+  }
+  if (options.after) {
+    features.push('after');
+  }
+  return {
+    ...options,
+    features,
+  };
+}
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index df52dd55058..ab89fdbf032 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -20,7 +20,9 @@
     "lib",
     "scripts",
     "template",
+    "template-ssr",
     "template-typescript",
+    "template-typescript-ssr",
     "utils"
   ],
   "bin": {
@@ -50,6 +52,7 @@
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
+    "express": "4.16.4",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",
@@ -60,6 +63,7 @@
     "jest-resolve": "24.7.1",
     "jest-watch-typeahead": "0.3.0",
     "mini-css-extract-plugin": "0.5.0",
+    "null-loader": "0.1.1",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -72,6 +76,7 @@
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
+    "source-map-support": "0.5.11",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.3",
     "ts-pnp": "1.1.2",
@@ -79,6 +84,7 @@
     "webpack": "4.29.6",
     "webpack-dev-server": "3.2.1",
     "webpack-manifest-plugin": "2.0.4",
+    "webpack-node-externals": "1.7.2",
     "workbox-webpack-plugin": "4.2.0"
   },
   "devDependencies": {
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index edbc6d11557..9d0f519f024 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -55,12 +55,13 @@ const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([paths.appHtml, paths.appWebIndexJs])) {
   process.exit(1);
 }
 
 // Generate configuration
-const config = configFactory('production');
+const webConfig = configFactory('production', 'web');
+const nodeConfig = configFactory('production', 'node');
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
@@ -69,12 +70,15 @@ checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // First, read the current file sizes in build directory.
     // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
+    return measureFileSizesBeforeBuild(paths.appWebBuild);
   })
   .then(previousFileSizes => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
+    fs.emptyDirSync(paths.appWebBuild);
+    if (paths.appNodeBuild) {
+      fs.emptyDirSync(paths.appNodeBuild);
+    }
     // Merge with the public folder
     copyPublicFolder();
     // Start the webpack build
@@ -101,9 +105,9 @@ checkBrowsers(paths.appPath, isInteractive)
 
       console.log('File sizes after gzip:\n');
       printFileSizesAfterBuild(
-        stats,
+        stats.stats[0],
         previousFileSizes,
-        paths.appBuild,
+        paths.appWebBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
         WARN_AFTER_CHUNK_GZIP_SIZE
       );
@@ -111,13 +115,13 @@ checkBrowsers(paths.appPath, isInteractive)
 
       const appPackage = require(paths.appPackageJson);
       const publicUrl = paths.publicUrl;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      const publicPath = webConfig.output.publicPath;
+      const webBuildFolder = path.relative(process.cwd(), paths.appWebBuild);
       printHostingInstructions(
         appPackage,
         publicUrl,
         publicPath,
-        buildFolder,
+        webBuildFolder,
         useYarn
       );
     },
@@ -150,7 +154,9 @@ function build(previousFileSizes) {
 
   console.log('Creating an optimized production build...');
 
-  const compiler = webpack(config);
+  const compiler = webpack(
+    [webConfig].concat(paths.appNodeIndexJs ? [nodeConfig] : [])
+  );
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
       let messages;
@@ -200,7 +206,7 @@ function build(previousFileSizes) {
 }
 
 function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
+  fs.copySync(paths.appPublic, paths.appWebBuild, {
     dereference: true,
     filter: file => file !== paths.appHtml,
   });
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 9b473ab3d95..88808c8ab29 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -80,7 +80,8 @@ module.exports = function(
   appName,
   verbose,
   originalDirectory,
-  template
+  template,
+  useSsr
 ) {
   const ownPath = path.dirname(
     require.resolve(path.join(__dirname, '..', 'package.json'))
@@ -97,6 +98,7 @@ module.exports = function(
   appPackage.scripts = {
     start: 'react-scripts start',
     build: 'react-scripts build',
+    serve: 'react-scripts serve',
     test: 'react-scripts test',
     eject: 'react-scripts eject',
   };
@@ -135,6 +137,12 @@ module.exports = function(
     return;
   }
 
+  // If using SSR, add SSR-specific template files
+  let ssrTemplatePath = templatePath + '-ssr';
+  if (useSsr && fs.existsSync(ssrTemplatePath)) {
+    fs.copySync(ssrTemplatePath, appPath);
+  }
+
   // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
   // See: https://github.com/npm/npm/issues/1862
   try {
diff --git a/packages/react-scripts/scripts/serve.js b/packages/react-scripts/scripts/serve.js
new file mode 100644
index 00000000000..949e87285a8
--- /dev/null
+++ b/packages/react-scripts/scripts/serve.js
@@ -0,0 +1,110 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const chalk = require('chalk');
+const path = require('path');
+const express = require('express');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const clearConsole = require('react-dev-utils/clearConsole');
+const openBrowser = require('react-dev-utils/openBrowser');
+const {
+  choosePort,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const paths = require('../config/paths');
+
+const useNodeBuild = paths.appNodeBuild;
+
+const app =
+  useNodeBuild && require(path.join(paths.appNodeBuild, 'index.js')).default;
+
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+const isInteractive = process.stdout.isTTY;
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explictly set browsers and do not fall back to
+// browserslist defaults.
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const urls = prepareUrls(protocol, HOST, port);
+    const proxySetting = require(paths.appPackageJson).proxy;
+
+    // TODO: use proxy if it exists.
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+
+    const server = express();
+
+    server.use(
+      express.static(paths.appWebBuild, {
+        index: useNodeBuild ? false : 'index.html',
+      })
+    );
+
+    if (useNodeBuild) {
+      server.use(async (request, response, next) => {
+        try {
+          await app(request, response, next);
+        } catch (error) {
+          next(error);
+        }
+      });
+    }
+
+    server.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+      console.log(chalk.cyan(`Server listening on port ${port}...\n`));
+      openBrowser(urls.localUrlForBrowser);
+    });
+  });
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index d4726f5f67e..e18029a9837 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -52,7 +52,7 @@ const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+if (!checkRequiredFiles([paths.appHtml, paths.appWebIndexJs])) {
   process.exit(1);
 }
 
@@ -77,6 +77,22 @@ if (process.env.HOST) {
   console.log();
 }
 
+// Add source map support for node stack traces.
+const sourceMaps = {};
+function registerSourceMap(filename, map) {
+  sourceMaps[filename] = map;
+}
+require('source-map-support').install({
+  retrieveSourceMap: filename => {
+    let map = sourceMaps[filename + '.map'];
+    return (
+      map && {
+        map: JSON.parse(map),
+      }
+    );
+  },
+});
+
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
 const { checkBrowsers } = require('react-dev-utils/browsersHelper');
@@ -91,7 +107,8 @@ checkBrowsers(paths.appPath, isInteractive)
       // We have not found a port.
       return;
     }
-    const config = configFactory('development');
+    const webConfig = configFactory('development', 'web');
+    const nodeConfig = configFactory('development', 'node');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -105,7 +122,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
-      config,
+      config: [webConfig].concat(paths.appNodeIndexJs ? [nodeConfig] : []),
       devSocket,
       urls,
       useYarn,
@@ -118,7 +135,8 @@ checkBrowsers(paths.appPath, isInteractive)
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
-      urls.lanUrlForConfig
+      urls.lanUrlForConfig,
+      registerSourceMap
     );
     const devServer = new WebpackDevServer(compiler, serverConfig);
     // Launch WebpackDevServer.
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 8d37500d1ab..8cc1520b209 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -55,7 +55,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
       '^react-native$': 'react-native-web',
       '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
     },
-    moduleFileExtensions: [...paths.moduleFileExtensions, 'node'].filter(
+    moduleFileExtensions: [...paths.nodeModuleFileExtensions, 'node'].filter(
       ext => !ext.includes('mjs')
     ),
     watchPlugins: [
diff --git a/packages/react-scripts/template-ssr/src/index.js b/packages/react-scripts/template-ssr/src/index.js
new file mode 100644
index 00000000000..129324e88e2
--- /dev/null
+++ b/packages/react-scripts/template-ssr/src/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.hydrate(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/packages/react-scripts/template-ssr/src/index.node.js b/packages/react-scripts/template-ssr/src/index.node.js
new file mode 100644
index 00000000000..0234ebf009a
--- /dev/null
+++ b/packages/react-scripts/template-ssr/src/index.node.js
@@ -0,0 +1,24 @@
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import './index.css';
+import App from './App';
+
+const renderer = async (request, response) => {
+  // The index.html file is a template, which will have environment variables
+  // and bundled scripts and stylesheets injected during the build step, and
+  // placed at the location specified by `process.env.HTML_TEMPLATE_PATH`.
+  //
+  // To customize the rendered HTML, you can add other placeholder strings,
+  // and replace them within this function -- just as %RENDERED_CONTENT% is
+  // replaced. Note however that if you name the placeholder after an
+  // environment variable available at build time, then it will be
+  // automatically replaced by the build script.
+  let template = fs.readFileSync(process.env.HTML_TEMPLATE_PATH, 'utf8');
+  let [header, footer] = template.split('%RENDERED_CONTENT%');
+  let body = renderToString(<App />);
+  let html = header + body + footer;
+  response.send(html);
+};
+
+export default renderer;
diff --git a/packages/react-scripts/template-typescript-ssr/src/index.node.tsx b/packages/react-scripts/template-typescript-ssr/src/index.node.tsx
new file mode 100644
index 00000000000..8cf793e9db5
--- /dev/null
+++ b/packages/react-scripts/template-typescript-ssr/src/index.node.tsx
@@ -0,0 +1,24 @@
+import fs from 'fs';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import './index.css';
+import App from './App';
+
+const renderer = async (request: any, response: any) => {
+  // The index.html file is a template, which will have environment variables
+  // and bundled scripts and stylesheets injected during the build step, and
+  // placed at the location specified by `process.env.HTML_TEMPLATE_PATH`.
+  //
+  // To customize the rendered HTML, you can add other placeholder strings,
+  // and replace them within this function -- just as %RENDERED_CONTENT% is
+  // replaced. Note however that if you name the placeholder after an
+  // environment variable available at build time, then it will be
+  // automatically replaced by the build script.
+  let template = fs.readFileSync(process.env.HTML_TEMPLATE_PATH!, 'utf8');
+  let [header, footer] = template.split('%RENDERED_CONTENT%');
+  let body = renderToString(<App />);
+  let html = header + body + footer;
+  response.send(html);
+};
+
+export default renderer;
diff --git a/packages/react-scripts/template-typescript-ssr/src/index.tsx b/packages/react-scripts/template-typescript-ssr/src/index.tsx
new file mode 100644
index 00000000000..129324e88e2
--- /dev/null
+++ b/packages/react-scripts/template-typescript-ssr/src/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.hydrate(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/packages/react-scripts/template-typescript/public/index.html b/packages/react-scripts/template-typescript/public/index.html
index dd1ccfd4cd3..1dc033131b9 100644
--- a/packages/react-scripts/template-typescript/public/index.html
+++ b/packages/react-scripts/template-typescript/public/index.html
@@ -23,7 +23,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">%RENDERED_CONTENT%</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html
index dd1ccfd4cd3..1dc033131b9 100644
--- a/packages/react-scripts/template/public/index.html
+++ b/packages/react-scripts/template/public/index.html
@@ -23,7 +23,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">%RENDERED_CONTENT%</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

From b25364e73df15ff32927cae939a6e185aa681647 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 4 Apr 2019 11:50:11 +0900
Subject: [PATCH 02/12] fix lint warnings

---
 packages/react-dev-utils/devRendererMiddleware.js    | 6 ++----
 packages/react-dev-utils/printHostingInstructions.js | 2 --
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-dev-utils/devRendererMiddleware.js b/packages/react-dev-utils/devRendererMiddleware.js
index b3ff9b59267..1276eb2ac48 100644
--- a/packages/react-dev-utils/devRendererMiddleware.js
+++ b/packages/react-dev-utils/devRendererMiddleware.js
@@ -51,14 +51,12 @@ module.exports = function devRendererMiddleware(
     };
 
     try {
-      let {
-        children: [web, node],
-      } = webpackStats.toJson({
+      let stats = webpackStats.toJson({
         all: false,
         assets: true,
         entrypoints: true,
       });
-
+      let node = stats.children[1];
       let nodeEntrypoints = node.entrypoints.main.assets
         .filter(asset => /\.js$/.test(asset))
         .map(asset => path.join(nodeBuildPath, asset));
diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js
index 1fbe1cc162f..675f470d287 100644
--- a/packages/react-dev-utils/printHostingInstructions.js
+++ b/packages/react-dev-utils/printHostingInstructions.js
@@ -9,8 +9,6 @@
 
 const chalk = require('chalk');
 const url = require('url');
-const globalModules = require('global-modules');
-const fs = require('fs');
 
 function printHostingInstructions(
   appPackage,

From 9e7146d00f44f8c8e58ff9f49e1da9d36d5039b9 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 4 Apr 2019 12:44:59 +0900
Subject: [PATCH 03/12] fix lint errors

---
 .eslintignore                           | 1 +
 packages/react-scripts/scripts/serve.js | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 27c694cea55..a8e513abe82 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,5 +2,6 @@ node_modules/
 build
 my-app*
 packages/react-scripts/template
+packages/react-scripts/template-ssr
 packages/react-scripts/fixtures
 fixtures/
diff --git a/packages/react-scripts/scripts/serve.js b/packages/react-scripts/scripts/serve.js
index 949e87285a8..63953a70f87 100644
--- a/packages/react-scripts/scripts/serve.js
+++ b/packages/react-scripts/scripts/serve.js
@@ -27,7 +27,7 @@ const clearConsole = require('react-dev-utils/clearConsole');
 const openBrowser = require('react-dev-utils/openBrowser');
 const {
   choosePort,
-  prepareProxy,
+  // prepareProxy,
   prepareUrls,
 } = require('react-dev-utils/WebpackDevServerUtils');
 const paths = require('../config/paths');
@@ -74,10 +74,10 @@ checkBrowsers(paths.appPath, isInteractive)
     }
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const urls = prepareUrls(protocol, HOST, port);
-    const proxySetting = require(paths.appPackageJson).proxy;
 
     // TODO: use proxy if it exists.
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // const proxySetting = require(paths.appPackageJson).proxy;
+    // const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 
     const server = express();
 

From c7cf7d189d29f11eaf3df1fc26429b8621c3ad14 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 4 Apr 2019 18:46:46 +0900
Subject: [PATCH 04/12] add a main field to package.json when SSR is enabled

---
 packages/react-scripts/scripts/init.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 88808c8ab29..4eba3684417 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -94,6 +94,11 @@ module.exports = function(
 
   const useTypeScript = appPackage.dependencies['typescript'] != null;
 
+  // For SSR apps, add a "main" field pointing to the Node entry point
+  if (useSsr) {
+    appPackage.main = 'build/node/index.js';
+  }
+
   // Setup the script rules
   appPackage.scripts = {
     start: 'react-scripts start',

From 09c607cfc4b01ae3b4d44158a60807ed61b4f77a Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Fri, 5 Apr 2019 13:26:32 +0900
Subject: [PATCH 05/12] fix smoke test

---
 packages/react-dev-utils/WebpackDevServerUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index 4c654a67646..ca533e0625c 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -256,7 +256,7 @@ function createCompiler({
     arg => arg.indexOf('--smoke-test') > -1
   );
   if (isSmokeTest) {
-    compiler.hooks.failed.tap('smokeTest', async () => {
+    compiler.compilers[0].hooks.failed.tap('smokeTest', async () => {
       await tsMessagesPromise;
       process.exit(1);
     });

From 62b893484227d5001fa39ea44bccb4cb59bd5da2 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Fri, 5 Apr 2019 17:01:02 +0900
Subject: [PATCH 06/12] fix env bug

---
 packages/react-scripts/config/env.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 43e7da7014d..3ec60795e4c 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -94,7 +94,7 @@ function getClientEnvironment(publicUrl) {
       'Object.assign({},typeof process !== "undefined" && process.env,' +
       JSON.stringify(
         Object.keys(raw).reduce((env, key) => {
-          env[key] = JSON.stringify(raw[key]);
+          env[key] = raw[key];
           return env;
         }, {})
       ) +

From c0803a4d9c8260c30dc23b59c087a623dd7d26af Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Wed, 12 Jun 2019 17:15:09 +0900
Subject: [PATCH 07/12] remove concat

---
 packages/react-scripts/scripts/build.js | 2 +-
 packages/react-scripts/scripts/start.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index 9d0f519f024..d0fc155083f 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -155,7 +155,7 @@ function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
 
   const compiler = webpack(
-    [webConfig].concat(paths.appNodeIndexJs ? [nodeConfig] : [])
+    paths.appNodeIndexJs ? [webConfig, nodeConfig] : [webConfig]
   );
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index e18029a9837..ae71f51794a 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -122,7 +122,7 @@ checkBrowsers(paths.appPath, isInteractive)
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
-      config: [webConfig].concat(paths.appNodeIndexJs ? [nodeConfig] : []),
+      config: paths.appNodeIndexJs ? [webConfig, nodeConfig] : [webConfig],
       devSocket,
       urls,
       useYarn,

From 6be3c6c1ed8de9696e3d77d69bba5527536b181d Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 13 Jun 2019 13:53:29 +0900
Subject: [PATCH 08/12] add node option to babel-preset-react-app

---
 packages/babel-preset-react-app/create.js     | 36 +++++++++++++-----
 .../babel-preset-react-app/dependencies.js    | 37 ++++++++++++++-----
 .../react-scripts/config/webpack.config.js    |  9 ++++-
 3 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js
index 7b7f1da6ed1..ee4c99917d0 100644
--- a/packages/babel-preset-react-app/create.js
+++ b/packages/babel-preset-react-app/create.js
@@ -29,10 +29,12 @@ module.exports = function(api, opts, env) {
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
 
+  var isTargettingNode = validateBoolOption('node', opts.node, false);
+
   var useESModules = validateBoolOption(
     'useESModules',
     opts.useESModules,
-    isEnvDevelopment || isEnvProduction
+    !isTargettingNode && (isEnvDevelopment || isEnvProduction)
   );
   var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
   var isTypeScriptEnabled = validateBoolOption(
@@ -75,21 +77,35 @@ module.exports = function(api, opts, env) {
           },
         },
       ],
-      (isEnvProduction || isEnvDevelopment) && [
+      isTargettingNode && [
         // Latest stable ECMAScript features
         require('@babel/preset-env').default,
         {
-          // Allow importing core-js in entrypoint and use browserlist to select polyfills
-          useBuiltIns: 'entry',
-          // Set the corejs version we are using to avoid warnings in console
-          // This will need to change once we upgrade to corejs@3
-          corejs: 3,
+          targets: {
+            node: 6,
+          },
           // Do not transform modules to CJS
-          modules: false,
+          modules: 'cjs',
           // Exclude transforms that make all code slower
           exclude: ['transform-typeof-symbol'],
         },
       ],
+      !isTargettingNode &&
+        (isEnvProduction || isEnvDevelopment) && [
+          // Latest stable ECMAScript features
+          require('@babel/preset-env').default,
+          {
+            // Allow importing core-js in entrypoint and use browserlist to select polyfills
+            useBuiltIns: 'entry',
+            // Set the corejs version we are using to avoid warnings in console
+            // This will need to change once we upgrade to corejs@3
+            corejs: 3,
+            // Do not transform modules to CJS
+            modules: false,
+            // Exclude transforms that make all code slower
+            exclude: ['transform-typeof-symbol'],
+          },
+        ],
       [
         require('@babel/preset-react').default,
         {
@@ -170,7 +186,7 @@ module.exports = function(api, opts, env) {
         {
           corejs: false,
           helpers: areHelpersEnabled,
-          regenerator: true,
+          regenerator: !isTargettingNode,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS
           // supports ES Modules.
@@ -190,7 +206,7 @@ module.exports = function(api, opts, env) {
       ],
       // Adds syntax support for import()
       require('@babel/plugin-syntax-dynamic-import').default,
-      isEnvTest &&
+      (isTargettingNode || isEnvTest) &&
         // Transform dynamic import to require
         require('babel-plugin-dynamic-import-node'),
     ].filter(Boolean),
diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js
index 86902d36bee..c1d1003dd05 100644
--- a/packages/babel-preset-react-app/dependencies.js
+++ b/packages/babel-preset-react-app/dependencies.js
@@ -36,6 +36,8 @@ module.exports = function(api, opts) {
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
 
+  var isTargettingNode = validateBoolOption('node', opts.node, false);
+
   var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false);
   var useAbsoluteRuntime = validateBoolOption(
     'absoluteRuntime',
@@ -80,21 +82,35 @@ module.exports = function(api, opts) {
           exclude: ['transform-typeof-symbol'],
         },
       ],
-      (isEnvProduction || isEnvDevelopment) && [
+      isTargettingNode && [
         // Latest stable ECMAScript features
         require('@babel/preset-env').default,
         {
-          // Allow importing core-js in entrypoint and use browserlist to select polyfills
-          useBuiltIns: 'entry',
-          // Set the corejs version we are using to avoid warnings in console
-          // This will need to change once we upgrade to corejs@3
-          corejs: 3,
+          targets: {
+            node: 6,
+          },
           // Do not transform modules to CJS
-          modules: false,
+          modules: 'cjs',
           // Exclude transforms that make all code slower
           exclude: ['transform-typeof-symbol'],
         },
       ],
+      !isTargettingNode &&
+        (isEnvProduction || isEnvDevelopment) && [
+          // Latest stable ECMAScript features
+          require('@babel/preset-env').default,
+          {
+            // Allow importing core-js in entrypoint and use browserlist to select polyfills
+            useBuiltIns: 'entry',
+            // Set the corejs version we are using to avoid warnings in console
+            // This will need to change once we upgrade to corejs@3
+            corejs: 3,
+            // Do not transform modules to CJS
+            modules: false,
+            // Exclude transforms that make all code slower
+            exclude: ['transform-typeof-symbol'],
+          },
+        ],
     ].filter(Boolean),
     plugins: [
       // Necessary to include regardless of the environment because
@@ -127,11 +143,12 @@ module.exports = function(api, opts) {
         {
           corejs: false,
           helpers: areHelpersEnabled,
-          regenerator: true,
+          regenerator: !isTargettingNode,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS
           // supports ES Modules.
-          useESModules: isEnvDevelopment || isEnvProduction,
+          useESModules:
+            !isTargettingNode && (isEnvDevelopment || isEnvProduction),
           // Undocumented option that lets us encapsulate our runtime, ensuring
           // the correct version is used
           // https://github.com/babel/babel/blob/090c364a90fe73d36a30707fc612ce037bdbbb24/packages/babel-plugin-transform-runtime/src/index.js#L35-L42
@@ -140,7 +157,7 @@ module.exports = function(api, opts) {
       ],
       // Adds syntax support for import()
       require('@babel/plugin-syntax-dynamic-import').default,
-      isEnvTest &&
+      (isTargettingNode || isEnvTest) &&
         // Transform dynamic import to require
         require('babel-plugin-transform-dynamic-import').default,
     ].filter(Boolean),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 405bfe3a5b5..5fd00cef1d8 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -391,7 +391,12 @@ module.exports = function(webpackEnv, executionEnv) {
                 // @remove-on-eject-begin
                 babelrc: false,
                 configFile: false,
-                presets: [require.resolve('babel-preset-react-app')],
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app'),
+                    { node: isEnvNode },
+                  ],
+                ],
                 // Make sure we have a unique cache identifier, erring on the
                 // side of caution.
                 // We remove this when the user ejects because the default
@@ -442,7 +447,7 @@ module.exports = function(webpackEnv, executionEnv) {
                 presets: [
                   [
                     require.resolve('babel-preset-react-app/dependencies'),
-                    { helpers: true },
+                    { helpers: true, node: isEnvNode },
                   ],
                 ],
                 cacheDirectory: true,

From 482ff1b53909ed2a0f1d2091d34d491942a305cb Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 13 Jun 2019 14:01:51 +0900
Subject: [PATCH 09/12] rename ssr to universal

---
 .eslintignore                                      |  2 +-
 packages/create-react-app/createReactApp.js        | 12 ++++++------
 packages/react-scripts/package.json                |  4 ++--
 packages/react-scripts/scripts/init.js             | 14 +++++++-------
 .../src/index.node.tsx                             |  0
 .../src/index.tsx                                  |  0
 .../src/index.js                                   |  0
 .../src/index.node.js                              |  0
 8 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/react-scripts/{template-typescript-ssr => template-typescript-universal}/src/index.node.tsx (100%)
 rename packages/react-scripts/{template-typescript-ssr => template-typescript-universal}/src/index.tsx (100%)
 rename packages/react-scripts/{template-ssr => template-universal}/src/index.js (100%)
 rename packages/react-scripts/{template-ssr => template-universal}/src/index.node.js (100%)

diff --git a/.eslintignore b/.eslintignore
index a8e513abe82..531e70634f8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,6 +2,6 @@ node_modules/
 build
 my-app*
 packages/react-scripts/template
-packages/react-scripts/template-ssr
+packages/react-scripts/template-universal
 packages/react-scripts/fixtures
 fixtures/
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index 67a8c612c6f..138a4471bd7 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -79,7 +79,7 @@ const program = new commander.Command(packageJson.name)
   .option('--use-npm')
   .option('--use-pnp')
   .option('--typescript')
-  .option('--ssr')
+  .option('--universal')
   .allowUnknownOption()
   .on('--help', () => {
     console.log(`    Only ${chalk.green('<project-directory>')} is required.`);
@@ -182,7 +182,7 @@ createApp(
   program.useNpm,
   program.usePnp,
   program.typescript,
-  program.ssr,
+  program.universal,
   hiddenProgram.internalTestingTemplate
 );
 
@@ -193,7 +193,7 @@ function createApp(
   useNpm,
   usePnp,
   useTypescript,
-  useSsr,
+  useUniversal,
   template
 ) {
   const root = path.resolve(name);
@@ -300,7 +300,7 @@ function createApp(
     useYarn,
     usePnp,
     useTypescript,
-    useSsr
+    useUniversal
   );
 }
 
@@ -385,7 +385,7 @@ function run(
   useYarn,
   usePnp,
   useTypescript,
-  useSsr
+  universal
 ) {
   getInstallPackage(version, originalDirectory).then(packageToInstall => {
     const allDependencies = ['react', 'react-dom', packageToInstall];
@@ -441,7 +441,7 @@ function run(
             cwd: process.cwd(),
             args: nodeArgs,
           },
-          [root, appName, verbose, originalDirectory, template, useSsr],
+          [root, appName, verbose, originalDirectory, template, universal],
           `
         var init = require('${packageName}/scripts/init.js');
         init.apply(null, JSON.parse(process.argv[1]));
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index ab89fdbf032..b686083085d 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -20,9 +20,9 @@
     "lib",
     "scripts",
     "template",
-    "template-ssr",
+    "template-universal",
     "template-typescript",
-    "template-typescript-ssr",
+    "template-typescript-universal",
     "utils"
   ],
   "bin": {
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 4eba3684417..33d258f9222 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -81,7 +81,7 @@ module.exports = function(
   verbose,
   originalDirectory,
   template,
-  useSsr
+  universal
 ) {
   const ownPath = path.dirname(
     require.resolve(path.join(__dirname, '..', 'package.json'))
@@ -94,8 +94,8 @@ module.exports = function(
 
   const useTypeScript = appPackage.dependencies['typescript'] != null;
 
-  // For SSR apps, add a "main" field pointing to the Node entry point
-  if (useSsr) {
+  // For Universal apps, add a "main" field pointing to the Node entry point
+  if (universal) {
     appPackage.main = 'build/node/index.js';
   }
 
@@ -142,10 +142,10 @@ module.exports = function(
     return;
   }
 
-  // If using SSR, add SSR-specific template files
-  let ssrTemplatePath = templatePath + '-ssr';
-  if (useSsr && fs.existsSync(ssrTemplatePath)) {
-    fs.copySync(ssrTemplatePath, appPath);
+  // If creating a universal app, add universal-specific template files
+  let universalTemplatePath = templatePath + '-universal';
+  if (universal && fs.existsSync(universalTemplatePath)) {
+    fs.copySync(universalTemplatePath, appPath);
   }
 
   // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
diff --git a/packages/react-scripts/template-typescript-ssr/src/index.node.tsx b/packages/react-scripts/template-typescript-universal/src/index.node.tsx
similarity index 100%
rename from packages/react-scripts/template-typescript-ssr/src/index.node.tsx
rename to packages/react-scripts/template-typescript-universal/src/index.node.tsx
diff --git a/packages/react-scripts/template-typescript-ssr/src/index.tsx b/packages/react-scripts/template-typescript-universal/src/index.tsx
similarity index 100%
rename from packages/react-scripts/template-typescript-ssr/src/index.tsx
rename to packages/react-scripts/template-typescript-universal/src/index.tsx
diff --git a/packages/react-scripts/template-ssr/src/index.js b/packages/react-scripts/template-universal/src/index.js
similarity index 100%
rename from packages/react-scripts/template-ssr/src/index.js
rename to packages/react-scripts/template-universal/src/index.js
diff --git a/packages/react-scripts/template-ssr/src/index.node.js b/packages/react-scripts/template-universal/src/index.node.js
similarity index 100%
rename from packages/react-scripts/template-ssr/src/index.node.js
rename to packages/react-scripts/template-universal/src/index.node.js

From 5e14d2ed4d412e77429dac031bf03450aa37c4fa Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Thu, 13 Jun 2019 14:10:41 +0900
Subject: [PATCH 10/12] use correct babel plugin for trnasforming dynamic
 import

---
 packages/babel-preset-react-app/dependencies.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js
index c1d1003dd05..9273296c671 100644
--- a/packages/babel-preset-react-app/dependencies.js
+++ b/packages/babel-preset-react-app/dependencies.js
@@ -159,7 +159,7 @@ module.exports = function(api, opts) {
       require('@babel/plugin-syntax-dynamic-import').default,
       (isTargettingNode || isEnvTest) &&
         // Transform dynamic import to require
-        require('babel-plugin-transform-dynamic-import').default,
+        require('babel-plugin-dynamic-import-node'),
     ].filter(Boolean),
   };
 };

From 124667789f7fd1a90008b42930c6b97f04ec9252 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Tue, 18 Jun 2019 18:49:04 +0900
Subject: [PATCH 11/12] only produce a single initial chunk in node env

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5fd00cef1d8..2e2dd31025f 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -281,7 +281,7 @@ module.exports = function(webpackEnv, executionEnv) {
       // https://twitter.com/wSokra/status/969633336732905474
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
       splitChunks: {
-        chunks: 'all',
+        chunks: isEnvNode ? 'async' : 'all',
         name: false,
       },
       // Keep the runtime chunk separated to enable long term caching,

From ceb183c585e0fb1ec3c6a9a54d979af938653ae7 Mon Sep 17 00:00:00 2001
From: James K Nelson <james@jamesknelson.com>
Date: Sun, 18 Aug 2019 10:23:42 +0900
Subject: [PATCH 12/12] Update README.md

Co-Authored-By: Federico Zivolo <federico.zivolo@gmail.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9fc198cf9d1..cfc7443636f 100644
--- a/README.md
+++ b/README.md
@@ -154,7 +154,7 @@ Your environment will have everything you need to build a modern single-page Rea
 - A live development server that warns about common mistakes.
 - A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
 - An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_)
-- Ability to build a Node.js version of the app, which can be used for implementind Server Rendering.
+- Ability to build a Node.js version of the app, which can be used for implementing Server Rendering.
 - Hassle-free updates for the above tools with a single dependency.
 
 Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.