From 99478cab3a8d5b4d10c16883bd060213cf560a11 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Mon, 16 Oct 2017 08:49:14 -0500 Subject: [PATCH 01/13] wip --- packages/react-scripts/config/webpack.config.dev.js | 6 ++++-- packages/react-scripts/config/webpackDevServer.config.js | 8 ++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 44669e6059f..2c45c22828f 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -10,6 +10,7 @@ const autoprefixer = require('autoprefixer'); const path = require('path'); +const url = require('url'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); @@ -22,11 +23,11 @@ const 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. -const publicPath = '/'; +const publicPath = url.parse(paths.servedPath).pathname || ''; // `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. -const publicUrl = ''; +const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); @@ -72,6 +73,7 @@ module.exports = { // There are also additional JS chunk files if you use code splitting. chunkFilename: 'static/js/[name].chunk.js', // This is the URL that app is served from. We use "/" in development. + // If there is a homepage path defined, it will be served from that instead. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index f401f2cce0d..53fdc129908 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -11,12 +11,15 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); const path = require('path'); +const url = require('url'); const config = require('./webpack.config.dev'); const paths = require('./paths'); const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const host = process.env.HOST || '0.0.0.0'; +const servedPathPathname = url.parse(paths.servedPath).pathname || ''; + module.exports = function(proxy, allowedHost) { return { // WebpackDevServer 2.4.3 introduced a security fix that prevents remote @@ -91,18 +94,19 @@ module.exports = function(proxy, allowedHost) { // Paths with dots should still use the history fallback. // See https://github.com/facebookincubator/create-react-app/issues/387. disableDotRule: true, + index: servedPathPathname, }, public: allowedHost, proxy, setup(app) { // This lets us open files from the runtime error overlay. - app.use(errorOverlayMiddleware()); + app.use(errorOverlayMiddleware(servedPathPathname)); // This service worker file is effectively a 'no-op' that will reset any // previous service worker registered for the same host:port combination. // We do this in development to avoid hitting the production cache if // it used the same host and port. // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 - app.use(noopServiceWorkerMiddleware()); + app.use(noopServiceWorkerMiddleware(servedPathPathname)); }, }; }; From 21d718bd40e4b09404576142b94290ffc2f409e4 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 17 Oct 2017 08:43:11 -0500 Subject: [PATCH 02/13] wip --- .../react-dev-utils/WebpackDevServerUtils.js | 6 ++--- .../react-dev-utils/errorOverlayMiddleware.js | 4 ++-- .../noopServiceWorkerMiddleware.js | 6 +++-- .../react-dev-utils/serveAppMiddleware.js | 24 +++++++++++++++++++ .../config/webpackDevServer.config.js | 2 ++ packages/react-scripts/scripts/start.js | 5 +++- packages/react-scripts/template/README.md | 11 +++++++-- 7 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 packages/react-dev-utils/serveAppMiddleware.js diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index f19582e1227..a2b39c0b348 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -34,20 +34,20 @@ if (isSmokeTest) { }; } -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 === '::'; diff --git a/packages/react-dev-utils/errorOverlayMiddleware.js b/packages/react-dev-utils/errorOverlayMiddleware.js index b756b0ef647..829abfc535b 100644 --- a/packages/react-dev-utils/errorOverlayMiddleware.js +++ b/packages/react-dev-utils/errorOverlayMiddleware.js @@ -9,9 +9,9 @@ const launchEditor = require('./launchEditor'); const launchEditorEndpoint = require('./launchEditorEndpoint'); -module.exports = function createLaunchEditorMiddleware() { +module.exports = function createLaunchEditorMiddleware(servedPathPathname) { return function launchEditorMiddleware(req, res, next) { - if (req.url.startsWith(launchEditorEndpoint)) { + if (req.url.startsWith(`${servedPathPathname}${launchEditorEndpoint}`)) { launchEditor(req.query.fileName, req.query.lineNumber); res.end(); } else { diff --git a/packages/react-dev-utils/noopServiceWorkerMiddleware.js b/packages/react-dev-utils/noopServiceWorkerMiddleware.js index 41566dd7fa8..60957e14b81 100644 --- a/packages/react-dev-utils/noopServiceWorkerMiddleware.js +++ b/packages/react-dev-utils/noopServiceWorkerMiddleware.js @@ -7,9 +7,11 @@ 'use strict'; -module.exports = function createNoopServiceWorkerMiddleware() { +module.exports = function createNoopServiceWorkerMiddleware( + servedPathPathname +) { return function noopServiceWorkerMiddleware(req, res, next) { - if (req.url === '/service-worker.js') { + if (req.url === `${servedPathPathname}/service-worker.js`) { res.setHeader('Content-Type', 'text/javascript'); res.send( `// This service worker file is effectively a 'no-op' that will reset any diff --git a/packages/react-dev-utils/serveAppMiddleware.js b/packages/react-dev-utils/serveAppMiddleware.js new file mode 100644 index 00000000000..1ee10c14681 --- /dev/null +++ b/packages/react-dev-utils/serveAppMiddleware.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +module.exports = function createServeAppMiddleware(servedPathPathname) { + return function serveAppMiddleware(req, res, next) { + console.log(req.url, servedPathPathname); + if (servedPathPathname.length > 1 && servedPathPathname !== './') { + if (req.url.indexOf(servedPathPathname) === -1) { + res.redirect(servedPathPathname); + } else { + next(); + } + } else { + next(); + } + }; +}; diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 53fdc129908..acaf4113322 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -10,6 +10,7 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); +const serveAppMiddleware = require('react-dev-utils/serveAppMiddleware'); const path = require('path'); const url = require('url'); const config = require('./webpack.config.dev'); @@ -107,6 +108,7 @@ module.exports = function(proxy, allowedHost) { // it used the same host and port. // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 app.use(noopServiceWorkerMiddleware(servedPathPathname)); + app.use(serveAppMiddleware(servedPathPathname)); }, }; }; diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 8df052d3bbb..1fbaad1c89c 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -23,6 +23,7 @@ process.on('unhandledRejection', err => { require('../config/env'); const fs = require('fs'); +const url = require('url'); const chalk = require('chalk'); const webpack = require('webpack'); const WebpackDevServer = require('webpack-dev-server'); @@ -51,6 +52,8 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; +const servedPathPathname = url.parse(paths.servedPath).pathname || ''; + // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `detect()` Promise resolves to the next free port. choosePort(HOST, DEFAULT_PORT) @@ -61,7 +64,7 @@ choosePort(HOST, DEFAULT_PORT) } const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const appName = require(paths.appPackageJson).name; - const urls = prepareUrls(protocol, HOST, port); + const urls = prepareUrls(protocol, HOST, port, servedPathPathname); // Create a webpack compiler that is configured with custom messages. const compiler = createCompiler(webpack, config, appName, urls, useYarn); // Load proxy config diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 61f32665867..a0cddfee64b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -283,7 +283,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. -The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. +The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. ## Formatting Code Automatically @@ -1769,7 +1769,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c RewriteRule ^ index.html [QSA,L] ``` -It will get copied to the `build` folder when you run `npm run build`. +It will get copied to the `build` folder when you run `npm run build`. If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). @@ -1795,6 +1795,13 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. +If `homepage` is specified, Create React App will open your browser at the path specified. From the example above, `npm start` would result in: + +```js +http://localhost:3000/relativepath +``` +This also means that in development the paths to the static files will be served out of the `relativepath` directory. + **Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).

