From 32da910e5578360f2b38d2a7ba0670502e87d372 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 23 Sep 2016 20:53:08 +0100
Subject: [PATCH] Extract some utilities into a separate package (#723)

* Extract some utilities into a separate package

* Add utils dir to `files` in package.json

* Do not create an empty `utils` dir on eject
---
 .../InterpolateHtmlPlugin.js                  |   2 -
 packages/react-dev-utils/README.md            | 180 ++++++++++++++++++
 .../WatchMissingNodeModulesPlugin.js          |  37 ++++
 .../react-dev-utils/checkRequiredFiles.js     |  32 ++++
 packages/react-dev-utils/clearConsole.js      |  18 ++
 .../react-dev-utils/formatWebpackMessages.js  |  67 +++++++
 packages/react-dev-utils/openBrowser.js       |  38 ++++
 .../openChrome.applescript}                   |   2 -
 packages/react-dev-utils/package.json         |  30 +++
 .../utils => react-dev-utils}/prompt.js       |   6 +-
 .../getClientEnvironment.js => config/env.js} |   0
 .../config/webpack.config.dev.js              |   8 +-
 .../config/webpack.config.prod.js             |   6 +-
 packages/react-scripts/package.json           |   5 +-
 packages/react-scripts/scripts/build.js       |   7 +-
 packages/react-scripts/scripts/eject.js       |  14 +-
 packages/react-scripts/scripts/start.js       | 116 +++--------
 packages/react-scripts/scripts/test.js        |   2 +-
 .../utils/WatchMissingNodeModulesPlugin.js    |  35 ----
 .../scripts/utils/checkRequiredFiles.js       |  33 ----
 .../{scripts => }/utils/createJestConfig.js   |   6 +-
 21 files changed, 452 insertions(+), 192 deletions(-)
 rename packages/{react-scripts/scripts/utils => react-dev-utils}/InterpolateHtmlPlugin.js (96%)
 create mode 100644 packages/react-dev-utils/README.md
 create mode 100644 packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
 create mode 100644 packages/react-dev-utils/checkRequiredFiles.js
 create mode 100644 packages/react-dev-utils/clearConsole.js
 create mode 100644 packages/react-dev-utils/formatWebpackMessages.js
 create mode 100644 packages/react-dev-utils/openBrowser.js
 rename packages/{react-scripts/scripts/utils/chrome.applescript => react-dev-utils/openChrome.applescript} (95%)
 create mode 100644 packages/react-dev-utils/package.json
 rename packages/{react-scripts/scripts/utils => react-dev-utils}/prompt.js (92%)
 rename packages/react-scripts/{scripts/utils/getClientEnvironment.js => config/env.js} (100%)
 delete mode 100644 packages/react-scripts/scripts/utils/WatchMissingNodeModulesPlugin.js
 delete mode 100644 packages/react-scripts/scripts/utils/checkRequiredFiles.js
 rename packages/react-scripts/{scripts => }/utils/createJestConfig.js (93%)

diff --git a/packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js
similarity index 96%
rename from packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js
rename to packages/react-dev-utils/InterpolateHtmlPlugin.js
index bcb3a78a775..6ac587b3dc9 100644
--- a/packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js
+++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js
@@ -1,4 +1,3 @@
-// @remove-on-eject-begin
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -7,7 +6,6 @@
  * 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.
  */
