diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 5f64db3bde4..0533f9cbc84 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -345,7 +345,7 @@ The `args` object accepts a number of properties: - **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages. - **webpack** `function`: A reference to the webpack constructor. -##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object` +##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object` Creates a WebpackDevServer `proxy` configuration object from the `proxy` setting in `package.json`. diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 26b36fca395..a85aa31403e 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -356,7 +356,7 @@ function onProxyError(proxy) { }; } -function prepareProxy(proxy, appPublicFolder) { +function prepareProxy(proxy, appPublicFolder, servedPathname) { // `proxy` lets you specify alternate servers for specific requests. if (!proxy) { return undefined; @@ -380,7 +380,10 @@ function prepareProxy(proxy, appPublicFolder) { const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node'; const isDefaultSockHost = !process.env.WDS_SOCKET_HOST; function mayProxy(pathname) { - const maybePublicPath = path.resolve(appPublicFolder, pathname.slice(1)); + const maybePublicPath = path.resolve( + appPublicFolder, + pathname.replace(new RegExp('^' + servedPathname), '') + ); const isPublicFileRequest = fs.existsSync(maybePublicPath); // used by webpackHotDevClient const isWdsEndpointRequest = diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 82e78c09f79..c40f82771ca 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -108,6 +108,7 @@ module.exports = function(proxy, allowedHost) { index: paths.publicUrlOrPath, }, public: allowedHost, + // `proxy` is run between `before` and `after` `webpack-dev-server` hooks proxy, before(app, server) { // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware` @@ -117,13 +118,14 @@ module.exports = function(proxy, allowedHost) { // This lets us open files from the runtime error overlay. app.use(errorOverlayMiddleware()); - // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match - app.use(redirectServedPath(paths.publicUrlOrPath)); - if (fs.existsSync(paths.proxySetup)) { // This registers user provided middleware for proxy reasons require(paths.proxySetup)(app); } + }, + after(app) { + // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match + app.use(redirectServedPath(paths.publicUrlOrPath)); // This service worker file is effectively a 'no-op' that will reset any // previous service worker registered for the same host:port combination. diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 094f6e80409..97ad10fe001 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -122,7 +122,11 @@ checkBrowsers(paths.appPath, isInteractive) }); // Load proxy config const proxySetting = require(paths.appPackageJson).proxy; - const proxyConfig = prepareProxy(proxySetting, paths.appPublic); + const proxyConfig = prepareProxy( + proxySetting, + paths.appPublic, + paths.publicUrlOrPath + ); // Serve webpack assets generated by the compiler over a web server. const serverConfig = createDevServerConfig( proxyConfig,