Re-enable hosting inside a back-end application

We often host React apps in a back-end application.  In order for that to work, we need to customize the configuration in several places.

In 1.0, we turned the webpack dev configuration into a function that took `publicPath` as an argument.  In this version of CRA, the dev config is imported in more than one place, and not all places have the necessary information.

So, instead, we now duplicate the code for computing the public path.  This is unfortunate, but does work.

This version also makes it so that we can open the browser to the correct location (if the host application sets the `APP_PORT` env var appropriately), so we re-enable that code.

Author: randycoulman

packages/react-scripts/config/webpack.config.dev.js

@@ -19,12 +19,26 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const { prepareUrls } = require('react-dev-utils/WebpackDevServerUtils');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
+// ZEAL: We often host our React apps within a back-end application.  Thus,
+// we need to provide the correct location of the webpack dev-server to its
+// client.  If we don't, it will use `window.location` instead, which will be
+// pointing at the back-end application.
+// NOTE: It is important to keep this code in sync with `scripts/start.js`.
+// The duplication is unfortunate, but unavoidable with the current structure
+// of the upstream code.
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const host = process.env.HOST || '0.0.0.0';
+const port = parseInt(process.env.PORT, 10) || 3000;
+const urls = prepareUrls(protocol, host, port);
+
 // 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 = urls.localUrlForBrowser;
+
 // `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.

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

@@ -86,6 +86,12 @@ module.exports = function(proxy, allowedHost) {
       // See https://github.com/facebookincubator/create-react-app/issues/387.
       disableDotRule: true,
     },
+    headers: {
+      // ZEAL: Allow cross-origin requests so that, when hosted in a back-end
+      // application, the client can fetch assets and hot module reloading
+      // updates.
+      'Access-Control-Allow-Origin': '*',
+    },
     public: allowedHost,
     proxy,
     setup(app) {

packages/react-scripts/scripts/start.js

@@ -64,8 +64,15 @@ choosePort(HOST, DEFAULT_PORT)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
+    // ZEAL: We often host our React apps within a back-end application.  Thus,
+    // we need to open the browser on that application and not the webpack
+    // dev server.  If the client application specifies `APP_PORT`, we'll open
+    // the browser on that port instead of the dev server's port.
+    const appPort = parseInt(process.env.APP_PORT, 10) || port;
+    const appUrls = prepareUrls(protocol, HOST, appPort);
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    // ZEAL: Pass `appUrls` instead of `urls` to see proper instructions.
+    const compiler = createCompiler(webpack, config, appName, appUrls, useYarn);
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
@@ -84,7 +91,9 @@ choosePort(HOST, DEFAULT_PORT)
         clearConsole();
       }
       console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
+      // ZEAL: Use appUrls instead of urls to allow for back-end host
+      // application.
+      openBrowser(appUrls.localUrlForBrowser);
     });
 
     ['SIGINT', 'SIGTERM'].forEach(function(sig) {