diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 7d6a979e270..54c2efcbdd2 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -158,15 +158,13 @@ function destroyErrorOverlay() {
 }
 
 // Connect to WebpackDevServer via a socket.
-var connection = new SockJS(
-  url.format({
-    protocol: window.location.protocol,
-    hostname: window.location.hostname,
-    port: window.location.port,
-    // Hardcoded in WebpackDevServer
-    pathname: '/sockjs-node',
-  })
-);
+var connection = new SockJS(url.format({
+  protocol: window.location.protocol,
+  hostname: process.env.HOST || window.location.hostname,
+  port: process.env.PORT || window.location.port,
+  // Hardcoded in WebpackDevServer
+  pathname: '/sockjs-node'
+}));
 
 // Unlike WebpackDevServer client, we won't try to reconnect
 // to avoid spamming the console. Disconnect usually happens
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index e7d7f9f3206..6f8f4070c30 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -84,6 +84,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