WebSocket connection can not work inside Docker container

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I use Docker container to develop a Vite app.

I use the default port 3000 for app, and expose 8080 from Docker container. Normally I can open the app inside Docker container from host machine’s browser with 127.0.0.1:8080. The index.html page shown correctly, but the console of browser throw an error of WebSocket connection and infinitely refresh page:

[vite] connecting… VM1722 vue.js:8446 You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production. VM1719 client:25 WebSocket connection to ‘ws://127.0.0.1:3000/’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED (匿名) @ VM1719 client:25 VM1719 client:125 [vite] server connection lost. polling for restart…

The WebSocket connection port is the same as default port(or port set in vite.config.ts), and didn’t use the port 8080.

Reproduction

Create a app inside a Docker container, expose a different port from Vite config, run.

After search in Vite’s code, I find the WebSocket port is set in https://github.com/vitejs/vite/blob/master/src/client/client.ts#L35 and comes from the config file vite.config.ts.

To make it work, I modified the node_modules/vite/dist/client/client.js#L23, manually set the expose port 8080 and it works. The error gone.

I think the problem is caused by the script run in client, it get port from config in app, and can’t get the port in browser. If we could add a config item socketPort or is there a method to automatically get the right port in browser?

Many Thanks!

System Info

• required vite version: 1.0.0-rc.4
• required Operating System: debian 10 with Docker image node:12.18.3-alpine
• required Node version: 12.18.3
• Optional:
  • npm/yarn version: 1.22.0
  • Installed vue version (from yarn.lock or package-lock.json): vue@^3.0.0-rc.5
  • Installed @vue/compiler-sfc version: vue@^3.0.0-rc.5

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[cpietsch]

Hey any news on merging this issue ? Would love to use vite on github codespace.

[angela-1]

@shortpoet

The issues from a privite project, and I have uploaded a new public project to show the structure. You can see https://github.com/angela-1/azalea

You should read the README.md to make it work.