Dev server doesn't work when used with /etc/hosts mapping

[maxprilutskiy]

Bug report

When I'm using webpack-dev-server in CRA, the WebSocket request URL gets composed incorrectly, if I'm using /etc/hosts to map a domain to localhost for the dev purposes. The code: https://github.com/webpack/webpack-dev-server/blame/master/client-src/utils/createSocketURL.js#L132-:L142

Actual Behavior

Given the app is being accessed via https://app.localhost.dev through reverse proxy pointing to http://127.0.0.1:3000
When I'm starting a CRA app in dev mode
A websocket request is being made to wss://app.localhost.dev:3000/ws

Expected Behavior

Given the app is being accessed via https://app.localhost.dev through reverse proxy pointing to http://127.0.0.1:3000
When I'm starting a CRA app in dev mode
A websocket request is being made to wss://app.localhost.dev/ws

How Do We Reproduce?

• Configure etc hosts: 127.0.0.1 app.localhost.dev
• Configure reverse proxy to forward requests from https://app.localhost.dev to http://127.0.0.1:3000. This can be done with Caddy (brew install caddy , caddy run). Caddyfile file:

app.localhost.dev {
  tls internal
  reverse_proxy 127.0.0.1:3000
}

[maxprilutskiy]

UPD:

This is the workaround I'm using meanwhile:

WDS_SOCKET_PORT=443

Added this to env when my CRA app after noticing these lines in react-scripts:
https://github.com/facebook/create-react-app/blob/20edab4894b301f6b90dad0f90a2f82c52a7ac66/packages/react-scripts/config/webpackDevServer.config.js#L19-L22

[alexander-akait]

Please open an issue in CRA, we can't fix it here, thanks

[maxprilutskiy]

@alexander-akait with all respect, I doubt you have carefully read the description of the issue.

I've pointed you to the exact lines of code in webpack-dev-server repo that cause this problem. Monkey patching the webpack-dev-server repo in node_modules does solve the problem too, as well as modifying the variables during the debugging.

Here is the problematic code: https://github.com/webpack/webpack-dev-server/blame/master/client-src/utils/createSocketURL.js#L132-:L142

I hope you'll allow some of your time to check the description of the problem more responsibly.

I'm happy to open a pull request btw; but given the amount of branching around those lines, I guess I'll need some guidance, to avoid regressions.

Thank you ❤️

---

P.S.: I will for sure open an issue and/or a PR in CRA with a webpack-dev-server version upgrade, after the issue gets fixed.

[alexander-akait]

Yes, it is expected behavior, you should provide port/host/etc шт this case, otherwise we can't connect, we can't read /etc/hosts and understand that we should use, and also that is why we allow to set these options, what solution you suggest?

[maxprilutskiy]

I suggest using location.host (which already includes port value if it exists) of the host webpage when building the websocket URL, instead of host and port passed via resource string from outside, in cases when location.host is clearly not a localhost domain (when it's not localhost, 0.0.0.0, 127.0.0.0.1).

Do you see this rather a feature (fix?) for CRA? It might be if the arch idea behind webpack-dev-server is to keep it window-agnostic.

[alexander-akait]

Do you see this rather a feature (fix?) for CRA?

CRA should provide variables/options to change it, we nothing know about your URL in browser, proxy always required to set some options explicit, in your case it is port

[maxprilutskiy]

Got you, @alexander-akait, thanks for looking into this! I guess I got confused it's webpack-dev-server issue because its code is generating the URL.

Your comment makes total sense.

Thx 🙇‍♂️