diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 050ce2a6351..3d08471eb60 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -61,8 +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: 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',
   })
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 7565cecd001..9e0455429b2 100644
--- a/packages/react-scripts/config/env.js
+++ b/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