Change proxy handling to allow multiple proxies in development

packages/react-scripts/config/webpackDevServer.config.js

@@ -12,6 +12,8 @@
 
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
+const proxy = require(paths.appPackageJson).proxy;
+const prepareProxy = require('../scripts/utils/prepareProxy');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || 'localhost';
@@ -60,4 +62,10 @@ module.exports = {
   https: protocol === 'https',
   host: host,
   overlay: false,
+  historyApiFallback: {
+    // Paths with dots should still use the history fallback.
+    // See https://github.com/facebookincubator/create-react-app/issues/387.
+    disableDotRule: true,
+  },
+  proxy: prepareProxy(proxy),
 };

packages/react-scripts/scripts/start.js

@@ -31,7 +31,6 @@ const paths = require('../config/paths');
 const config = require('../config/webpack.config.dev');
 const devServerConfig = require('../config/webpackDevServer.config');
 const createWebpackCompiler = require('./utils/createWebpackCompiler');
-const addWebpackMiddleware = require('./utils/addWebpackMiddleware');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const cli = useYarn ? 'yarn' : 'npm';
@@ -72,9 +71,6 @@ function run(port) {
   // Serve webpack assets generated by the compiler over a web sever.
   const devServer = new WebpackDevServer(compiler, devServerConfig);
 
-  // Our custom middleware proxies requests to /index.html or a remote API.
-  addWebpackMiddleware(devServer);
-
   // Launch WebpackDevServer.
   devServer.listen(port, err => {
     if (err) {

packages/react-scripts/scripts/utils/prepareProxy.js

@@ -0,0 +1,149 @@
+// @remove-on-eject-begin
+/**
+ * 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.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const chalk = require('chalk');
+
+// We need to provide a custom onError function for httpProxyMiddleware.
+// It allows us to log custom error messages on the console.
+function onProxyError(proxy) {
+  return (err, req, res) => {
+    const host = req.headers && req.headers.host;
+    console.log(
+      chalk.red('Proxy error:') +
+        ' Could not proxy request ' +
+        chalk.cyan(req.url) +
+        ' from ' +
+        chalk.cyan(host) +
+        ' to ' +
+        chalk.cyan(proxy) +
+        '.'
+    );
+    console.log(
+      'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
+        chalk.cyan(err.code) +
+        ').'
+    );
+    console.log();
+
+    // And immediately send the proper error response to the client.
+    // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
+    if (res.writeHead && !res.headersSent) {
+      res.writeHead(500);
+    }
+    res.end(
+      'Proxy error: Could not proxy request ' +
+        req.url +
+        ' from ' +
+        host +
+        ' to ' +
+        proxy +
+        ' (' +
+        err.code +
+        ').'
+    );
+  };
+}
+
+module.exports = function prepareProxy(proxy) {
+  // `proxy` lets you specify alternate servers for specific requests.
+  // It can either be a string or an object conforming to the Webpack dev server proxy configuration
+  // https://webpack.github.io/docs/webpack-dev-server.html
+  if (proxy) {
+    if (typeof proxy !== 'object' && typeof proxy !== 'string') {
+      console.log(
+        chalk.red(
+          'When specified, "proxy" in package.json must be a string or an object.'
+        )
+      );
+      console.log(
+        chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')
+      );
+      console.log(
+        chalk.red(
+          'Either remove "proxy" from package.json, or make it an object.'
+        )
+      );
+      process.exit(1);
+    }
+
+    // Otherwise, if proxy is specified, we will let it handle any request.
+    // There are a few exceptions which we won't send to the proxy:
+    // - /index.html (served as HTML5 history API fallback)
+    // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
+    // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
+    // Tip: use https://jex.im/regulex/ to visualize the regex
+    const mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
+
+    // Support proxy as a string for those who are using the simple proxy option
+    if (typeof proxy === 'string') {
+      return [
+        {
+          target: proxy,
+          logLevel: 'silent',
+          // For single page apps, we generally want to fallback to /index.html.
+          // However we also want to respect `proxy` for API calls.
+          // So if `proxy` is specified as a string, we need to decide which fallback to use.
+          // We use a heuristic: if request `accept`s text/html, we pick /index.html.
+          // Modern browsers include text/html into `accept` header when navigating.
+          // However API calls like `fetch()` won’t generally accept text/html.
+          // If this heuristic doesn’t work well for you, use a custom `proxy` object.
+          context: function(pathname, req) {
+            return mayProxy.test(pathname) &&
+              req.headers.accept &&
+              req.headers.accept.indexOf('text/html') === -1;
+          },
+          onProxyReq: proxyReq => {
+            // Browers may send Origin headers even with same-origin
+            // requests. To prevent CORS issues, we have to change
+            // the Origin to match the target URL.
+            if (proxyReq.getHeader('origin')) {
+              proxyReq.setHeader('origin', proxy);
+            }
+          },
+          onError: onProxyError(proxy),
+          secure: false,
+          changeOrigin: true,
+          ws: true,
+          xfwd: true,
+        },
+      ];
+    }
+
+    // Otherwise, proxy is an object so create an array of proxies to pass to webpackDevServer
+    return Object.keys(proxy).map(function(context) {
+      if (!proxy[context].hasOwnProperty('target')) {
+        console.log(
+          chalk.red(
+            'When `proxy` in package.json is as an object, each `context` object must have a ' +
+              '`target` property specified as a url string'
+          )
+        );
+        process.exit(1);
+      }
+
+      return Object.assign({}, proxy[context], {
+        context: function(pathname) {
+          return mayProxy.test(pathname) && pathname.match(context);
+        },
+        onProxyReq: proxyReq => {
+          // Browers may send Origin headers even with same-origin
+          // requests. To prevent CORS issues, we have to change
+          // the Origin to match the target URL.
+          if (proxyReq.getHeader('origin')) {
+            proxyReq.setHeader('origin', proxy[context].target);
+          }
+        },
+        onError: onProxyError(proxy[context].target),
+      });
+    });
+  }
+};