fix(react-scripts): do not redirect served path if request may proxy (#8442)

Moved redirect middleware and noopSW middleware in WDS after hook
So proxy, and before proxy will take precedence before redirect

Closes #8417

Author: Andrew Luca

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`.
 

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 =

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.

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,