Vite HMR is unusable behind reverse proxies with random port numbers for client

Describe the bug

Vite HMR requires us to hardcode the port numbers in the vite-config.js file for HMR. However, sometimes this is not possible IF the port number generated is random, for example - a dev server sitting behind, say ngrok exposed on the internet. In that case, the vite HMR websocket connection will fail (as it tries to connect to the websocket on local port it is running on the system, behind reverse proxy)

Reproduction

1. Start a vite server at port 1337
2. Port map this dev server behind nginx or ngrok or any other reverse proxy (i.e. 1.2.3.4:9999 on internet -> 127.0.0.1:1337)
3. There is no way to tell HMR websocket to connect to 1.2.3.4:9999 (assuming 9999 is random and might change on every run) instead of 1.2.3.4:1337 (notice: wrong port number used as it is hardcoded and replaced in the code.

Line responsible: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/clientInjections.ts#L33 This assumes that the backend server running on a port is the same as the frontend port exposed.

Possible fix: Just like HMR checks for location.hostname, we should implement an option to get location.port. Allow a function to run on client-side to determine the port number instead of having the option to only serialize it from server (basically we want window.location.port instead of server.port as a default fallback)

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[vfonic]

I tried to follow the discussion here, but I’m not sure if I understood everything. Is it possible now to have HMR working through ngrok tunnel?

I tried setting the port number in the vite.config.ts, but I’m not sure I’m setting it to the correct number. How do I know which port to connect to?

Were these changes merged in some other PR: https://github.com/vitejs/vite/pull/4168/files

I’m also not sure if I’m configuring Vite correctly:

export default defineConfig({
  server: {
    hmr: { clientPort: 443 }, // I tried 4040 and some other ports that I saw in ngrok logs such as: 57587, 57004, etc.
  },
  // ...
})

[mehulmpt]

I raised the issue because we will be using vite + vue 3 setup on Vue practice area on codedamn: https://codedamn.com/test-hands-on-lab/fXOK1UVZrTpJi5FGLTzp3

Our infrastructure maps a random port on docker host to the fixed port inside docker container (the port on which vite runs). Therefore this hardcoded setup always fails because container doesn’t know which port it has been mapped on.

We are already running a patched vite repo where we simply set the port to window.location.port, but thought it would be nice if it is officially available too.