From 38bc01c077fb6ac9cce45bb6ef2c201664f53c35 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 3 Mar 2017 16:39:21 -0500 Subject: [PATCH] Add missed changes --- .../config/webpackDevServer.config.js | 11 ++-- packages/react-scripts/scripts/eject.js | 11 ++-- packages/react-scripts/scripts/start.js | 2 +- .../scripts/utils/addWebpackMiddleware.js | 57 ++++++++++--------- .../scripts/utils/createWebpackCompiler.js | 8 +-- 5 files changed, 45 insertions(+), 44 deletions(-) diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 06ac14c467c..4d65567bd7d 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/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,7 +17,7 @@ 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%: // // 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 @@ -25,6 +25,8 @@ module.exports = { // 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, }; diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 13f6a650701..5d2b7af0dfc 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/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')); diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 652e3e339ac..1488fcce25b 100644 --- a/packages/react-scripts/scripts/start.js +++ b/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. diff --git a/packages/react-scripts/scripts/utils/addWebpackMiddleware.js b/packages/react-scripts/scripts/utils/addWebpackMiddleware.js index 1eccc95ef86..16bf40c3709 100644 --- a/packages/react-scripts/scripts/utils/addWebpackMiddleware.js +++ b/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 + ').' - ); - } -} diff --git a/packages/react-scripts/scripts/utils/createWebpackCompiler.js b/packages/react-scripts/scripts/utils/createWebpackCompiler.js index 516755b7611..155e6f17089 100644 --- a/packages/react-scripts/scripts/utils/createWebpackCompiler.js +++ b/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; -} +};