From 049a8bf099cefd151bc9d36309b46d5d77091162 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 17 Oct 2017 09:39:45 -0500 Subject: [PATCH 03/13] wip --- packages/react-scripts/config/webpack.config.dev.js | 8 +++++++- packages/react-scripts/package.json | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2c45c22828f..26809732000 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -21,13 +21,19 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); +console.log(paths.servedPath); + // Webpack uses `publicPath` to determine where the app is being served from. -// In development, we always serve from the root. This makes config easier. +// In development, we serve from the root by default. Webpack will serve from +// the relative path of the homepage field if specified. const publicPath = url.parse(paths.servedPath).pathname || ''; +console.log(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. const publicUrl = publicPath.slice(0, -1); +console.log(publicUrl); +process.exit(); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f5007fbe635..e250f372607 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -3,6 +3,7 @@ "version": "1.0.14", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", + "homepage": ".", "license": "MIT", "engines": { "node": ">=6" From 2d6ad6a490f7747627eddd5a511d1f3a56a88f30 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 17 Oct 2017 09:49:01 -0500 Subject: [PATCH 04/13] wip; --- packages/react-dev-utils/serveAppMiddleware.js | 1 + packages/react-scripts/config/webpack.config.dev.js | 8 ++------ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/react-dev-utils/serveAppMiddleware.js b/packages/react-dev-utils/serveAppMiddleware.js index 1ee10c14681..12ad07614a7 100644 --- a/packages/react-dev-utils/serveAppMiddleware.js +++ b/packages/react-dev-utils/serveAppMiddleware.js @@ -13,6 +13,7 @@ module.exports = function createServeAppMiddleware(servedPathPathname) { console.log(req.url, servedPathPathname); if (servedPathPathname.length > 1 && servedPathPathname !== './') { if (req.url.indexOf(servedPathPathname) === -1) { + console.log('redirect'); res.redirect(servedPathPathname); } else { next(); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 26809732000..8306a731ad1 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -21,22 +21,18 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); -console.log(paths.servedPath); - // Webpack uses `publicPath` to determine where the app is being served from. // In development, we serve from the root by default. Webpack will serve from // the relative path of the homepage field if specified. const publicPath = url.parse(paths.servedPath).pathname || ''; -console.log(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. const publicUrl = publicPath.slice(0, -1); -console.log(publicUrl); -process.exit(); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); - +console.log(env); +process.exit(); // 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. From 85078510ea36268a0787dc461ba60d088e33e81d Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 17 Oct 2017 09:54:34 -0500 Subject: [PATCH 05/13] wip --- packages/react-scripts/config/webpack.config.dev.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 8306a731ad1..9aa43b24c6a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -30,9 +30,7 @@ const publicPath = url.parse(paths.servedPath).pathname || ''; // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. -const env = getClientEnvironment(publicUrl); -console.log(env); -process.exit(); +const env = getClientEnvironment(publicUrl === '.' ? '' : 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. From cdb1f0510d80cc2f3598f1fa6580f9d1583a5a24 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 17 Oct 2017 16:13:18 -0500 Subject: [PATCH 06/13] updates --- packages/react-dev-utils/serveAppMiddleware.js | 2 -- packages/react-scripts/config/webpack.config.dev.js | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/serveAppMiddleware.js b/packages/react-dev-utils/serveAppMiddleware.js index 12ad07614a7..620847c333c 100644 --- a/packages/react-dev-utils/serveAppMiddleware.js +++ b/packages/react-dev-utils/serveAppMiddleware.js @@ -10,10 +10,8 @@ module.exports = function createServeAppMiddleware(servedPathPathname) { return function serveAppMiddleware(req, res, next) { - console.log(req.url, servedPathPathname); if (servedPathPathname.length > 1 && servedPathPathname !== './') { if (req.url.indexOf(servedPathPathname) === -1) { - console.log('redirect'); res.redirect(servedPathPathname); } else { next(); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 9aa43b24c6a..7238ab95695 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -24,11 +24,15 @@ const paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we serve from the root by default. Webpack will serve from // the relative path of the homepage field if specified. -const publicPath = url.parse(paths.servedPath).pathname || ''; +let publicPath = url.parse(paths.servedPath).pathname || ''; +if (publicPath === './') { + publicPath = publicPath.slice(1); +} // `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. const publicUrl = publicPath.slice(0, -1); + // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl === '.' ? '' : publicUrl); // This is the development configuration. From 5e09052ff492d0caf2d13abbad260151451e8500 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Wed, 18 Oct 2017 08:49:39 -0500 Subject: [PATCH 07/13] removed test homepage value --- 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 e250f372607..f5007fbe635 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -3,7 +3,6 @@ "version": "1.0.14", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", - "homepage": ".", "license": "MIT", "engines": { "node": ">=6" From 57dce7d5bb7fe38d6478340a52419024231afaed Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 31 Oct 2017 11:53:12 -0500 Subject: [PATCH 08/13] tweaked test for subpath --- .../react-scripts/fixtures/kitchensink/integration/env.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js index 5138bc513b3..8e770b5cf1c 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js @@ -50,7 +50,7 @@ describe('Integration', () => { const prefix = process.env.NODE_ENV === 'development' - ? '' + ? '/spa' : 'http://www.example.org/spa'; expect(doc.getElementById('feature-public-url').textContent).to.equal( `${prefix}.` From f349cc076e6e8c72dcc2382b9ccb93f1a4e613ed Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Tue, 31 Oct 2017 13:09:47 -0500 Subject: [PATCH 09/13] reverting test change to see it passing --- .../react-scripts/fixtures/kitchensink/integration/env.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js index 8e770b5cf1c..5138bc513b3 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js @@ -50,7 +50,7 @@ describe('Integration', () => { const prefix = process.env.NODE_ENV === 'development' - ? '/spa' + ? '' : 'http://www.example.org/spa'; expect(doc.getElementById('feature-public-url').textContent).to.equal( `${prefix}.` From 8163a585c5eca8963a7f65863a1fed4b6a1f2b1e Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 30 Nov 2017 08:50:33 -0600 Subject: [PATCH 10/13] linting error --- packages/react-scripts/config/webpackDevServer.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 94ebeb2cf13..ce59272a37a 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -12,7 +12,6 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware') const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); const serveAppMiddleware = require('react-dev-utils/serveAppMiddleware'); const ignoredFiles = require('react-dev-utils/ignoredFiles'); -const path = require('path'); const url = require('url'); const config = require('./webpack.config.dev'); const paths = require('./paths'); From 34411a972f560e53b42624cc4ad2d42f7eb24ce7 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Thu, 30 Nov 2017 09:49:30 -0600 Subject: [PATCH 11/13] think this will fix travis --- packages/react-dev-utils/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 54606f33fe8..97ff36f36ef 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -17,6 +17,7 @@ "crossSpawn.js", "eslintFormatter.js", "errorOverlayMiddleware.js", + "serveAppMiddleware.js", "FileSizeReporter.js", "printBuildError.js", "formatWebpackMessages.js", From a916bb67d91309a320d97e59b8cdba644a410283 Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Fri, 15 Dec 2017 08:49:37 -0600 Subject: [PATCH 12/13] proxying public directory in development only --- packages/react-scripts/config/webpack.config.dev.js | 3 +-- packages/react-scripts/config/webpackDevServer.config.js | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1f4dacd6057..5b82fda2681 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -31,8 +31,7 @@ if (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. -const publicUrl = publicPath.slice(0, -1); - +const publicUrl = paths.servedPath.slice(0, -1) + '/assets'; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl === '.' ? '' : publicUrl); // This is the development configuration. diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index ce59272a37a..b3e39dbab53 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -15,6 +15,7 @@ const ignoredFiles = require('react-dev-utils/ignoredFiles'); const url = require('url'); const config = require('./webpack.config.dev'); const paths = require('./paths'); +const express = require('express'); const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const host = process.env.HOST || '0.0.0.0'; @@ -104,6 +105,10 @@ module.exports = function(proxy, allowedHost) { // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 app.use(noopServiceWorkerMiddleware(servedPathPathname)); app.use(serveAppMiddleware(servedPathPathname)); + app.use( + `${config.output.publicPath.slice(0, -1)}/assets`, + express.static(paths.appPublic) + ); }, }; }; From da1e33146ecd58444a691b784cbef9f9ef93026d Mon Sep 17 00:00:00 2001 From: kellyrmilligan Date: Fri, 15 Dec 2017 09:29:04 -0600 Subject: [PATCH 13/13] static works as well, thought it would get confused with the bundle path --- packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpackDevServer.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 5b82fda2681..0514ada30ab 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -31,7 +31,7 @@ if (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. -const publicUrl = paths.servedPath.slice(0, -1) + '/assets'; +const publicUrl = paths.servedPath.slice(0, -1) + '/static'; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl === '.' ? '' : publicUrl); // This is the development configuration. diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index b3e39dbab53..bcd81bea04a 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -106,7 +106,7 @@ module.exports = function(proxy, allowedHost) { app.use(noopServiceWorkerMiddleware(servedPathPathname)); app.use(serveAppMiddleware(servedPathPathname)); app.use( - `${config.output.publicPath.slice(0, -1)}/assets`, + `${config.output.publicPath.slice(0, -1)}/static`, express.static(paths.appPublic) ); },