cf facebook#1588

Author: matthieu faugere

packages/react-dev-utils/webpackHotDevClient.js

@@ -61,10 +61,10 @@ 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: process.env.HOST || window.location.hostname,
+    port: process.env.PORT || window.location.port,
     // Hardcoded in WebpackDevServer
-    pathname: '/sockjs-node',
+    pathname: '/sockjs-node'
   })
 );
 

packages/react-scripts/config/env.js

@@ -85,6 +85,12 @@ 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