Add missed changes

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

@@ -1,7 +1,7 @@
 var config = require('./webpack.config.dev');
 var paths = require('./paths');
 
-var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+var protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 var host = process.env.HOST || 'localhost';
 
 module.exports = {
@@ -17,14 +17,16 @@ module.exports = {
   // 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%:
+  // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
   // <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,
+  // By default files from `contentBase` will not trigger a page reload.
+  watchContentBase: true,
   // 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
@@ -43,6 +45,7 @@ module.exports = {
     ignored: /node_modules/
   },
   // Enable HTTPS if the HTTPS environment variable is set to 'true'
-  https: protocol === "https",
-  host: host
+  https: protocol === 'https',
+  host: host,
+  overlay: false,
 };

packages/react-scripts/scripts/eject.js

@@ -49,7 +49,7 @@ prompt(
     'config',
     'config/jest',
     'scripts',
-    'scripts/utils'
+    'scripts/utils',
   ];
 
   // Make shallow array of files paths
@@ -75,24 +75,21 @@ prompt(
   });
 
   files.forEach(function(file) {
-    var content = fs.readFileSync(file, 'utf8')
+    var content = fs.readFileSync(file, 'utf8');
 
     // Skip flagged files
     if (content.match(/\/\/ @remove-file-on-eject/)) {
       return;
     }
-
     content = content
       // Remove dead code from .js files on eject
       .replace(/\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, '')
       // Remove dead code from .applescript files on eject
       .replace(/-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, '')
       .trim() + '\n';
-
-    console.log('  Adding ' + cyan(file.replace(ownPath, '')) + ' to the project');
-    fs.writeFileSync(file.replace(ownPath, appPath), content);
+    console.log('  Adding ' + cyan(file) + ' to the project');
+    fs.writeFileSync(path.join(appPath, file), content);
   });
-
   console.log();
 
   var ownPackage = require(path.join(ownPath, 'package.json'));

packages/react-scripts/scripts/start.js

@@ -45,7 +45,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 
 function run(port) {
-  var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+  var protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
   var host = process.env.HOST || 'localhost';
 
   // Create a webpack compiler that is configured with custom messages.

packages/react-scripts/scripts/utils/addWebpackMiddleware.js

@@ -3,7 +3,33 @@ var historyApiFallback = require('connect-history-api-fallback');
 var httpProxyMiddleware = require('http-proxy-middleware');
 var paths = require('../../config/paths');
 
-module.exports = function addMiddleware(devServer) {
+// We need to provide a custom onError function for httpProxyMiddleware.
+// It allows us to log custom error messages on the console.
+function onProxyError(proxy) {
+  return function(err, req, res){
+    var host = req.headers && req.headers.host;
+    console.log(
+      chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
+      ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
+    );
+    console.log(
+      'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
+      chalk.cyan(err.code) + ').'
+    );
+    console.log();
+
+    // And immediately send the proper error response to the client.
+    // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
+    if (res.writeHead && !res.headersSent) {
+        res.writeHead(500);
+    }
+    res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
+      host + ' to ' + proxy + ' (' + err.code + ').'
+    );
+  }
+}
+
+module.exports = function addWebpackMiddleware(devServer) {
   // `proxy` lets you to specify a fallback server during development.
   // Every unrecognized request will be forwarded to it.
   var proxy = require(paths.appPackageJson).proxy;
@@ -54,7 +80,8 @@ module.exports = function addMiddleware(devServer) {
       onError: onProxyError(proxy),
       secure: false,
       changeOrigin: true,
-      ws: true
+      ws: true,
+      xfwd: true
     });
     devServer.use(mayProxy, hpm);
 
@@ -68,29 +95,3 @@ module.exports = function addMiddleware(devServer) {
   // It may be /index.html, so let the dev server try serving it again.
   devServer.use(devServer.middleware);
 };
-
-// We need to provide a custom onError function for httpProxyMiddleware.
-// It allows us to log custom error messages on the console.
-function onProxyError(proxy) {
-  return function(err, req, res){
-    var host = req.headers && req.headers.host;
-    console.log(
-      chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
-      ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
-    );
-    console.log(
-      'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
-      chalk.cyan(err.code) + ').'
-    );
-    console.log();
-
-    // And immediately send the proper error response to the client.
-    // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
-    if (res.writeHead && !res.headersSent) {
-        res.writeHead(500);
-    }
-    res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
-      host + ' to ' + proxy + ' (' + err.code + ').'
-    );
-  }
-}

packages/react-scripts/scripts/utils/createWebpackCompiler.js

@@ -19,7 +19,7 @@ if (isSmokeTest) {
   };
 }
 
-module.exports = function createCompiler(config, onReadyCallack) {
+module.exports = function createCompiler(config, onReadyCallback) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
   try {
@@ -64,8 +64,8 @@ module.exports = function createCompiler(config, onReadyCallack) {
     }
 
     if (showInstructions) {
-      if (typeof onReadyCallack === 'function') {
-        onReadyCallack();
+      if (typeof onReadyCallback === 'function') {
+        onReadyCallback();
       }
       isFirstCompile = false;
     }
@@ -97,4 +97,4 @@ module.exports = function createCompiler(config, onReadyCallack) {
   });
 
   return compiler;
-}
+};