commit reference from facebook#1588

Author: ncruz

packages/react-dev-utils/webpackHotDevClient.js

@@ -61,8 +61,11 @@ if (module.hot && typeof module.hot.dispose === 'function') {
 var connection = new SockJS(
   url.format({
     protocol: window.location.protocol,
-    hostname: window.location.hostname,
-    port: window.location.port,
+    // hostname: window.location.hostname,
+    // port: window.location.port,
+    // https://github.com/facebook/create-react-app/pull/1588/commits/532b4636716b3006d848683131f96395e546fc1e
+    hostname: process.env.HOST || window.location.hostname,
+    port: process.env.PORT || window.location.port,
     // Hardcoded in WebpackDevServer
     pathname: '/sockjs-node',
   })

packages/react-scripts/config/env.js

@@ -85,6 +85,11 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        // Useful for allowing the hot dev websocket to connect to the host
+        // specified in the env file, instead of window.location, which could
+        // be wrong if the dev server is being proxied.
+        'HOST': process.env.HOST || '',
+        'PORT': process.env.PORT || ''
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin