From 493e5a699631d5f4daa4aaa70a82dd00a1cae9b4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 May 2017 23:35:14 +0100
Subject: [PATCH 01/12] Tweak lint rules (#2186)

---
 packages/eslint-config-react-app/index.js   |  2 ++
 packages/react-dev-utils/eslintFormatter.js | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js
index 9d876042c85..42aa9db2cb0 100644
--- a/packages/eslint-config-react-app/index.js
+++ b/packages/eslint-config-react-app/index.js
@@ -235,6 +235,8 @@ module.exports = {
     ],
 
     // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
+    'import/first': 'error',
+    'import/no-amd': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js
index a051b9c5b0e..674f2f06dec 100644
--- a/packages/react-dev-utils/eslintFormatter.js
+++ b/packages/react-dev-utils/eslintFormatter.js
@@ -12,6 +12,7 @@ function isError(message) {
 
 function formatter(results) {
   let output = '\n';
+  let hasErrors = false;
 
   results.forEach(result => {
     let messages = result.messages;
@@ -19,7 +20,6 @@ function formatter(results) {
       return;
     }
 
-    let hasErrors = false;
     messages = messages.map(message => {
       let messageType;
       if (isError(message)) {
@@ -61,6 +61,19 @@ function formatter(results) {
     output += `${outputTable}\n\n`;
   });
 
+  if (hasErrors) {
+    // Unlike with warnings, we have to do it here.
+    // We have similar code in react-scripts for warnings,
+    // but warnings can appear in multiple files so we only
+    // print it once at the end. For errors, however, we print
+    // it here because we always show at most one error, and
+    // we can only be sure it's an ESLint error before exiting
+    // this function.
+    output += 'Search for the ' +
+      chalk.underline(chalk.red('rule keywords')) +
+      ' to learn more about each error.';
+  }
+
   return output;
 }
 

From 65ff5481d9cfe55b042c4b645403cb2d810766a2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 May 2017 23:59:48 +0100
Subject: [PATCH 02/12] Ignore Moment.js locales by default (#2187)

* Ignore Moment.js locales by default

* Update README.md
---
 .../config/webpack.config.dev.js              |  6 +++++
 .../config/webpack.config.prod.js             |  6 +++++
 packages/react-scripts/template/README.md     | 27 +++++++++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 98e57ea9e5b..f90ca6bd09e 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -252,6 +252,12 @@ module.exports = {
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+    // 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.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 7615894a755..182105c756a 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -286,6 +286,12 @@ module.exports = {
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
     }),
+    // 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.
+    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+    // You can remove this if you don't use Moment.js:
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index c178e573816..b25f723c97b 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -81,6 +81,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
   - [`npm run build` silently fails](#npm-run-build-silently-fails)
   - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
+  - [Moment.js locales are missing](#momentjs-locales-are-missing)
 - [Something Missing?](#something-missing)
 
 ## Updating to New Releases
@@ -1616,6 +1617,32 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
 This may be a problem with case sensitive filenames.
 Please refer to [this section](#resolving-heroku-deployment-errors).
 
+### Moment.js locales are missing
+
+If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support).
+
+To add a specific Moment.js locale to your bundle, you need to import it explicitly.<br>
+For example:
+
+```js
+import moment from 'moment';
+import 'moment/locale/fr';
+```
+
+If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name:
+
+```js
+import moment from 'moment';
+import 'moment/locale/fr';
+import 'moment/locale/es';
+
+// ...
+
+moment.locale('fr');
+```
+
+This will only work for locales that have been explicitly imported before.
+
 ## Something Missing?
 
 If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)

From e1f22b592f73e7ceb41b5b08842c8c66f5664fd9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 May 2017 11:47:39 +0100
Subject: [PATCH 03/12] Disable Yarn on CI temporarily

---
 .travis.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 99edd919888..2c60bc2674b 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -24,5 +24,7 @@ matrix:
   include:
     - node_js: 0.10
       env: TEST_SUITE=simple
-    - node_js: 6
-      env: USE_YARN=yes TEST_SUITE=simple
+# There's a weird Yarn/Lerna bug related to prerelease versions.
+# TODO: reenable after we ship 1.0.
+#    - node_js: 6
+#      env: USE_YARN=yes TEST_SUITE=simple

From a61be9c619c46d07c5f0b191286a818cc3dd1090 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Wed, 17 May 2017 06:19:52 -0500
Subject: [PATCH 04/12] Add module scope plugin (#2189)

* Add module scope plugin

* Oops

* Add comments

* Check windows seps too

* More descriptive error

* Document it
---
 packages/react-dev-utils/ModuleScopePlugin.js | 68 +++++++++++++++++++
 packages/react-dev-utils/README.md            | 20 ++++++
 packages/react-dev-utils/package.json         |  1 +
 .../config/webpack.config.dev.js              |  9 +++
 .../config/webpack.config.prod.js             |  9 +++
 5 files changed, 107 insertions(+)
 create mode 100644 packages/react-dev-utils/ModuleScopePlugin.js

diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
new file mode 100644
index 00000000000..fd70a2f408a
--- /dev/null
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+const chalk = require('chalk');
+const path = require('path');
+
+class ModuleScopePlugin {
+  constructor(appSrc) {
+    this.appSrc = appSrc;
+  }
+
+  apply(resolver) {
+    const { appSrc } = this;
+    resolver.plugin('file', (request, callback) => {
+      // Unknown issuer, probably webpack internals
+      if (!request.context.issuer) {
+        return callback();
+      }
+      if (
+        // If this resolves to a node_module, we don't care what happens next
+        request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
+        request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
+        // Make sure this request was manual
+        !request.__innerRequest_request
+      ) {
+        return callback();
+      }
+      // Resolve the issuer from our appSrc and make sure it's one of our files
+      // Maybe an indexOf === 0 would be better?
+      const relative = path.relative(appSrc, request.context.issuer);
+      // If it's not in src/ or a subdirectory, not our request!
+      if (relative[0] === '.') {
+        return callback();
+      }
+      // Find path from src to the requested file
+      const requestRelative = path.relative(
+        appSrc,
+        path.resolve(
+          path.dirname(request.context.issuer),
+          request.__innerRequest_request
+        )
+      );
+      // Error if in a parent directory of src/
+      if (requestRelative[0] === '.') {
+        callback(
+          new Error(
+            `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` +
+              `Relative imports outside of ${chalk.cyan('src/')} are not supported. ` +
+              `You can either move it inside ${chalk.cyan('src/')}, or add a symlink to it from project's ${chalk.cyan('node_modules/')}.`
+          ),
+          request
+        );
+      } else {
+        callback();
+      }
+    });
+  }
+}
+
+module.exports = ModuleScopePlugin;
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index ef720449356..4a7effe217a 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -56,6 +56,26 @@ module.exports = {
 }
 ```
 
+
+#### `new ModuleScopePlugin(appSrc: string)`
+
+This Webpack plugin ensures that relative imports from app's source directory don't reach outside of it.
+
+```js
+var path = require('path');
+var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+
+module.exports = {
+  // ...
+  plugins: [
+    new ModuleScopePlugin(paths.appSrc),
+    // ...
+  ],
+  // ...
+}
+```
+
 #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
 
 This Webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index d52fe30fd86..0a22499ca01 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -21,6 +21,7 @@
     "getProcessForPort.js",
     "InterpolateHtmlPlugin.js",
     "launchEditor.js",
+    "ModuleScopePlugin.js",
     "openBrowser.js",
     "openChrome.applescript",
     "prepareProxy.js",
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index f90ca6bd09e..3d198d28a34 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -18,6 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -106,6 +107,14 @@ module.exports = {
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
     },
+    plugins: [
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc),
+    ],
   },
   module: {
     strictExportPresence: true,
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 182105c756a..9742e7ff50a 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -18,6 +18,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -103,6 +104,14 @@ module.exports = {
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
     },
+    plugins: [
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      new ModuleScopePlugin(paths.appSrc),
+    ],
   },
   module: {
     strictExportPresence: true,

From e7c113eb158a27284fa2fae67b9ab4c6d8ea5cce Mon Sep 17 00:00:00 2001
From: Kant <quent92100@gmail.com>
Date: Wed, 17 May 2017 15:30:07 +0200
Subject: [PATCH 05/12] Webpack config typo (#2193)

* Webpack config typo

* Webpack config more typo
---
 packages/react-scripts/config/webpack.config.dev.js  | 6 +++---
 packages/react-scripts/config/webpack.config.prod.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 3d198d28a34..540d54abf5c 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -146,10 +146,10 @@ module.exports = {
         include: paths.appSrc,
       },
       // ** ADDING/UPDATING LOADERS **
-      // The "url" loader handles all assets unless explicitly excluded.
+      // The "file" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.
       // When adding a new loader, you must add its `test`
-      // as a new entry in the `exclude` list for "url" loader.
+      // as a new entry in the `exclude` list for "file" loader.
 
       // "file" loader makes sure those assets get served by WebpackDevServer.
       // When you `import` an asset, you get its (virtual) filename.
@@ -233,7 +233,7 @@ module.exports = {
         ],
       },
       // ** STOP ** Are you adding a new loader?
-      // Remember to add the new extension(s) to the "url" loader exclusion list.
+      // Remember to add the new extension(s) to the "file" loader exclusion list.
     ],
   },
   plugins: [
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 9742e7ff50a..7df2af07baf 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -145,10 +145,10 @@ module.exports = {
         include: paths.appSrc,
       },
       // ** ADDING/UPDATING LOADERS **
-      // The "url" loader handles all assets unless explicitly excluded.
+      // The "file" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.
       // When adding a new loader, you must add its `test`
-      // as a new entry in the `exclude` list in the "url" loader.
+      // as a new entry in the `exclude` list in the "file" loader.
 
       // "file" loader makes sure those assets end up in the `build` folder.
       // When you `import` an asset, you get its filename.
@@ -243,7 +243,7 @@ module.exports = {
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
       },
       // ** STOP ** Are you adding a new loader?
-      // Remember to add the new extension(s) to the "url" loader exclusion list.
+      // Remember to add the new extension(s) to the "file" loader exclusion list.
     ],
   },
   plugins: [

From c7c3a521e2255939786c27f58c019786697bd820 Mon Sep 17 00:00:00 2001
From: Jeffrey Posnick <jeffy@google.com>
Date: Wed, 17 May 2017 11:28:27 -0700
Subject: [PATCH 06/12] PWA-ification, via SWPrecacheWebpackPlugin +
 manifest.json (#1728)

* sw-precache-webpack-plugin, SW registration, manifest.json

* Documentation + a few SW tweaks.

* Added an unregister method, too, just in case.

* More info for the READMEs.

* Add minify to SWPrecacheWebpackPlugin config

* Fix SWPrecacheWebpackPlugin typo

* Fix file references in READMEmd

* Add instructions for testing service-worker locally

* Review feedback

* Some additional PWA metadata

* Use sw-precache-webpack-plugin v0.9.1 for node >=4.0.0 support

* Review feedback.

* Add manifest.json context in a comment.

* Fix typo

* Downgrade to sw-precache-webpack-plugin 0.9.1

* Hide changes in README until 1.0

* Hide changes in User Guide until 1.0

* Hide more docs
---
 README.md                                     |   6 +
 .../config/webpack.config.prod.js             |  14 +++
 packages/react-scripts/package.json           |   1 +
 packages/react-scripts/template/README.md     | 114 ++++++++++++++++++
 .../react-scripts/template/public/index.html  |   8 +-
 .../template/public/manifest.json             |  15 +++
 packages/react-scripts/template/src/index.js  |   3 +
 .../src/service-worker-registration.js        |  38 ++++++
 8 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-scripts/template/public/manifest.json
 create mode 100644 packages/react-scripts/template/src/service-worker-registration.js

diff --git a/README.md b/README.md
index 4a0eeab567a..e9658d8585c 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,9 @@ It correctly bundles React in production mode and optimizes the build for the be
 
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
+<!--TODO: uncoment and maybe revise
+A [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) using an [offline-first caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) is automatically generated.<br>
+Your ([progressive web](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)) app is ready to be deployed!-->
 
 ## User Guide
 
@@ -162,6 +165,9 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea
 * Import CSS and image files directly from JavaScript.
 * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes.
 * A `build` script to bundle JS, CSS, and images for production, with sourcemaps.
+<!--TODO: uncomment
+* 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://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria.
+-->
 
 **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.
 
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 7df2af07baf..34848a972a3 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -17,6 +17,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
@@ -295,6 +296,19 @@ module.exports = {
     new ManifestPlugin({
       fileName: 'asset-manifest.json',
     }),
+    // Generate a service worker script that will precache, and keep up to date,
+    // the HTML & assets that are part of the Webpack build.
+    new SWPrecacheWebpackPlugin({
+      // By default, a cache-busting query parameter is appended to requests
+      // used to populate the caches, to ensure the responses are fresh.
+      // If a URL is already hashed by Webpack, then there is no concern
+      // about it being stale, and the cache-busting can be skipped.
+      dontCacheBustUrlsMatching: /\.\w{8}\./,
+      filename: 'service-worker.js',
+      minify: true,
+      navigateFallback: publicUrl + '/index.html',
+      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+    }),
     // 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.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index eaab334d4c3..939e40d809f 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -56,6 +56,7 @@
     "react-dev-utils": "^1.0.0",
     "react-error-overlay": "^1.0.0",
     "style-loader": "0.17.0",
+    "sw-precache-webpack-plugin": "0.9.1",
     "url-loader": "0.5.8",
     "webpack": "2.5.1",
     "webpack-dev-server": "2.4.5",
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index b25f723c97b..50bbf7b694a 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -61,6 +61,10 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Editor Integration](#editor-integration)
 - [Developing Components in Isolation](#developing-components-in-isolation)
 - [Making a Progressive Web App](#making-a-progressive-web-app)
+<!-- todo: uncomment
+  - [Offline-First Considerations](#offline-first-considerations)
+  - [Progressive Web App Metadata](#progressive-web-app-metadata)
+-->
 - [Deployment](#deployment)
   - [Static Server](#static-server)
   - [Other Solutions](#other-solutions)
@@ -1216,6 +1220,103 @@ Learn more about React Storybook:
 
 You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa).
 
+<!--
+TODO: uncomment
+By default, the production build is a fully functional, offline-first
+[Progressive Web App](https://developers.google.com/web/progressive-web-apps/).
+
+The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin)
+is integrated into [`webpack.config.prod.js`](../config/webpack.config.prod.js),
+and it will take care of generating a service worker file that will automatically
+precache all of your local assets and keep them up to date as you deploy updates.
+The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
+for handling all requests for local assets, including the initial HTML, ensuring
+that you web app is reliably fast, even on a slow or unreliable network.
+
+If you would prefer not to enable service workers prior to your initial
+production deployment, then remove the call to `serviceWorkerRegistration.register()`
+from [`src/index.js`](src/index.js).
+
+If you had previously enabled service workers in your production deployment and
+have decided that you would like to disable them for all your existing users,
+you can swap out the call to `serviceWorkerRegistration.register()` in
+[`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`.
+After the user visits a page that has `serviceWorkerRegistration.unregister()`,
+the service worker will be uninstalled.
+
+### Offline-First Considerations
+
+1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https),
+although to facilitate local testing, that policy
+[does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385).
+If your production web server does not support HTTPS, then the service worker
+registration will fail, but the rest of your web app will remain functional.
+
+1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
+in all web browsers. Service worker registration [won't be attempted](src/service-worker-registration.js)
+on browsers that lack support.
+
+1. The service worker is only enabled in the [production environment](#deployment),
+e.g. the output of `npm run build`. It's recommended that you do not enable an
+offline-first service worker in a development environment, as it can lead to
+frustration when previously cached assets are used and do not include the latest
+changes you've made locally.
+
+1. If you *need* to test your offline-first service worker locally, build
+the application (using `npm run build`) and run a simple http server from your
+build directory. After running the build script, `create-react-app` will give
+instructions for one way to test your production build locally using
+`pushstate-server` and the [deployment instructions](#deployment) have
+instructions for using the python `SimpleHTTPServer`. *Be sure to always use an
+incognito window to avoid complications with your browser cache.*
+
+1. If possible,configure your production environment to serve the generated
+`service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
+If that's not possible—[GitHub Pages](#github-pages), for instance, does not
+allow you to change the default 10 minute HTTP cache lifetime—then be aware
+that if you visit your production site, and then revisit again before
+`service-worker.js` has expired from your HTTP cache, you'll continue to get
+the previously cached assets from the service worker. If you have an immediate
+need to view your updated production deployment, performing a shift-refresh
+will temporarily disable the service worker and retrieve all assets from the
+network.
+
+1. Users aren't always familiar with offline-first web apps. It can be useful to
+[let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption)
+when the service worker has finished populating your caches (showing a "This web
+app works offline!" message) and also let them know when the service worker has
+fetched the latest updates that will be available the next time they load the
+page (showing a "New content is available; please refresh." message). Showing
+this messages is currently left as an exercise to the developer, but as a
+starting point, you can make use of the logic included in [`src/service-worker-registration.js`](src/service-worker-registration.js), which
+demonstrates which service worker lifecycle events to listen for to detect each
+scenario, and which as a default, just logs appropriate messages to the
+JavaScript console.
+
+1. By default, the generated service worker file will not intercept or cache any
+cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend),
+images, or embeds loaded from a different domain. If you would like to use a
+runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
+and then configure the
+[`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
+option in the `SWPrecacheWebpackPlugin` section of
+[`webpack.config.prod.js`](../config/webpack.config.prod.js).
+
+### Progressive Web App Metadata
+
+The default configuration includes a web app manifest located at
+[`public/manifest.json`](public/manifest.json), that you can customize with
+details specific to your web application.
+
+When a user adds a web app to their homescreen using Chrome or Firefox on
+Android, the metadata in [`manifest.json`](public/manifest.json) determines what
+icons, names, and branding colors to use when the web app is displayed.
+[The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
+provides more context about what each field means, and how your customizations
+will affect your users' experience.
+
+-->
+
 ## Deployment
 
 `npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file.
@@ -1291,6 +1392,19 @@ It will get copied to the `build` folder when you run `npm run build`.
 
 Now requests to `/todos/42` will be handled correctly both in development and in production.
 
+<!--
+TODO: uncomment for 1.0
+
+On a production build, and in a browser that supports [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers),
+the service worker will automatically handle all navigation requests, like for
+`/todos/42`, by serving the cached copy of your `index.html`. This
+service worker navigation routing can be configured or disabled by
+[`eject`ing](#npm-run-eject) and then modifying the
+[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
+and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
+options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js).
+-->
+
 ### Building for Relative Paths
 
 By default, Create React App produces a build assuming your app is hosted at the server root.<br>
diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html
index 7f3e83f4e43..fc8689a2a29 100644
--- a/packages/react-scripts/template/public/index.html
+++ b/packages/react-scripts/template/public/index.html
@@ -3,9 +3,15 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
+      Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
diff --git a/packages/react-scripts/template/public/manifest.json b/packages/react-scripts/template/public/manifest.json
new file mode 100644
index 00000000000..be607e41771
--- /dev/null
+++ b/packages/react-scripts/template/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index 5d76a18a853..e132a571726 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/packages/react-scripts/template/src/index.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import registerServiceWorker from './service-worker-registration';
 import './index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
+
+registerServiceWorker();
diff --git a/packages/react-scripts/template/src/service-worker-registration.js b/packages/react-scripts/template/src/service-worker-registration.js
new file mode 100644
index 00000000000..c3a5d878c64
--- /dev/null
+++ b/packages/react-scripts/template/src/service-worker-registration.js
@@ -0,0 +1,38 @@
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      navigator.serviceWorker.register(swUrl).then(registration => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and
+                // the fresh content will have been added to the cache.
+                // It's the perfect time to display a "New content is
+                // available; please refresh." message in your web app.
+                console.log('New content is available; please refresh.');
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+              }
+            }
+          };
+        };
+      }).catch(error => {
+        console.error('Error during service worker registration:', error);
+      });
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

From d9a29745745c7efaa0234402c402596b2a872f93 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 May 2017 20:10:17 +0100
Subject: [PATCH 07/12] Tidy up some build logs (#2197)

---
 packages/react-dev-utils/formatWebpackMessages.js    | 3 ++-
 packages/react-scripts/config/webpack.config.prod.js | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js
index c490097bac6..5dfd099c65c 100644
--- a/packages/react-dev-utils/formatWebpackMessages.js
+++ b/packages/react-dev-utils/formatWebpackMessages.js
@@ -65,7 +65,8 @@ function formatMessage(message, isError) {
       lines[1]
         .replace("Cannot resolve 'file' or 'directory' ", '')
         .replace('Cannot resolve module ', '')
-        .replace('Error: ', ''),
+        .replace('Error: ', '')
+        .replace('[CaseSensitivePathsPlugin] ', ''),
     ];
   }
 
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 34848a972a3..96cc32f9481 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -305,6 +305,13 @@ module.exports = {
       // about it being stale, and the cache-busting can be skipped.
       dontCacheBustUrlsMatching: /\.\w{8}\./,
       filename: 'service-worker.js',
+      logger(message) {
+        if (message.indexOf('Total precache size is') === 0) {
+          // This message occurs for every build and is a bit too noisy.
+          return;
+        }
+        console.log(message);
+      },
       minify: true,
       navigateFallback: publicUrl + '/index.html',
       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],

From ee850f5822261d0080a303f1d61b7c290f8023ce Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 May 2017 20:10:35 +0100
Subject: [PATCH 08/12] Bump Jest to 20.0.3 (#2196)

---
 packages/react-scripts/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 939e40d809f..cdc70febc60 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -26,7 +26,7 @@
     "autoprefixer": "7.1.0",
     "babel-core": "6.24.1",
     "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.1",
+    "babel-jest": "20.0.3",
     "babel-loader": "7.0.0",
     "babel-preset-react-app": "^3.0.0",
     "babel-runtime": "6.23.0",
@@ -48,7 +48,7 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.28.0",
     "inquirer": "3.0.6",
-    "jest": "20.0.1",
+    "jest": "20.0.3",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.5",

From c27d7650143312fe6f6e50ad899fc9baaaffd6f9 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Wed, 17 May 2017 14:52:55 -0500
Subject: [PATCH 09/12] Test module scoping (#2198)

* Correct readme

* Add tests

* Update README.md
---
 packages/react-dev-utils/README.md | 14 +++++++++-----
 tasks/e2e-simple.sh                | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 4a7effe217a..11f3f8eaa8a 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -34,7 +34,7 @@ var publicUrl = '/my-custom-url';
 module.exports = {
   output: {
     // ...
-    publicPath: publicUrl + '/' 
+    publicPath: publicUrl + '/'
   },
   // ...
   plugins: [
@@ -68,10 +68,14 @@ var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 
 module.exports = {
   // ...
-  plugins: [
-    new ModuleScopePlugin(paths.appSrc),
+  resolve: {
     // ...
-  ],
+    plugins: [
+      new ModuleScopePlugin(paths.appSrc),
+      // ...
+    ],
+    // ...
+  },
   // ...
 }
 ```
@@ -132,7 +136,7 @@ console.log('Just cleared the screen!');
 
 #### `eslintFormatter(results: Object): string`
 
-This is our custom ESLint formatter that integrates well with Create React App console output.  
+This is our custom ESLint formatter that integrates well with Create React App console output.<br>
 You can use the default one instead if you prefer so.
 
 ```js
diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh
index 9d5a4dfba55..4795d09a8b2 100755
--- a/tasks/e2e-simple.sh
+++ b/tasks/e2e-simple.sh
@@ -228,6 +228,25 @@ function verify_env_url {
   mv package.json.orig package.json
 }
 
+function verify_module_scope {
+  # Create stub json file
+  echo "{}" >> sample.json
+
+  # Save App.js, we're going to modify it
+  cp src/App.js src/App.js.bak
+
+  # Add an out of scope import
+  echo "import sampleJson from '../sample'" | cat - src/App.js > src/App.js.temp && mv src/App.js.temp src/App.js
+
+  # Make sure the build fails
+  npm run build; test $? -eq 1 || exit 1
+  # TODO: check for error message
+
+  # Restore App.js
+  rm src/App.js
+  mv src/App.js.bak src/App.js
+}
+
 # Enter the app directory
 cd test-app
 
@@ -251,6 +270,9 @@ npm start -- --smoke-test
 # Test environment handling
 verify_env_url
 
+# Test reliance on webpack internals
+verify_module_scope
+
 # ******************************************************************************
 # Finally, let's check that everything still works after ejecting.
 # ******************************************************************************
@@ -287,5 +309,8 @@ npm start -- --smoke-test
 # Test environment handling
 verify_env_url
 
+# Test reliance on webpack internals
+verify_module_scope
+
 # Cleanup
 cleanup

From fd2a800f768ee011d6d21bad38ce228ddfb9f70c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 May 2017 23:24:07 +0100
Subject: [PATCH 10/12] Disable Uglify reduce_vars (#2200)

---
 packages/react-scripts/config/webpack.config.prod.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 96cc32f9481..ac672a4099a 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -280,6 +280,10 @@ module.exports = {
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false,
+        // This feature has been reported as buggy a few times, such as:
+        // https://github.com/mishoo/UglifyJS2/issues/1964
+        // We'll wait with enabling it by default until it is more solid.
+        reduce_vars: false,
       },
       output: {
         comments: false,

From 68f95d41334f65fd1dc12c329fda12c719e18b3f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 18 May 2017 01:48:33 +0200
Subject: [PATCH 11/12] Tweaking error overlay styles (#2201)

* Tweaked overlay styles

* Tweaked pre-style

* Clicked to background overlay dismiss

* Tidied up styles tobe more mobile Safari friendly

* Re-enabled pre-wrap

* Margin fixes

* Base font-size 10 -> 11px

* Error overlay is full-screen now based on feedback

* Make "N errors on the page" visible again

* Fix bottom margin of frame location and lack of tab nav

* Add tooltip to close button

* Bring compile error styles closer to runtime overlay

* s/when/if/
---
 packages/react-dev-utils/ansiHTML.js          | 10 +-
 .../react-dev-utils/webpackHotDevClient.js    | 79 +++++++++++-----
 .../src/components/additional.js              | 12 ++-
 .../src/components/close.js                   |  5 +-
 .../src/components/footer.js                  |  2 +-
 .../src/components/frame.js                   |  1 +
 .../src/components/overlay.js                 | 35 ++++---
 packages/react-error-overlay/src/overlay.js   | 37 ++------
 packages/react-error-overlay/src/styles.js    | 92 +++++++++++--------
 9 files changed, 153 insertions(+), 120 deletions(-)

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index c4e850736ac..5d3e792036c 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -15,18 +15,18 @@ var Anser = require('anser');
 // var base00 = 'ffffff'; // Default Background
 var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
 // var base02 = 'c8c8fa'; // Selection Background
-var base03 = '969896'; // Comments, Invisibles, Line Highlighting
+var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting
 // var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
 var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
 // var base06 = 'ffffff'; // Light Foreground (Not often used)
 // var base07 = 'ffffff'; // Light Background (Not often used)
-var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
 // var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
 // var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
-var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted
-var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes
+var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted
+var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes
 // var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
-var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
 // var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
 
 // Map ANSI colors from what babel-code-frame uses to base16-github
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 4e2d3cf1355..dd280dab5a9 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -26,8 +26,6 @@ var Entities = require('html-entities').AllHtmlEntities;
 var ansiHTML = require('./ansiHTML');
 var entities = new Entities();
 
-var red = '#E36049';
-
 function createOverlayIframe(onIframeLoad) {
   var iframe = document.createElement('iframe');
   iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
@@ -46,28 +44,53 @@ function createOverlayIframe(onIframeLoad) {
 }
 
 function addOverlayDivTo(iframe) {
+  // TODO: unify these styles with react-error-overlay
+  iframe.contentDocument.body.style.margin = 0;
+  iframe.contentDocument.body.style.maxWidth = '100vw';
+
+  var outerDiv = iframe.contentDocument.createElement('div');
+  outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
+  outerDiv.style.width = '100%';
+  outerDiv.style.height = '100%';
+  outerDiv.style.boxSizing = 'border-box';
+  outerDiv.style.textAlign = 'center';
+  outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
+
   var div = iframe.contentDocument.createElement('div');
-  div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
-  div.style.position = 'fixed';
+  div.style.position = 'relative';
+  div.style.display = 'inline-flex';
+  div.style.flexDirection = 'column';
+  div.style.height = '100%';
+  div.style.width = '1024px';
+  div.style.maxWidth = '100%';
+  div.style.overflowX = 'hidden';
+  div.style.overflowY = 'auto';
+  div.style.padding = '0.5rem';
   div.style.boxSizing = 'border-box';
-  div.style.left = 0;
-  div.style.top = 0;
-  div.style.right = 0;
-  div.style.bottom = 0;
-  div.style.width = '100vw';
-  div.style.height = '100vh';
-  div.style.backgroundColor = '#fafafa';
-  div.style.color = '#333';
-  div.style.fontFamily = 'Menlo, Consolas, monospace';
-  div.style.fontSize = 'large';
-  div.style.padding = '2rem';
-  div.style.lineHeight = '1.2';
+  div.style.textAlign = 'start';
+  div.style.fontFamily = 'Consolas, Menlo, monospace';
+  div.style.fontSize = '11px';
   div.style.whiteSpace = 'pre-wrap';
-  div.style.overflow = 'auto';
-  iframe.contentDocument.body.appendChild(div);
+  div.style.wordBreak = 'break-word';
+  div.style.lineHeight = '1.5';
+  div.style.color = 'rgb(41, 50, 56)';
+
+  outerDiv.appendChild(div);
+  iframe.contentDocument.body.appendChild(outerDiv);
   return div;
 }
 
+function overlayHeaderStyle() {
+  return 'font-size: 2em;' +
+    'font-family: sans-serif;' +
+    'color: rgb(206, 17, 38);' +
+    'white-space: pre-wrap;' +
+    'margin: 0.75rem 2rem 0px 0px;' +
+    'flex: 0 0 auto;' +
+    'max-height: 35%;' +
+    'overflow: auto;';
+}
+
 var overlayIframe = null;
 var overlayDiv = null;
 var lastOnOverlayDivReady = null;
@@ -103,11 +126,21 @@ function ensureOverlayDivExists(onOverlayDivReady) {
 
 function showErrorOverlay(message) {
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
-    // Make it look similar to our terminal.
-    overlayDiv.innerHTML = '<span style="color: ' +
-      red +
-      '">Failed to compile.</span><br><br>' +
-      ansiHTML(entities.encode(message));
+    // TODO: unify this with our runtime overlay
+    overlayDiv.innerHTML = '<div style="' +
+      overlayHeaderStyle() +
+      '">Failed to compile</div><br><br>' +
+      '<pre style="' +
+      'display: block; padding: 0.5em; margin-top: 0.5em; ' +
+      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
+      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
+      '<code style="font-family: Consolas, Menlo, monospace;">' +
+      ansiHTML(entities.encode(message)) +
+      '</code></pre>' +
+      '<div style="' +
+      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
+      'flex: 0 0 auto">' +
+      'This error occurred during the build time and cannot be dismissed.</div>';
   });
 }
 
diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js
index 4853c922c71..080f68f1dbb 100644
--- a/packages/react-error-overlay/src/components/additional.js
+++ b/packages/react-error-overlay/src/components/additional.js
@@ -16,16 +16,14 @@ function updateAdditional(
     additionalReference.removeChild(additionalReference.lastChild);
   }
 
-  let text = ' ';
   if (totalErrors <= 1) {
-    additionalReference.appendChild(document.createTextNode(text));
     return;
   }
-  text = `Errors ${currentError} of ${totalErrors}`;
+
   const span = document.createElement('span');
-  span.appendChild(document.createTextNode(text));
   const group = document.createElement('span');
   applyStyles(group, groupStyle);
+
   const left = document.createElement('button');
   applyStyles(left, groupElemLeft);
   left.addEventListener('click', function(e: MouseEvent) {
@@ -34,6 +32,7 @@ function updateAdditional(
   });
   left.appendChild(document.createTextNode('←'));
   enableTabClick(left);
+
   const right = document.createElement('button');
   applyStyles(right, groupElemRight);
   right.addEventListener('click', function(e: MouseEvent) {
@@ -42,9 +41,14 @@ function updateAdditional(
   });
   right.appendChild(document.createTextNode('→'));
   enableTabClick(right);
+
   group.appendChild(left);
   group.appendChild(right);
   span.appendChild(group);
+
+  const text = `${currentError} of ${totalErrors} errors on the page`;
+  span.appendChild(document.createTextNode(text));
+
   additionalReference.appendChild(span);
 }
 
diff --git a/packages/react-error-overlay/src/components/close.js b/packages/react-error-overlay/src/components/close.js
index e868cc0d4ca..bba65131bd4 100644
--- a/packages/react-error-overlay/src/components/close.js
+++ b/packages/react-error-overlay/src/components/close.js
@@ -2,9 +2,10 @@
 import { applyStyles } from '../utils/dom/css';
 import { hintsStyle, hintStyle, closeButtonStyle } from '../styles';
 
-function createHint(document: Document, hint: string) {
+function createHint(document: Document, hint: string, title: string) {
   const span = document.createElement('span');
   span.appendChild(document.createTextNode(hint));
+  span.setAttribute('title', title);
   applyStyles(span, hintStyle);
   return span;
 }
@@ -14,7 +15,7 @@ function createClose(document: Document, callback: CloseCallback) {
   const hints = document.createElement('div');
   applyStyles(hints, hintsStyle);
 
-  const close = createHint(document, '×');
+  const close = createHint(document, '×', 'Click or press Escape to dismiss.');
   close.addEventListener('click', () => callback());
   applyStyles(close, closeButtonStyle);
   hints.appendChild(close);
diff --git a/packages/react-error-overlay/src/components/footer.js b/packages/react-error-overlay/src/components/footer.js
index 9ddfaf57c7e..bfedeef0d44 100644
--- a/packages/react-error-overlay/src/components/footer.js
+++ b/packages/react-error-overlay/src/components/footer.js
@@ -7,7 +7,7 @@ function createFooter(document: Document) {
   applyStyles(div, footerStyle);
   div.appendChild(
     document.createTextNode(
-      'This screen is visible only in development. It will not appear when the app crashes in production.'
+      'This screen is visible only in development. It will not appear if the app crashes in production.'
     )
   );
   div.appendChild(document.createElement('br'));
diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index 70465a2eda0..a9ea0ea37da 100644
--- a/packages/react-error-overlay/src/components/frame.js
+++ b/packages/react-error-overlay/src/components/frame.js
@@ -120,6 +120,7 @@ function frameDiv(
 
   if (typeof onSourceClick === 'function') {
     let handler = onSourceClick;
+    enableTabClick(frameAnchor);
     frameAnchor.style.cursor = 'pointer';
     frameAnchor.addEventListener('click', function() {
       handler();
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 8633524be13..1626fcdee57 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -1,6 +1,11 @@
 /* @flow */
 import { applyStyles } from '../utils/dom/css';
-import { overlayStyle, headerStyle, additionalStyle } from '../styles';
+import {
+  containerStyle,
+  overlayStyle,
+  headerStyle,
+  additionalStyle,
+} from '../styles';
 import { createClose } from './close';
 import { createFrames } from './frames';
 import { createFooter } from './footer';
@@ -28,24 +33,12 @@ function createOverlay(
   // Create overlay
   const overlay = document.createElement('div');
   applyStyles(overlay, overlayStyle);
-  overlay.appendChild(createClose(document, closeCallback));
 
   // Create container
   const container = document.createElement('div');
-  container.className = 'cra-container';
+  applyStyles(container, containerStyle);
   overlay.appendChild(container);
-
-  // Create additional
-  const additional = document.createElement('div');
-  applyStyles(additional, additionalStyle);
-  container.appendChild(additional);
-  updateAdditional(
-    document,
-    additional,
-    currentError,
-    totalErrors,
-    switchCallback
-  );
+  container.appendChild(createClose(document, closeCallback));
 
   // Create header
   const header = document.createElement('div');
@@ -71,6 +64,18 @@ function createOverlay(
   header.appendChild(document.createTextNode(finalMessage));
   container.appendChild(header);
 
+  // Create "Errors X of Y" in case of multiple errors
+  const additional = document.createElement('div');
+  applyStyles(additional, additionalStyle);
+  updateAdditional(
+    document,
+    additional,
+    currentError,
+    totalErrors,
+    switchCallback
+  );
+  container.appendChild(additional);
+
   // Create trace
   container.appendChild(
     createFrames(document, frames, frameSettings, contextSize, name)
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index fe29a6c7b36..cfcd1182911 100644
--- a/packages/react-error-overlay/src/overlay.js
+++ b/packages/react-error-overlay/src/overlay.js
@@ -35,7 +35,7 @@ import type { ErrorRecordReference } from './utils/errorRegister';
 
 import type { StackFrame } from './utils/stack-frame';
 import { iframeStyle } from './styles';
-import { injectCss, applyStyles } from './utils/dom/css';
+import { applyStyles } from './utils/dom/css';
 import { createOverlay } from './components/overlay';
 import { updateAdditional } from './components/additional';
 
@@ -45,33 +45,6 @@ let additionalReference = null;
 let errorReferences: ErrorRecordReference[] = [];
 let currReferenceIndex: number = -1;
 
-const css = [
-  '.cra-container {',
-  '  padding-right: 15px;',
-  '  padding-left: 15px;',
-  '  margin-right: auto;',
-  '  margin-left: auto;',
-  '}',
-  '',
-  '@media (min-width: 768px) {',
-  '  .cra-container {',
-  '    width: calc(750px - 6em);',
-  '  }',
-  '}',
-  '',
-  '@media (min-width: 992px) {',
-  '  .cra-container {',
-  '    width: calc(970px - 6em);',
-  '  }',
-  '}',
-  '',
-  '@media (min-width: 1200px) {',
-  '  .cra-container {',
-  '    width: calc(1170px - 6em);',
-  '  }',
-  '}',
-].join('\n');
-
 function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
   disposeCurrentView();
 
@@ -105,9 +78,13 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
         keyEventHandler(type => shortcutHandler(type), event);
       };
     }
-    injectCss(iframeReference.contentDocument, css);
     if (document.body != null) {
-      document.body.appendChild(overlay);
+      document.body.style.margin = '0';
+      // Keep popup within body boundaries for iOS Safari
+      // $FlowFixMe
+      document.body.style['max-width'] = '100vw';
+
+      (document.body: any).appendChild(overlay);
     }
     additionalReference = additional;
   };
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 855778cbd13..8e6f0d07bc5 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -1,43 +1,50 @@
 /* @flow */
 const black = '#293238',
   darkGray = '#878e91',
-  lightGray = '#fafafa',
   red = '#ce1126',
   lightRed = '#fccfcf',
-  yellow = '#fbf5b4';
+  yellow = '#fbf5b4',
+  white = '#ffffff';
 
 const iframeStyle = {
-  'background-color': lightGray,
   position: 'fixed',
-  top: '1em',
-  left: '1em',
-  bottom: '1em',
-  right: '1em',
-  width: 'calc(100% - 2em)',
-  height: 'calc(100% - 2em)',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
   border: 'none',
-  'border-radius': '3px',
-  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'z-index': 1337,
 };
 
 const overlayStyle = {
+  width: '100%',
+  height: '100%',
   'box-sizing': 'border-box',
-  padding: '4rem',
+  'text-align': 'center',
+  'background-color': white,
+};
+
+const containerStyle = {
+  position: 'relative',
+  display: 'inline-flex',
+  'flex-direction': 'column',
+  height: '100%',
+  width: '1024px',
+  'max-width': '100%',
+  'overflow-x': 'hidden',
+  'overflow-y': 'auto',
+  padding: '0.5rem',
+  'box-sizing': 'border-box',
+  'text-align': 'start',
   'font-family': 'Consolas, Menlo, monospace',
-  color: black,
+  'font-size': '11px',
   'white-space': 'pre-wrap',
-  overflow: 'auto',
-  'overflow-x': 'hidden',
   'word-break': 'break-word',
   'line-height': 1.5,
+  color: black,
 };
 
 const hintsStyle = {
-  'font-size': '0.8em',
-  'margin-top': '-3em',
-  'margin-bottom': '3em',
-  'text-align': 'right',
   color: darkGray,
 };
 
@@ -47,34 +54,36 @@ const hintStyle = {
 };
 
 const closeButtonStyle = {
-  'font-size': '26px',
   color: black,
-  padding: '0.5em 1em',
+  'line-height': '1rem',
+  'font-size': '1.5rem',
+  padding: '1rem',
   cursor: 'pointer',
   position: 'absolute',
   right: 0,
   top: 0,
 };
 
-const additionalStyle = {
-  'margin-bottom': '1.5em',
-  'margin-top': '-4em',
-};
+const additionalStyle = {};
 
 const headerStyle = {
-  'font-size': '1.7em',
-  'font-weight': 'bold',
+  'font-size': '2em',
+  'font-family': 'sans-serif',
   color: red,
   'white-space': 'pre-wrap',
+  margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
+  flex: '0 0 auto',
+  'max-height': '35%',
+  overflow: 'auto',
 };
 
 const functionNameStyle = {
   'margin-top': '1em',
-  'font-size': '1.2em',
 };
 
 const linkStyle = {
   'font-size': '0.9em',
+  'margin-bottom': '0.9em',
 };
 
 const anchorStyle = {
@@ -84,11 +93,12 @@ const anchorStyle = {
 
 const traceStyle = {
   'font-size': '1em',
+  flex: '0 1 auto',
+  'min-height': '0px',
+  overflow: 'auto',
 };
 
-const depStyle = {
-  'font-size': '1.2em',
-};
+const depStyle = {};
 
 const primaryErrorStyle = {
   'background-color': lightRed,
@@ -100,19 +110,18 @@ const secondaryErrorStyle = {
 
 const omittedFramesStyle = {
   color: black,
-  'font-size': '0.9em',
-  margin: '1.5em 0',
   cursor: 'pointer',
 };
 
 const preStyle = {
   display: 'block',
   padding: '0.5em',
-  'margin-top': '1.5em',
-  'margin-bottom': '0px',
+  'margin-top': '0.5em',
+  'margin-bottom': '0.5em',
   'overflow-x': 'auto',
-  'font-size': '1.1em',
-  'white-space': 'pre',
+  'white-space': 'pre-wrap',
+  'border-radius': '0.25rem',
+  'background-color': 'rgba(206, 17, 38, .05)',
 };
 
 const toggleStyle = {
@@ -130,7 +139,7 @@ const hiddenStyle = {
 };
 
 const groupStyle = {
-  'margin-left': '1em',
+  'margin-right': '1em',
 };
 
 const _groupElemStyle = {
@@ -152,15 +161,18 @@ const groupElemLeft = Object.assign({}, _groupElemStyle, {
 const groupElemRight = Object.assign({}, _groupElemStyle, {
   'border-top-left-radius': '0px',
   'border-bottom-left-radius': '0px',
-  'margin-left': '-1px',
+  'margin-right': '-1px',
 });
 
 const footerStyle = {
-  'text-align': 'center',
+  'font-family': 'sans-serif',
   color: darkGray,
+  'margin-top': '0.5rem',
+  flex: '0 0 auto',
 };
 
 export {
+  containerStyle,
   iframeStyle,
   overlayStyle,
   hintsStyle,

From c82c4f056111b6ca618a7718e323885fd8de76d0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 01:24:42 +0100
Subject: [PATCH 12/12] Refactor and improve build output (#2202)

---
 packages/react-dev-utils/README.md            |  13 ++
 packages/react-dev-utils/eslintFormatter.js   |   6 +-
 packages/react-dev-utils/package.json         |   1 +
 .../printHostingInstructions.js               | 114 ++++++++++
 packages/react-scripts/scripts/build.js       | 200 +++++-------------
 5 files changed, 191 insertions(+), 143 deletions(-)
 create mode 100644 packages/react-dev-utils/printHostingInstructions.js

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 11f3f8eaa8a..d65c43ec667 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -252,6 +252,19 @@ if (openBrowser('http://localhost:3000')) {
 }
 ```
 
+#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`
+
+Prints hosting instructions after the project is built.
+
+Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
+
+```js
+const appPackage = require(paths.appPackageJson);
+const publicUrl = paths.publicUrl;
+const publicPath = config.output.publicPath;
+printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
+```
+
 #### `webpackHotDevClient.js`
 
 This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.
diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js
index 674f2f06dec..c087734eadd 100644
--- a/packages/react-dev-utils/eslintFormatter.js
+++ b/packages/react-dev-utils/eslintFormatter.js
@@ -13,6 +13,7 @@ function isError(message) {
 function formatter(results) {
   let output = '\n';
   let hasErrors = false;
+  let reportContainsErrorRuleIDs = false;
 
   results.forEach(result => {
     let messages = result.messages;
@@ -25,6 +26,9 @@ function formatter(results) {
       if (isError(message)) {
         messageType = 'error';
         hasErrors = true;
+        if (message.ruleId) {
+          reportContainsErrorRuleIDs = true;
+        }
       } else {
         messageType = 'warn';
       }
@@ -61,7 +65,7 @@ function formatter(results) {
     output += `${outputTable}\n\n`;
   });
 
-  if (hasErrors) {
+  if (reportContainsErrorRuleIDs) {
     // Unlike with warnings, we have to do it here.
     // We have similar code in react-scripts for warnings,
     // but warnings can appear in multiple files so we only
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 0a22499ca01..c63502cd8b0 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -25,6 +25,7 @@
     "openBrowser.js",
     "openChrome.applescript",
     "prepareProxy.js",
+    "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "webpackHotDevClient.js"
   ],
diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js
new file mode 100644
index 00000000000..4b31cbc4499
--- /dev/null
+++ b/packages/react-dev-utils/printHostingInstructions.js
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+const chalk = require('chalk');
+const url = require('url');
+
+function printHostingInstructions(
+  appPackage,
+  publicUrl,
+  publicPath,
+  buildFolder,
+  useYarn
+) {
+  const publicPathname = url.parse(publicPath).pathname;
+  if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
+    // "homepage": "http://user.github.io/project"
+    console.log(
+      `The project was built assuming it is hosted at ${chalk.green(publicPathname)}.`
+    );
+    console.log(
+      `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+    );
+    console.log();
+    console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
+    console.log(`To publish it at ${chalk.green(publicUrl)}, run:`);
+    // If script deploy has been added to package.json, skip the instructions
+    if (typeof appPackage.scripts.deploy === 'undefined') {
+      console.log();
+      if (useYarn) {
+        console.log(`  ${chalk.cyan('yarn')} add --dev gh-pages`);
+      } else {
+        console.log(`  ${chalk.cyan('npm')} install --save-dev gh-pages`);
+      }
+      console.log();
+      console.log(
+        `Add the following script in your ${chalk.cyan('package.json')}.`
+      );
+      console.log();
+      console.log(`    ${chalk.dim('// ...')}`);
+      console.log(`    ${chalk.yellow('"scripts"')}: {`);
+      console.log(`      ${chalk.dim('// ...')}`);
+      console.log(
+        `      ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}`
+      );
+      console.log(
+        `      ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}`
+      );
+      console.log('    }');
+      console.log();
+      console.log('Then run:');
+    }
+    console.log();
+    console.log(`  ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`);
+    console.log();
+  } else if (publicPath !== '/') {
+    // "homepage": "http://mywebsite.com/project"
+    console.log(
+      `The project was built assuming it is hosted at ${chalk.green(publicPath)}.`
+    );
+    console.log(
+      `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+    );
+    console.log();
+    console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
+    console.log();
+  } else {
+    if (publicUrl) {
+      // "homepage": "http://mywebsite.com"
+      console.log(
+        `The project was built assuming it is hosted at ${chalk.green(publicUrl)}.`
+      );
+      console.log(
+        `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+      );
+      console.log();
+    } else {
+      // no homepage
+      console.log(
+        'The project was built assuming it is hosted at the server root.'
+      );
+      console.log(
+        `To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.`
+      );
+      console.log('For example, add this to build it for GitHub Pages:');
+      console.log();
+      console.log(
+        `  ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}`
+      );
+      console.log();
+    }
+    console.log(
+      `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.`
+    );
+    console.log('You may serve it with a static server:');
+    console.log();
+    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 build`);
+    console.log();
+  }
+}
+
+module.exports = printHostingInstructions;
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index da9004f9ee6..8a4149370d2 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -23,14 +23,15 @@ process.on('unhandledRejection', err => {
 // Ensure environment variables are read.
 require('../config/env');
 
+const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
-const path = require('path');
-const url = require('url');
 const webpack = require('webpack');
 const config = require('../config/webpack.config.prod');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 
 const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
@@ -44,159 +45,74 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appBuild).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);
-
-  // Start the webpack build
-  build(previousFileSizes);
-
-  // Merge with the public folder
-  copyPublicFolder();
-});
-
-// Print out errors
-function printErrors(summary, errors) {
-  console.log(chalk.red(summary));
-  console.log();
-  errors.forEach(err => {
-    console.log(err.message || err);
-    console.log();
-  });
-}
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-
-  let compiler;
-  try {
-    compiler = webpack(config);
-  } catch (err) {
-    printErrors('Failed to compile.', [err]);
-    process.exit(1);
-  }
-
-  compiler.run((err, stats) => {
-    if (err) {
-      printErrors('Failed to compile.', [err]);
-      process.exit(1);
-    }
+measureFileSizesBeforeBuild(paths.appBuild)
+  .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);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes }) => {
+      console.log(chalk.green('Compiled successfully.'));
+      console.log();
 
-    if (stats.compilation.errors.length) {
-      printErrors('Failed to compile.', stats.compilation.errors);
-      process.exit(1);
-    }
+      console.log('File sizes after gzip:');
+      console.log();
+      printFileSizesAfterBuild(stats, previousFileSizes);
+      console.log();
 
-    if (process.env.CI && stats.compilation.warnings.length) {
-      printErrors(
-        'Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.',
-        stats.compilation.warnings
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
       );
+    },
+    err => {
+      console.log(chalk.red('Failed to compile.'));
+      console.log();
+      console.log(err.message || err);
+      console.log();
       process.exit(1);
     }
+  );
 
-    console.log(chalk.green('Compiled successfully.'));
-    console.log();
-
-    console.log('File sizes after gzip:');
-    console.log();
-    printFileSizesAfterBuild(stats, previousFileSizes);
-    console.log();
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
 
-    const appPackage = require(paths.appPackageJson);
-    const publicUrl = paths.publicUrl;
-    const publicPath = config.output.publicPath;
-    const publicPathname = url.parse(publicPath).pathname;
-    if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
-      // "homepage": "http://user.github.io/project"
-      console.log(
-        `The project was built assuming it is hosted at ${chalk.green(publicPathname)}.`
-      );
-      console.log(
-        `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
-      );
-      console.log();
-      console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
-      console.log(`To publish it at ${chalk.green(publicUrl)}, run:`);
-      // If script deploy has been added to package.json, skip the instructions
-      if (typeof appPackage.scripts.deploy === 'undefined') {
-        console.log();
-        if (useYarn) {
-          console.log(`  ${chalk.cyan('yarn')} add --dev gh-pages`);
-        } else {
-          console.log(`  ${chalk.cyan('npm')} install --save-dev gh-pages`);
-        }
-        console.log();
-        console.log(
-          `Add the following script in your ${chalk.cyan('package.json')}.`
-        );
-        console.log();
-        console.log(`    ${chalk.dim('// ...')}`);
-        console.log(`    ${chalk.yellow('"scripts"')}: {`);
-        console.log(`      ${chalk.dim('// ...')}`);
-        console.log(
-          `      ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}`
-        );
-        console.log(
-          `      ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}`
-        );
-        console.log('    }');
-        console.log();
-        console.log('Then run:');
+  let compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
       }
-      console.log();
-      console.log(`  ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`);
-      console.log();
-    } else if (publicPath !== '/') {
-      // "homepage": "http://mywebsite.com/project"
-      console.log(
-        `The project was built assuming it is hosted at ${chalk.green(publicPath)}.`
-      );
-      console.log(
-        `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
-      );
-      console.log();
-      console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
-      console.log();
-    } else {
-      if (publicUrl) {
-        // "homepage": "http://mywebsite.com"
-        console.log(
-          `The project was built assuming it is hosted at ${chalk.green(publicUrl)}.`
-        );
-        console.log(
-          `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
-        );
-        console.log();
-      } else {
-        // no homepage
-        console.log(
-          'The project was built assuming it is hosted at the server root.'
-        );
-        console.log(
-          `To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.`
-        );
-        console.log('For example, add this to build it for GitHub Pages:');
+      const messages = formatWebpackMessages(stats.toJson({}, true));
+      if (messages.errors.length) {
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (process.env.CI && messages.warnings.length) {
         console.log();
         console.log(
-          `  ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}`
+          chalk.yellow(
+            'Treating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.'
+          )
         );
         console.log();
+        return reject(new Error(messages.warnings.join('\n\n')));
       }
-      const build = path.relative(process.cwd(), paths.appBuild);
-      console.log(`The ${chalk.cyan(build)} folder is ready to be deployed.`);
-      console.log('You may serve it with a static server:');
-      console.log();
-      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 build`);
-      console.log();
-    }
+      return resolve({ stats, previousFileSizes });
+    });
   });
 }