-// @remove-on-eject-end
 
 // This Webpack plugin lets us interpolate custom variables into `index.html`.
 // Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })`
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
new file mode 100644
index 00000000000..8c94e372c13
--- /dev/null
+++ b/packages/react-dev-utils/README.md
@@ -0,0 +1,180 @@
+# react-dev-utils
+
+This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app).  
+Please refer to its documentation:
+
+* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
+* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
+
+## Usage in Create React App Projects
+
+These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**
+
+## Usage Outside of Create React App
+
+If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future.
+
+### Entry Points
+
+There is no single entry point. You can only import individual top-level modules.
+
+#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})`
+
+This Webpack plugin lets us interpolate custom variables into `index.html`.  
+It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-dev-plugin) 2.x via its [events](https://github.com/ampedandwired/html-dev-plugin#events).
+
+```js
+var path = require('path');
+var HtmlWebpackPlugin = require('html-dev-plugin');
+var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+
+// Webpack config
+var publicUrl = '/my-custom-url';
+
+module.exports = {
+  output: {
+    // ...
+    publicPath: publicUrl + '/' 
+  },
+  // ...
+  plugins: [
+    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    new InterpolateHtmlPlugin({
+      PUBLIC_URL: publicUrl
+      // You can pass any key-value pairs, this was just an example.
+      // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
+    }),
+    // Generates an `index.html` file with the <script> injected.
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.resolve('public/index.html'),
+    }),
+    // ...
+  ],
+  // ...
+}
+```
+
+#### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
+
+This Webpack plugin ensures `npm install <library>` forces a project rebuild.  
+We’re not sure why this isn't Webpack's default behavior.  
+See [#186](https://github.com/facebookincubator/create-react-app/issues/186) for details.
+
+```js
+var path = require('path');
+var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+
+// Webpack config
+module.exports = {
+  // ...
+  plugins: [
+    // ...
+    // If you require a missing module and then `npm install` it, you still have
+    // to restart the development server for Webpack to discover it. This plugin
+    // makes the discovery automatic so you don't have to restart.
+    // See https://github.com/facebookincubator/create-react-app/issues/186
+    new WatchMissingNodeModulesPlugin(path.resolve('node_modules'))
+  ],
+  // ...
+}
+```
+
+#### `checkRequiredFiles(files: Array<string>): boolean`
+
+Makes sure that all passed files exist.  
+Filenames are expected to be absolute.  
+If a file is not found, prints a warning message and returns `false`.
+
+```js
+var path = require('path');
+var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+
+if (!checkRequiredFiles([
+  path.resolve('public/index.html'),
+  path.resolve('src/index.js')
+])) {
+  process.exit(1);
+}
+```
+
+#### `clearConsole(): void`
+
+Clears the console, hopefully in a cross-platform way.
+
+```js
+var clearConsole = require('react-dev-utils/clearConsole');
+
+clearConsole();
+console.log('Just cleared the screen!');
+```
+
+#### `formatWebpackMessages(stats: WebpackStats): {errors: Array<string>, warnings: Array<string>}`
+
+Extracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object.
+
+```js
+var webpack = require('webpack');
+var config = require('../config/webpack.config.dev');
+
+var compiler = webpack(config);
+
+compiler.plugin('invalid', function() {
+  console.log('Compiling...');
+});
+
+compiler.plugin('done', function(stats) {
+  var messages = formatWebpackMessages(stats);
+  if (!messages.errors.length && !messages.warnings.length) {
+    console.log('Compiled successfully!');
+  }
+  if (messages.errors.length) {
+    console.log('Failed to compile.');
+    messages.errors.forEach(console.log);
+    return;
+  }
+  if (messages.warnings.length) {
+    console.log('Compiled with warnings.');
+    messages.warnings.forEach(console.log);
+  }
+});
+```
+
+#### `openBrowser(url: string): boolean`
+
+Attempts to open the browser with a given URL.  
+On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.  
+Otherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior.
+
+
+```js
+var path = require('path');
+var openBrowser = require('react-dev-utils/openBrowser');
+
+if (openBrowser('http://localhost:3000')) {
+  console.log('The browser tab has been opened!');
+}
+```
+
+#### `prompt`
+
+This function displays a console prompt to the user.
+
+By convention, "no" should be the conservative choice.  
+If you mistype the answer, we'll always take it as a "no".  
+You can control the behavior on `<Enter>` with `isYesDefault`.
+
+```js
+var prompt = require('react-dev-utils/prompt');
+prompt(
+  'Are you sure you want to eat all the candy?',
+  false
+).then(shouldEat => {
+  if (shouldEat) {
+    console.log('You have successfully consumed all the candy.');
+  } else {
+    console.log('Phew, candy is still available!');
+  }
+});
+```
diff --git a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
new file mode 100644
index 00000000000..91b089c05ef
--- /dev/null
+++ b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
+// We’re not sure why this isn't Webpack's default behavior.
+// See https://github.com/facebookincubator/create-react-app/issues/186.
+
+'use strict';
+
+class WatchMissingNodeModulesPlugin {
+  constructor(nodeModulesPath) {
+    this.nodeModulesPath = nodeModulesPath;
+  }
+
+  apply(compiler) {
+    compiler.plugin('emit', (compilation, callback) => {
+      var missingDeps = compilation.missingDependencies;
+      var nodeModulesPath = this.nodeModulesPath;
+
+      // If any missing files are expected to appear in node_modules...
+      if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
+        // ...tell webpack to watch node_modules recursively until they appear.
+        compilation.contextDependencies.push(nodeModulesPath);
+      }
+
+      callback();
+    });
+  }
+}
+
+module.exports = WatchMissingNodeModulesPlugin;
diff --git a/packages/react-dev-utils/checkRequiredFiles.js b/packages/react-dev-utils/checkRequiredFiles.js
new file mode 100644
index 00000000000..69233db4837
--- /dev/null
+++ b/packages/react-dev-utils/checkRequiredFiles.js
@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+var fs = require('fs');
+var path = require('path');
+var chalk = require('chalk');
+
+function checkRequiredFiles(files) {
+  var currentFilePath;
+  try {
+    files.forEach(filePath => {
+      currentFilePath = filePath;
+      fs.accessSync(filePath, fs.F_OK);
+    });
+    return true;
+  } catch (err) {
+    var dirName = path.dirname(currentFilePath);
+    var fileName = path.basename(currentFilePath);
+    console.log(chalk.red('Could not find a required file.'));
+    console.log(chalk.red('  Name: ') + chalk.cyan(fileName));
+    console.log(chalk.red('  Searched in: ') + chalk.cyan(dirName));
+    return false;
+  }
+}
+
+module.exports = checkRequiredFiles;
diff --git a/packages/react-dev-utils/clearConsole.js b/packages/react-dev-utils/clearConsole.js
new file mode 100644
index 00000000000..e37af65543a
--- /dev/null
+++ b/packages/react-dev-utils/clearConsole.js
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+var isFirstClear = true;
+function clearConsole() {
+  // On first run, clear completely so it doesn't show half screen on Windows.
+  // On next runs, use a different sequence that properly scrolls back.
+  process.stdout.write(isFirstClear ? '\x1bc' : '\x1b[2J\x1b[0f');
+  isFirstClear = false;
+}
+
+module.exports = clearConsole;
diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js
new file mode 100644
index 00000000000..4fda66d4b39
--- /dev/null
+++ b/packages/react-dev-utils/formatWebpackMessages.js
@@ -0,0 +1,67 @@
+/**
+ * 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.
+ */
+
+// Some custom utilities to prettify Webpack output.
+// This is a little hacky.
+// It would be easier if webpack provided a rich error object.
+var friendlySyntaxErrorLabel = 'Syntax error:';
+function isLikelyASyntaxError(message) {
+  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
+}
+function formatMessage(message) {
+  return message
+    // Make some common errors shorter:
+    .replace(
+      // Babel syntax error
+      'Module build failed: SyntaxError:',
+      friendlySyntaxErrorLabel
+    )
+    .replace(
+      // Webpack file not found error
+      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
+      'Module not found:'
+    )
+    // Internal stacks are generally useless so we strip them
+    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
+    // Webpack loader names obscure CSS filenames
+    .replace('./~/css-loader!./~/postcss-loader!', '');
+}
+
+function formatWebpackMessages(stats) {
+  var hasErrors = stats.hasErrors();
+  var hasWarnings = stats.hasWarnings();
+  if (!hasErrors && !hasWarnings) {
+    return {
+      errors: [],
+      warnings: []
+    };
+  }
+  // We use stats.toJson({}, true) to make output more compact and readable:
+  // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
+  var json = stats.toJson({}, true);
+  var formattedErrors = json.errors.map(message =>
+    'Error in ' + formatMessage(message)
+  );
+  var formattedWarnings = json.warnings.map(message =>
+    'Warning in ' + formatMessage(message)
+  );
+  var result = {
+    errors: formattedErrors,
+    warnings: formattedWarnings
+  };
+  if (result.errors.some(isLikelyASyntaxError)) {
+    // If there are any syntax errors, show just them.
+    // This prevents a confusing ESLint parsing error
+    // preceding a much more useful Babel syntax error.
+    result.errors = result.errors.filter(isLikelyASyntaxError);
+  }
+  return result;
+}
+
+module.exports = formatWebpackMessages;
diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js
new file mode 100644
index 00000000000..5d969ac1b03
--- /dev/null
+++ b/packages/react-dev-utils/openBrowser.js
@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+var execSync = require('child_process').execSync;
+var opn = require('opn');
+
+function openBrowser(url) {
+  if (process.platform === 'darwin') {
+    try {
+      // Try our best to reuse existing tab
+      // on OS X Google Chrome with AppleScript
+      execSync('ps cax | grep "Google Chrome"');
+      execSync(
+        'osascript chrome.applescript ' + url,
+        {cwd: __dirname, stdio: 'ignore'}
+      );
+      return true;
+    } catch (err) {
+      // Ignore errors.
+    }
+  }
+  // Fallback to opn
+  // (It will always open new tab)
+  try {
+    opn(url);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+module.exports = openBrowser;
diff --git a/packages/react-scripts/scripts/utils/chrome.applescript b/packages/react-dev-utils/openChrome.applescript
similarity index 95%
rename from packages/react-scripts/scripts/utils/chrome.applescript
rename to packages/react-dev-utils/openChrome.applescript
index 07d229652d8..4dfec4a2657 100644
--- a/packages/react-scripts/scripts/utils/chrome.applescript
+++ b/packages/react-dev-utils/openChrome.applescript
@@ -1,4 +1,3 @@
--- @remove-on-eject-begin
 (*
 Copyright (c) 2015-present, Facebook, Inc.
 All rights reserved.
@@ -7,7 +6,6 @@ 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.
 *)
--- @remove-on-eject-end
 
 on run argv
   set theURL to item 1 of argv
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
new file mode 100644
index 00000000000..515515f70fd
--- /dev/null
+++ b/packages/react-dev-utils/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-dev-utils",
+  "version": "0.1.0",
+  "description": "Webpack utilities used by Create React App",
+  "repository": "facebookincubator/create-react-app",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "engines": {
+    "node": ">=4"
+  },
+  "files": [
+    "clearConsole.js",
+    "checkRequiredFiles.js",
+    "formatWebpackMessages.js",
+    "InterpolateHtmlPlugin.js",
+    "openChrome.applescript",
+    "openBrowser.js",
+    "prompt.js",
+    "WatchMissingNodeModulesPlugin.js"
+  ],
+  "dependencies": {
+    "chalk": "1.1.3",
+    "opn": "4.0.2"
+  },
+  "peerDependencies": {
+    "webpack": "^1.13.2"
+  }
+}
diff --git a/packages/react-scripts/scripts/utils/prompt.js b/packages/react-dev-utils/prompt.js
similarity index 92%
rename from packages/react-scripts/scripts/utils/prompt.js
rename to packages/react-dev-utils/prompt.js
index ed32c750612..4b1faf9bac8 100644
--- a/packages/react-scripts/scripts/utils/prompt.js
+++ b/packages/react-dev-utils/prompt.js
@@ -1,4 +1,3 @@
-// @remove-on-eject-begin
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -7,14 +6,13 @@
  * 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.
  */
-// @remove-on-eject-end
 
 var rl = require('readline');
 
 // Convention: "no" should be the conservative choice.
 // If you mistype the answer, we'll always take it as a "no".
 // You can control the behavior on <Enter> with `isYesDefault`.
-module.exports = function (question, isYesDefault) {
+function prompt(question, isYesDefault) {
   if (typeof isYesDefault !== 'boolean') {
     throw new Error('Provide explicit boolean isYesDefault as second argument.');
   }
@@ -40,3 +38,5 @@ module.exports = function (question, isYesDefault) {
     });
   });
 };
