From 9b7d2a765380b6cd697ade338c5a0c685b7f2ca4 Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Fri, 25 Jan 2019 17:22:55 -0800 Subject: [PATCH 1/9] Add example "homepage" (to be removed later) --- packages/react-scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index d33bd46a236..869ed8d1e1f 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -3,6 +3,7 @@ "version": "2.1.8", "description": "Configuration and scripts for Create React App.", "repository": "facebook/create-react-app", + "homepage": "http://localhost:3000/whatever", "license": "MIT", "engines": { "node": ">=8.10" From 115135b1fb90f25c13e11a1974f42287158f138f Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Fri, 25 Jan 2019 17:33:57 -0800 Subject: [PATCH 2/9] Set publicPath to paths.servedPath for all environments --- packages/react-scripts/config/webpack.config.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index f6c0e7a237a..6a164ec73c2 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -59,9 +59,8 @@ module.exports = function(webpackEnv) { // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. // In development, we always serve from the root. This makes config easier. - const publicPath = isEnvProduction - ? paths.servedPath - : isEnvDevelopment && '/'; + const publicPath = paths.servedPath; + // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. const shouldUseRelativeAssetPaths = publicPath === './'; From 500eee7db27fd1f4fe9e9d5cb644a21a5c02ddfa Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Fri, 25 Jan 2019 17:34:22 -0800 Subject: [PATCH 3/9] Add note about bug with webpackDevServer + html plugin --- packages/react-scripts/config/webpackDevServer.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 60a9713df33..2a2128e2115 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -68,6 +68,10 @@ module.exports = function(proxy, allowedHost) { 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 /. + + // ❌ /whatever/static/js/bundle.js doesn't work + // ✅ /static/js/bundle.js still does + // 🤔 Changing this to /whatever prevents %PUBLIC_URL% from being replaced!? publicPath: '/', // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.hooks[...].tap` calls above. From 19b42181bc919a6042eb25d9661e375a6b0054c2 Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Fri, 25 Jan 2019 17:49:20 -0800 Subject: [PATCH 4/9] Use publicUrl for all environments --- packages/react-scripts/config/webpack.config.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 6a164ec73c2..652caa52191 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -68,9 +68,8 @@ module.exports = function(webpackEnv) { // `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_URL%/xyz looks better than %PUBLIC_URL%xyz. - const publicUrl = isEnvProduction - ? publicPath.slice(0, -1) - : isEnvDevelopment && ''; + const publicUrl = publicPath.slice(0, -1); + // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); From 2dacd86066d1f5a698ae9ffd156c71fb17f7f427 Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Mon, 28 Jan 2019 16:39:38 -0800 Subject: [PATCH 5/9] webpackDevServer uses paths.servedPath --- packages/react-scripts/config/webpackDevServer.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 2a2128e2115..6b2a9692601 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -72,7 +72,7 @@ module.exports = function(proxy, allowedHost) { // ❌ /whatever/static/js/bundle.js doesn't work // ✅ /static/js/bundle.js still does // 🤔 Changing this to /whatever prevents %PUBLIC_URL% from being replaced!? - publicPath: '/', + publicPath: paths.servedPath.slice(0, -1), // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.hooks[...].tap` calls above. quiet: true, From 4091c07b2aaf5f606596cc3de62edcd0af79307a Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Mon, 28 Jan 2019 16:40:15 -0800 Subject: [PATCH 6/9] Support custom `pathname` in WebpackDevServerUtils.prepareUrls --- packages/react-dev-utils/WebpackDevServerUtils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 1d7021e037c..a2b7ee502f6 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -22,20 +22,20 @@ const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin'); const isInteractive = process.stdout.isTTY; -function prepareUrls(protocol, host, port) { +function prepareUrls(protocol, host, port, pathname = '/') { const formatUrl = hostname => url.format({ protocol, hostname, port, - pathname: '/', + pathname, }); const prettyPrintUrl = hostname => url.format({ protocol, hostname, port: chalk.bold(port), - pathname: '/', + pathname, }); const isUnspecifiedHost = host === '0.0.0.0' || host === '::'; From 66cb8b778e0adba97c4c87147499ac1a9955fcfb Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Mon, 28 Jan 2019 16:40:47 -0800 Subject: [PATCH 7/9] prepareUrls with paths.servedPath --- packages/react-scripts/scripts/start.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 35bce798ed3..d23467a46f9 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -91,11 +91,17 @@ checkBrowsers(paths.appPath, isInteractive) // We have not found a port. return; } + const config = configFactory('development'); const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const appName = require(paths.appPackageJson).name; const useTypeScript = fs.existsSync(paths.appTsConfig); - const urls = prepareUrls(protocol, HOST, port); + const urls = prepareUrls( + protocol, + HOST, + port, + paths.servedPath.slice(0, -1) + ); const devSocket = { warnings: warnings => devServer.sockWrite(devServer.sockets, 'warnings', warnings), From 3a714cfb4cad32f05b19e2e29df1a010f9852ecf Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Mon, 28 Jan 2019 16:41:46 -0800 Subject: [PATCH 8/9] Revert package.json#homepage --- packages/react-scripts/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 869ed8d1e1f..d33bd46a236 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -3,7 +3,6 @@ "version": "2.1.8", "description": "Configuration and scripts for Create React App.", "repository": "facebook/create-react-app", - "homepage": "http://localhost:3000/whatever", "license": "MIT", "engines": { "node": ">=8.10" From c189feb45d644d0a13dd063b9ff3c46fbdff3052 Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Mon, 28 Jan 2019 16:42:10 -0800 Subject: [PATCH 9/9] Remove comments about publicPath --- packages/react-scripts/config/webpackDevServer.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 6b2a9692601..4413da27538 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -68,10 +68,6 @@ module.exports = function(proxy, allowedHost) { 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 /. - - // ❌ /whatever/static/js/bundle.js doesn't work - // ✅ /static/js/bundle.js still does - // 🤔 Changing this to /whatever prevents %PUBLIC_URL% from being replaced!? publicPath: paths.servedPath.slice(0, -1), // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.hooks[...].tap` calls above.