Allow custom proxies in development (facebook#1790)

* Change proxy handling to allow multiple proxies to be specified in package.json.

* Up webpack-dev-server to 2.4.2

Webpack Dev Server version 2.4.2 handles the external websocket upgrade
for all proxies

* Fix the listen() call

* Switch to correct default host

* Remove promises and extract to react-dev-utils

* oops

Author: jamesblight

config/webpackDevServer.config.js

@@ -10,54 +10,74 @@
 // @remove-on-eject-end
 'use strict';
 
+const launchEditor = require('react-dev-utils/launchEditor');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || 'localhost';
+const host = process.env.HOST || '0.0.0.0';
 
-module.exports = {
-  // Enable gzip compression of generated files.
-  compress: true,
-  // Silence WebpackDevServer's own logs since they're generally not useful.
-  // It will still show compile warnings and errors with this setting.
-  clientLogLevel: 'none',
-  // By default WebpackDevServer serves physical files from current directory
-  // in addition to all the virtual build products that it serves from memory.
-  // This is confusing because those files won’t automatically be available in
-  // production build folder unless we copy them. However, copying the whole
-  // project directory is dangerous because we may expose sensitive files.
-  // Instead, we establish a convention that only files in `public` directory
-  // get served. Our build script will copy `public` into the `build` folder.
-  // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-  // Note that we only recommend to use `public` folder as an escape hatch
-  // for files like `favicon.ico`, `manifest.json`, and libraries that are
-  // for some reason broken when imported through Webpack. If you just want to
-  // use an image, put it in `src` and `import` it from JavaScript instead.
-  contentBase: paths.appPublic,
-  // By default files from `contentBase` will not trigger a page reload.
-  watchContentBase: true,
-  // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-  // for the WebpackDevServer client so it can learn when the files were
-  // updated. The WebpackDevServer client is included as an entry point
-  // in the Webpack development configuration. Note that only changes
-  // to CSS are currently hot reloaded. JS changes will refresh the browser.
-  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 /.
-  publicPath: config.output.publicPath,
-  // WebpackDevServer is noisy by default so we emit custom message instead
-  // by listening to the compiler events with `compiler.plugin` calls above.
-  quiet: true,
-  // Reportedly, this avoids CPU overload on some systems.
-  // https://github.com/facebookincubator/create-react-app/issues/293
-  watchOptions: {
-    ignored: /node_modules/,
-  },
-  // Enable HTTPS if the HTTPS environment variable is set to 'true'
-  https: protocol === 'https',
-  host: host,
-  overlay: false,
+module.exports = function(proxy) {
+  return {
+    // Enable gzip compression of generated files.
+    compress: true,
+    // Silence WebpackDevServer's own logs since they're generally not useful.
+    // It will still show compile warnings and errors with this setting.
+    clientLogLevel: 'none',
+    // By default WebpackDevServer serves physical files from current directory
+    // in addition to all the virtual build products that it serves from memory.
+    // This is confusing because those files won’t automatically be available in
+    // production build folder unless we copy them. However, copying the whole
+    // project directory is dangerous because we may expose sensitive files.
+    // Instead, we establish a convention that only files in `public` directory
+    // get served. Our build script will copy `public` into the `build` folder.
+    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+    // Note that we only recommend to use `public` folder as an escape hatch
+    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+    // for some reason broken when imported through Webpack. If you just want to
+    // use an image, put it in `src` and `import` it from JavaScript instead.
+    contentBase: paths.appPublic,
+    // By default files from `contentBase` will not trigger a page reload.
+    watchContentBase: true,
+    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // for the WebpackDevServer client so it can learn when the files were
+    // updated. The WebpackDevServer client is included as an entry point
+    // in the Webpack development configuration. Note that only changes
+    // to CSS are currently hot reloaded. JS changes will refresh the browser.
+    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 /.
+    publicPath: config.output.publicPath,
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.plugin` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebookincubator/create-react-app/issues/293
+    watchOptions: {
+      ignored: /node_modules/,
+    },
+    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    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,
+    setup(app) {
+      // This lets us open files from the crash overlay.
+      app.use(function launchEditorMiddleware(req, res, next) {
+        if (req.url.startsWith('/__open-stack-frame-in-editor')) {
+          launchEditor(req.query.fileName, req.query.lineNumber);
+          res.end();
+        } else {
+          next();
+        }
+      });
+    },
+  };
 };

scripts/start.js

@@ -35,7 +35,7 @@ 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 prepareProxy = require('react-dev-utils/prepareProxy');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const cli = useYarn ? 'yarn' : 'npm';
@@ -73,34 +73,28 @@ function run(port) {
     }
   );
 
+  // Load proxy config
+  const proxy = require(paths.appPackageJson).proxy;
   // 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)
-    .then(() => {
-      // Launch WebpackDevServer.
-      devServer.listen(port, HOST, err => {
-        if (err) {
-          return console.log(err);
-        }
-
-        if (isInteractive) {
-          clearConsole();
-        }
-        console.log(chalk.cyan('Starting the development server...'));
-        console.log();
-
-        openBrowser(`${protocol}://${HOST}:${port}/`);
-      });
-    })
-    .catch(e => {
-      console.log(
-        chalk.red('Failed to setup middleware, please report this error:')
-      );
-      console.log(e);
-      process.exit(1);
-    });
+  const devServer = new WebpackDevServer(
+    compiler,
+    devServerConfig(prepareProxy(proxy))
+  );
+
+  // Launch WebpackDevServer.
+  devServer.listen(port, HOST, err => {
+    if (err) {
+      return console.log(err);
+    }
+
+    if (isInteractive) {
+      clearConsole();
+    }
+    console.log(chalk.cyan('Starting the development server...'));
+    console.log();
+
+    openBrowser(`${protocol}://${HOST}:${port}/`);
+  });
 }
 
 // We attempt to use the default port but if it is busy, we offer the user to