Merge pull request #1 from habx/fix-socket

cf facebook#1588
habx · Jun 4, 2018 · b4ffd28 · b4ffd28
2 parents a98c3df + 4ed9843
commit b4ffd28
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/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'
   })
 );
 

diff --git a/packages/react-scripts/config/env.js b/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