From 1c2ab8c797db1aed0f0d988acc48f8a9bd454373 Mon Sep 17 00:00:00 2001 From: Luke Barbuto Date: Wed, 30 Nov 2016 12:46:08 -0800 Subject: [PATCH 01/16] Rename scripts package and update urls for Zeal --- packages/react-scripts/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 58bb4ab1d06..51eb27f771e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts", - "version": "0.7.0", + "name": "@zeal/react-scripts", + "version": "0.1.0", "description": "Configuration and scripts for Create React App.", - "repository": "facebookincubator/create-react-app", + "repository": "codingzeal/create-react-app", "license": "BSD-3-Clause", "engines": { "node": ">=4" }, "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" + "url": "https://github.com/codingzeal/create-react-app/issues" }, "files": [ ".babelrc", From 6727d4a830d3c59b7d47b64c0b6fc726c53273f8 Mon Sep 17 00:00:00 2001 From: Luke Barbuto Date: Wed, 30 Nov 2016 12:46:24 -0800 Subject: [PATCH 02/16] Fix reloading when served from a custom backend Before these changes, when the bundle was served from a custom web server, requests for updates were being sent to the port seen on window rather than what the webpack dev server was running on. --- .../config/webpack.config.dev.js | 24 ++++++++++++++----- packages/react-scripts/scripts/start.js | 12 ++++++++-- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d875c63e8d9..0031188fac2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -22,7 +22,14 @@ var paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. -var publicPath = '/'; +// ZEAL: Setting publicPath in the start script and passing it in. Since we are +// mounting this app on various backends, the dev server port will be different +// from the port on window location. Because of this, we need the full public +// path, not just the relative path. Elements of the full path can be dynamic, +// but are all known in the start script, making it the best place to define the +// public path. +// var publicPath = '/'; + // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. @@ -33,7 +40,9 @@ var env = getClientEnvironment(publicUrl); // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. -module.exports = { +// ZEAL: Converted to a function to allow injecting the publicPath. +module.exports = function(publicPath) { + return { // This makes the bundle appear split into separate modules in the devtools. // We don't use source maps here because they can be confusing: // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875 @@ -51,9 +60,12 @@ module.exports = { // Note: instead of the default WebpackDevServer client, we use a custom one // to bring better experience for Create React App users. You can replace // the line below with these two lines if you prefer the stock client: - // require.resolve('webpack-dev-server/client') + '?/', - // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), + // ZEAL: Opted to use the default client because the custom one gets the + // port off window location, which will be different from the dev server + // when the app is served from a different back end. + require.resolve('webpack-dev-server/client') + '?' + publicPath, + require.resolve('webpack/hot/dev-server'), + // require.resolve('react-dev-utils/webpackHotDevClient'), // We ship a few polyfills by default: require.resolve('./polyfills'), // Finally, this is your app's code: @@ -221,4 +233,4 @@ module.exports = { net: 'empty', tls: 'empty' } -}; +}}; diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 8723c281637..3ce30216078 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -57,7 +57,9 @@ if (isSmokeTest) { 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. - compiler = webpack(config, handleCompile); + // ZEAL: Injecting the publicPath into the config since it needs to be fully + // qualified now. More notes in the config regarding publicPath. + compiler = webpack(config(publicPath(host, port, protocol)), handleCompile); // "invalid" event fires when you have changed a file, and Webpack is // recompiling a bundle. WebpackDevServer takes care to pause serving the @@ -221,7 +223,9 @@ function runDevServer(host, port, protocol) { 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, + // ZEAL: The public path is now being injected into the config with this + // function, so no need to reach into the config to get it anymore. + publicPath: publicPath(host, port, protocol), // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.plugin` calls above. quiet: true, @@ -251,6 +255,10 @@ function runDevServer(host, port, protocol) { }); } +function publicPath(host, port, protocol) { + return protocol + '://' + host + ':' + port + '/' +} + function run(port) { var protocol = process.env.HTTPS === 'true' ? "https" : "http"; var host = process.env.HOST || 'localhost'; From a065ef110fbba05ed0d4175489b76760294fe0de Mon Sep 17 00:00:00 2001 From: Byron Matto Date: Wed, 30 Nov 2016 12:46:46 -0800 Subject: [PATCH 03/16] Add support for css modules --- packages/react-scripts/config/webpack.config.dev.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 0031188fac2..d20d42587a1 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -147,9 +147,10 @@ module.exports = function(publicPath) { // "style" loader turns CSS into JS modules that inject