Move dev server config into config file

Author: djgrant

packages/react-scripts/config/webpackDevServer.config.js

@@ -0,0 +1,48 @@
+var config = require('./webpack.config.dev');
+var paths = require('./paths');
+
+var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+var host = process.env.HOST || 'localhost';
+
+module.exports = {
+  // Enable gzip compression of generated files.
+  compress: true,
+  // Silence WebpackDevServer's own logs since they're generally not useful.
+  // It will still show compile warnings and errors with this setting.
+  clientLogLevel: 'none',
+  // By default WebpackDevServer serves physical files from current directory
+  // in addition to all the virtual build products that it serves from memory.
+  // This is confusing because those files won’t automatically be available in
+  // production build folder unless we copy them. However, copying the whole
+  // project directory is dangerous because we may expose sensitive files.
+  // Instead, we establish a convention that only files in `public` directory
+  // get served. Our build script will copy `public` into the `build` folder.
+  // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
+  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+  // Note that we only recommend to use `public` folder as an escape hatch
+  // for files like `favicon.ico`, `manifest.json`, and libraries that are
+  // for some reason broken when imported through Webpack. If you just want to
+  // use an image, put it in `src` and `import` it from JavaScript instead.
+  contentBase: paths.appPublic,
+  // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+  // for the WebpackDevServer client so it can learn when the files were
+  // updated. The WebpackDevServer client is included as an entry point
+  // in the Webpack development configuration. Note that only changes
+  // to CSS are currently hot reloaded. JS changes will refresh the browser.
+  hot: true,
+  // It is important to tell WebpackDevServer to use the same "root" path
+  // as we specified in the config. In development, we always serve from /.
+  publicPath: config.output.publicPath,
+  // WebpackDevServer is noisy by default so we emit custom message instead
+  // by listening to the compiler events with `compiler.plugin` calls above.
+  quiet: true,
+  // Reportedly, this avoids CPU overload on some systems.
+  // https://github.com/facebookincubator/create-react-app/issues/293
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  // Enable HTTPS if the HTTPS environment variable is set to 'true'
+  https: protocol === "https",
+  host: host
+};

packages/react-scripts/scripts/start.js

@@ -20,15 +20,16 @@ require('dotenv').config({silent: true});
 var fs = require('fs');
 var chalk = require('chalk');
 var detect = require('detect-port');
+var WebpackDevServer = require('webpack-dev-server');
 var clearConsole = require('react-dev-utils/clearConsole');
 var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var getProcessForPort = require('react-dev-utils/getProcessForPort');
 var openBrowser = require('react-dev-utils/openBrowser');
 var prompt = require('react-dev-utils/prompt');
 var paths = require('../config/paths');
 var config = require('../config/webpack.config.dev');
+var devServerConfig = require('../config/webpackDevServer.config');
 var createWebpackCompiler = require('../utils/createWebpackCompiler');
-var createWebpackDevServer = require('../utils/createWebpackDevServer');
 var addWebpackMiddleware = require('../utils/addWebpackMiddleware');
 
 var useYarn = fs.existsSync(paths.yarnLockFile);
@@ -59,8 +60,8 @@ function run(port) {
     console.log();
   });
 
-  // Serve webpack assets generated by the compiler over http.
-  var devServer = createWebpackDevServer(compiler, protocol, host);
+  // Serve webpack assets generated by the compiler over a web sever.
+  var devServer = new WebpackDevServer(compiler, devServerConfig);
 
   // Our custom middleware proxies requests to /index.html or a remote API.
   addWebpackMiddleware(devServer);