+
+module.exports = prompt;
diff --git a/packages/react-scripts/scripts/utils/getClientEnvironment.js b/packages/react-scripts/config/env.js
similarity index 100%
rename from packages/react-scripts/scripts/utils/getClientEnvironment.js
rename to packages/react-scripts/config/env.js
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index d2d4009ac99..0c3e336e781 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -15,9 +15,9 @@ var webpack = require('webpack');
 var findCacheDir = require('find-cache-dir');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin');
-var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
-var getClientEnvironment = require('../scripts/utils/getClientEnvironment');
+var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var getClientEnvironment = require('./env');
 var paths = require('./paths');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
@@ -204,7 +204,7 @@ module.exports = {
       template: paths.appHtml,
     }),
     // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }.
+    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
     new webpack.DefinePlugin(env),
     // This is necessary to emit hot updates (currently CSS only):
     new webpack.HotModuleReplacementPlugin(),
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index a1e3e831bc9..6549b4d8d1d 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -14,10 +14,10 @@ var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 var url = require('url');
 var paths = require('./paths');
-var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin');
-var getClientEnvironment = require('../scripts/utils/getClientEnvironment');
+var getClientEnvironment = require('./env');
 
 function ensureSlash(path, needsSlash) {
   var hasSlash = path.endsWith('/');
@@ -227,7 +227,7 @@ module.exports = {
       }
     }),
     // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }.
