HMR socket URL should infer not only from location.hostname but also location.port

[rlamana]

HMR socket fails to connect when the dev server is behind some sort of proxy or layered architecture (nginx, k8s ingress, etc.) exposing a different end port than the one used in the server's configuration. In these cases, a common configuration is to set dev server's host to 0.0.0.0 to make it externally accessible and rely on browser's location object to infer the HMR socket URL.

Dev server exposes and proxies the socket connection accessible at /sockjs-node/info?t=XX.

HMR client code builds the socket URL usinglocation.hostname but uses the port set in server's configuration. Since the browser is at the other end of the architecture, the proper way to infer socket's URL is to also use location.port along with the location.hostname.

• Operating System: Docker 18.09 in GKE cluster, MacOS X 10.14.2 Mojave
• Node Version: 10.15.0
• NPM Version: 6.4.1 (Yarn Version: 1.10.1)
• webpack Version: 4.29.0
• webpack-dev-server Version: 3.1.14

I'm using a development environment in a Kubernetes cluster. In this scenario, the dev server runs in a docker container configured to use 0.0.0.0 and port :9000. It is exposed externally using a Kubernetes ingress controller with the proper dns setup and exposing standard http port :80.

This scenario is becoming more and more common when using development environments in the cloud, either with in-house solutions or using tools like Codenvy, Okteto, Koding or online IDEs like Cloud9.

• This is a bug
• This is a modification request

Code

// dev server config in webpack.config.js
devServer: {
    port: 9000,
    host: '0.0.0.0',
    disableHostCheck: true,
    hot: true,
    watchOptions: {
      poll: true // To watch inside Docker container.
    }
  }

Expected Behavior

• Externally exposed server: http://dev.mydomain.com (port: 80).
• Internally exposed dev server: 0.0.0.0:9000.
  • index.html accessible through: http://dev.mydomain.com/index.html
  • HMR socket generated URL: http://dev.mydomain.com/sockjs-node/info?t=XXXXXX
• Connection established.

Actual Behavior

• Externally exposed server: http://dev.mydomain.com (port: 80).
• Internally exposed dev server: 0.0.0.0:9000.
  • HMR socket generated URL: http://dev.mydomain.com:9000/sockjs-node/info?t=XXXXXX
• Connection failed because the port should also be :80.

It shouldn't force the 9000 port because this is only valid in the dev server's container scope.

For Bugs; How can we reproduce the behavior?

Setup a small proxy server to redirect all routes to the dev server. The proxy server's port will be different than the dev server's port. When accessing through the proxy server, the HMR socket connection will fail.