@mehulmpt Could you describe the use case for a random port number? Would it be sufficient to statically override the port?

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.

I’m confused. With #3578, we still have to set the port number in the config file. Regarding this issue, nothing changed at all…?

@antfu @Shinigami92 @nihalgonsalves Could this issue be reopened? I am in the same boat as @mehulmpt :

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.

I've suggested this as a comment on a related PR, but I'll suggest it again here; Can we use new URL(document.currentScript.src).hostname/port instead of location.hostname/location.port as the default hostname/port? It's more reliable to assume that the websocket server is on the same origin as the client injection script, than to assume that the websocket server is on the same origin as the current page (this would allow for things to work in a cross-origin context, e.g., testing a web component w/ vite HMR in the context of a website hosted on a different origin than that in-development web component).

I was also caught out by this. I am using Packetriot (similar to Ngrok) the HMR websocket would not connect. This creates a really bad user experience since Vite's client will refresh the page after one second if the websocket connection fails to establish.

@speigg's PR (#4168) looks like the correct direction to go in. What problem were you having with it? I'd also like to help get this fixed.

Worth noting that Snowpack has a similar implementation to that suggested here, though it does use the bare hostname instead of the client script URL. For subpaths, there's a HMR_WEBSOCKET_URL override, which is a bit less nice than figuring it out automatically.

I don't have random ports, but I have two pre-defined port at same time...

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.
  },
  // ...
})

I don't get it, why do i have to specify clientPort ?, why is it not defaulted to the port being used at client ? I recently from from CRA to Vite. CRA simple calls ${HOST}/sockjs-node and i dont have to configure much. everything would just works. but on Vite, i have to configure clientPort, and since i'm behind a reverse proxy, which listen to different ports everytime, i have to manually change clientPort to whatever the proxy gave me.

Maybe you can configure the clientPort dynamically and read it out by yourself in the config file.
If you did it, please share your solution here for others.

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.
  },
  // ...
})

Hi @vfonic,

Im using a similar setup to you, setting the clientPort to the web interface port that is displayed at the end of the Web Interface address in the terminal window you started ngrok in.

@KaiSpencer you're saying that websocket connection works with only ngrok and I don't need to run localtunnel as well?

@KaiSpencer you're saying that websocket connection works with only ngrok and I don't need to run localtunnel as well?

Yes I am just running ngrok. This seems to fix the infinite reload, but the browser console hangs at connecting and the HMR doesnt work, and requires a manual refresh to detect changes. Not ideal, but useable.

Ahhh, well you could try my setup. It works, but uses two tunnels.

I just realized I posted my instructions in another issue, I can't find it now.

Here's how I configured everything:

vite.config.ts:

// ...
export default defineConfig({
// ...
  server: {
    hmr: {
      host: `some-ngrok-subdomain.loca.lt`,
      port: 443,
    },
  },
// ...

package.json:

"devDependencies": {
  "localtunnel": "2.0.1",
  "ngrok": "^4.2.2"
}

And then I start everything:

./node_modules/.bin/lt --subdomain=some-ngrok-subdomain--port=3036
./node_modules/.bin/ngrok http -subdomain=some-ngrok-subdomain

This issue and App keeps refreshing with log: Server connection lost polling for restart might be talking about the same issue. I've posted my solution with two tunnels in both. I hope it helps someone.

Hi. I'm new to Vite and trying to import a test project which uses websockets. I've deployed a websocket server (basically this verbatim) to Heroku. In my project, I connect to the server using wss://name-of-app.herokuapp.com. Without Vite, this works fine. In the Vite version, running npm run dev, the local site fails to connect to the public server.

There are multiple issues here which sound possibly related, but neither the documentation nor the issues and comments are on a level that I can derive if there is something I can do to make it work and what it would be. :-\

@patak-dev Can you please reopen this, as #7463 was reverted in #7522?

My temporary solution for this was to use vite-plugin-replace, I hope one day it will update so it works normally.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteCommonjs } from '@mb1337/vite-plugin-commonjs'
import { vitePluginReplace } from "@mb1337/vite-plugin-replace"

// https://vitejs.dev/config/
export default defineConfig(async ({ mode, command }) => {
  return {
    plugins: [react(), viteCommonjs(), vitePluginReplace({ replacements: [{ from: /__HMR_PORT__/g, to: '__HMR_PORT__.replace(3000, location.port)' }] })],
    server: {
      host: true,
      strictPort: true,
      hmr: {
        path: '/vite'
      },
      proxy: {
        '/api': {
          target: 'http://localhost:2000'
        },
        '/socket.io': {
          target: 'http://localhost:2000',
          ws: true
        }
      }
    }
  }
})