+    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.
     // Otherwise React will be compiled in the very slow development mode.
     new webpack.DefinePlugin(env),
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index e304f6e31a1..4e17335e51b 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -16,7 +16,8 @@
     "bin",
     "config",
     "scripts",
-    "template"
+    "template",
+    "utils"
   ],
   "bin": {
     "react-scripts": "./bin/react-scripts.js"
@@ -53,10 +54,10 @@
     "jest": "15.1.1",
     "json-loader": "0.5.4",
     "object-assign": "4.1.0",
-    "opn": "4.0.2",
     "path-exists": "2.1.0",
     "postcss-loader": "0.13.0",
     "promise": "7.1.1",
+    "react-dev-utils": "0.1.0",
     "recursive-readdir": "2.0.0",
     "rimraf": "2.5.4",
     "strip-ansi": "3.0.1",
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index f8c3dda4faa..228658de79a 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -27,11 +27,14 @@ var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
 var paths = require('../config/paths');
-var checkRequiredFiles = require('./utils/checkRequiredFiles');
+var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var recursive = require('recursive-readdir');
 var stripAnsi = require('strip-ansi');
 
-checkRequiredFiles();
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
 
 // Input: /User/dan/app/build/static/js/main.82be8.js
 // Output: /static/js/main.js
diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js
index 7723a277fd2..22c73ead726 100644
--- a/packages/react-scripts/scripts/eject.js
+++ b/packages/react-scripts/scripts/eject.js
@@ -7,10 +7,10 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-var createJestConfig = require('./utils/createJestConfig');
+var createJestConfig = require('../utils/createJestConfig');
 var fs = require('fs');
 var path = require('path');
-var prompt = require('./utils/prompt');
+var prompt = require('react-dev-utils/prompt');
 var rimrafSync = require('rimraf').sync;
 var spawnSync = require('cross-spawn').sync;
 
@@ -31,6 +31,7 @@ prompt(
   var files = [
     '.babelrc',
     '.eslintrc',
+    path.join('config', 'env.js'),
     path.join('config', 'paths.js'),
     path.join('config', 'polyfills.js'),
     path.join('config', 'webpack.config.dev.js'),
@@ -39,13 +40,7 @@ prompt(
     path.join('config', 'jest', 'FileStub.js'),
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
-    path.join('scripts', 'test.js'),
-    path.join('scripts', 'utils', 'checkRequiredFiles.js'),
-    path.join('scripts', 'utils', 'chrome.applescript'),
-    path.join('scripts', 'utils', 'getClientEnvironment.js'),
-    path.join('scripts', 'utils', 'InterpolateHtmlPlugin.js'),
-    path.join('scripts', 'utils', 'prompt.js'),
-    path.join('scripts', 'utils', 'WatchMissingNodeModulesPlugin.js')
+    path.join('scripts', 'test.js')
   ];
 
   // Ensure that the app folder is clean and we won't override any files
@@ -65,7 +60,6 @@ prompt(
   fs.mkdirSync(path.join(appPath, 'config'));
   fs.mkdirSync(path.join(appPath, 'config', 'jest'));
   fs.mkdirSync(path.join(appPath, 'scripts'));
-  fs.mkdirSync(path.join(appPath, 'scripts', 'utils'));
 
   files.forEach(function(file) {
     console.log('Copying ' + file + ' to ' + appPath);
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 44e37995ec7..c87b64537c2 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -17,20 +17,25 @@ process.env.NODE_ENV = 'development';
 // https://github.com/motdotla/dotenv
 require('dotenv').config({silent: true});
 
-var path = require('path');
 var chalk = require('chalk');
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
 var historyApiFallback = require('connect-history-api-fallback');
 var httpProxyMiddleware = require('http-proxy-middleware');
-var execSync = require('child_process').execSync;
-var opn = require('opn');
 var detect = require('detect-port');
-var checkRequiredFiles = require('./utils/checkRequiredFiles');
-var prompt = require('./utils/prompt');
+var clearConsole = require('react-dev-utils/clearConsole');
+var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+var openBrowser = require('react-dev-utils/openBrowser');
+var prompt = require('react-dev-utils/prompt');
 var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
 
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
 var compiler;
@@ -49,40 +54,6 @@ if (isSmokeTest) {
   };
 }
 
-// Some custom utilities to prettify Webpack output.
-// This is a little hacky.
-// It would be easier if webpack provided a rich error object.
-var friendlySyntaxErrorLabel = 'Syntax error:';
-function isLikelyASyntaxError(message) {
-  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
-}
-function formatMessage(message) {
-  return message
-    // Make some common errors shorter:
-    .replace(
-      // Babel syntax error
-      'Module build failed: SyntaxError:',
-      friendlySyntaxErrorLabel
-    )
-    .replace(
-      // Webpack file not found error
-      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
-      'Module not found:'
-    )
-    // Internal stacks are generally useless so we strip them
-    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
-    // Webpack loader names obscure CSS filenames
-    .replace('./~/css-loader!./~/postcss-loader!', '');
-}
-
-var isFirstClear = true;
-function clearConsole() {
-  // On first run, clear completely so it doesn't show half screen on Windows.
-  // On next runs, use a different sequence that properly scrolls back.
-  process.stdout.write(isFirstClear ? '\x1bc' : '\x1b[2J\x1b[0f');
-  isFirstClear = false;
-}
-
 function setupCompiler(host, port, protocol) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
@@ -101,9 +72,12 @@ function setupCompiler(host, port, protocol) {
   // Whether or not you have warnings or errors, you will get this event.
   compiler.plugin('done', function(stats) {
     clearConsole();
-    var hasErrors = stats.hasErrors();
-    var hasWarnings = stats.hasWarnings();
-    if (!hasErrors && !hasWarnings) {
+
+    // We have switched off the default Webpack output in WebpackDevServer
+    // options so we are going to "massage" the warnings and errors and present
+    // them in a readable focused way.
+    var messages = formatWebpackMessages(stats);
+    if (!messages.errors.length && !messages.warnings.length) {
       console.log(chalk.green('Compiled successfully!'));
       console.log();
       console.log('The app is running at:');
@@ -113,41 +87,24 @@ function setupCompiler(host, port, protocol) {
       console.log('Note that the development build is not optimized.');
       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
       console.log();
-      return;
     }
 
-    // We have switched off the default Webpack output in WebpackDevServer
-    // options so we are going to "massage" the warnings and errors and present
-    // them in a readable focused way.
-    // We use stats.toJson({}, true) to make output more compact and readable:
-    // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
-    var json = stats.toJson({}, true);
-    var formattedErrors = json.errors.map(message =>
-      'Error in ' + formatMessage(message)
-    );
-    var formattedWarnings = json.warnings.map(message =>
-      'Warning in ' + formatMessage(message)
-    );
-    if (hasErrors) {
+    // If errors exist, only show errors.
+    if (messages.errors.length) {
       console.log(chalk.red('Failed to compile.'));
       console.log();
-      if (formattedErrors.some(isLikelyASyntaxError)) {
-        // If there are any syntax errors, show just them.
-        // This prevents a confusing ESLint parsing error
-        // preceding a much more useful Babel syntax error.
-        formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
-      }
-      formattedErrors.forEach(message => {
+      messages.errors.forEach(message => {
         console.log(message);
         console.log();
       });
-      // If errors exist, ignore warnings.
       return;
     }
-    if (hasWarnings) {
+
+    // Show warnings if no errors were found.
+    if (messages.warnings.length) {
       console.log(chalk.yellow('Compiled with warnings.'));
       console.log();
-      formattedWarnings.forEach(message => {
+      messages.warnings.forEach(message => {
         console.log(message);
         console.log();
       });
@@ -159,30 +116,6 @@ function setupCompiler(host, port, protocol) {
   });
 }
 
-function openBrowser(host, port, protocol) {
-  if (process.platform === 'darwin') {
-    try {
-      // Try our best to reuse existing tab
-      // on OS X Google Chrome with AppleScript
-      execSync('ps cax | grep "Google Chrome"');
-      execSync(
-        'osascript chrome.applescript ' + protocol + '://' + host + ':' + port + '/',
-        {cwd: path.join(__dirname, 'utils'), stdio: 'ignore'}
-      );
-      return;
-    } catch (err) {
-      // Ignore errors.
-    }
-  }
-  // Fallback to opn
-  // (It will always open new tab)
-  try {
-    opn(protocol + '://' + host + ':' + port + '/');
-  } catch (err) {
-    // Ignore errors.
-  }
-}
-
 // We need to provide a custom onError function for httpProxyMiddleware.
 // It allows us to log custom error messages on the console.
 function onProxyError(proxy) {
@@ -314,14 +247,13 @@ function runDevServer(host, port, protocol) {
     clearConsole();
     console.log(chalk.cyan('Starting the development server...'));
     console.log();
-    openBrowser(host, port, protocol);
+    openBrowser(protocol + '://' + host + ':' + port + '/');
   });
 }
 
 function run(port) {
   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
   var host = process.env.HOST || 'localhost';
-  checkRequiredFiles();
   setupCompiler(host, port, protocol);
   runDevServer(host, port, protocol);
 }
diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js
index 5fafb458b5a..0401c960600 100644
--- a/packages/react-scripts/scripts/test.js
+++ b/packages/react-scripts/scripts/test.js
@@ -28,7 +28,7 @@ if (!process.env.CI) {
 
 // @remove-on-eject-begin
 // This is not necessary after eject because we embed config into package.json.
-const createJestConfig = require('./utils/createJestConfig');
+const createJestConfig = require('../utils/createJestConfig');
 const path = require('path');
 const paths = require('../config/paths');
 argv.push('--config', JSON.stringify(createJestConfig(
diff --git a/packages/react-scripts/scripts/utils/WatchMissingNodeModulesPlugin.js b/packages/react-scripts/scripts/utils/WatchMissingNodeModulesPlugin.js
deleted file mode 100644
index 45c3616d2e1..00000000000
--- a/packages/react-scripts/scripts/utils/WatchMissingNodeModulesPlugin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-// @remove-on-eject-begin
-/**
- * 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.
- */
-// @remove-on-eject-end
-
-// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
-// We’re not sure why this isn't Webpack's default behavior.
-// See https://github.com/facebookincubator/create-react-app/issues/186.
-
-function WatchMissingNodeModulesPlugin(nodeModulesPath) {
-  this.nodeModulesPath = nodeModulesPath;
-}
-
-WatchMissingNodeModulesPlugin.prototype.apply = function (compiler) {
-  compiler.plugin('emit', (compilation, callback) => {
-    var missingDeps = compilation.missingDependencies;
-    var nodeModulesPath = this.nodeModulesPath;
-
-    // If any missing files are expected to appear in node_modules...
-    if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
-      // ...tell webpack to watch node_modules recursively until they appear.
-      compilation.contextDependencies.push(nodeModulesPath);
-    }
-
-    callback();
-  });
-}
-
-module.exports = WatchMissingNodeModulesPlugin;
diff --git a/packages/react-scripts/scripts/utils/checkRequiredFiles.js b/packages/react-scripts/scripts/utils/checkRequiredFiles.js
deleted file mode 100644
index 8110eb01cdb..00000000000
--- a/packages/react-scripts/scripts/utils/checkRequiredFiles.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// @remove-on-eject-begin
-/**
- * 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.
- */
-// @remove-on-eject-end
-
-const fs = require('fs');
-const path = require('path');
-const chalk = require('chalk');
-const paths = require('../../config/paths');
-
-function checkRequiredFiles() {
-  const filesPathToCheck = [paths.appHtml, paths.appIndexJs];
-  filesPathToCheck.forEach(filePath => {
-    try {
-      fs.accessSync(filePath, fs.F_OK);
-    } catch (err) {
-      const dirName = path.dirname(filePath);
-      const fileName = path.basename(filePath);
-      console.log(chalk.red('Could not find a required file.'));
-      console.log(chalk.red('  Name: ') + chalk.cyan(fileName));
-      console.log(chalk.red('  Searched in: ') + chalk.cyan(dirName));
-      process.exit(1);
-    }
-  });
-}
-
-module.exports = checkRequiredFiles;
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js
similarity index 93%
rename from packages/react-scripts/scripts/utils/createJestConfig.js
rename to packages/react-scripts/utils/createJestConfig.js
index d20a221ab40..41409abd239 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/utils/createJestConfig.js
@@ -1,4 +1,3 @@
-// @remove-on-eject-begin
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -7,10 +6,11 @@
  * 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.
  */
-// @remove-on-eject-end
+
+// Note: this file does not exist after ejecting.
 
 const pathExists = require('path-exists');
-const paths = require('../../config/paths');
+const paths = require('../config/paths');
 
 module.exports = (resolve, rootDir, isEjecting) => {
   const setupFiles = [resolve('config/polyfills.js')];