Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Trying to host Vue3 development on a remote machine, using vite to serve development, do hot module replacement (HMR), etc., and it works perfectly when developing locally.

I'd like to be able to develop remotely, and so I thought I'd set up an instance, put the dev stuff on it, and run a caddy instance to front port 3000 to port 80.

This almost works. I get the page served fine, but HMR fails, and the page reloads itself every few seconds because the websocket cannot connect.

I can add another port forward with caddy, but it appears that it has to have a different path (e.g., I can forward everything for path '/static' to some other port), but it doesn't appear, from a cursory look at the vite code, that the websocket code uses a different path, it just runs via '/' like everything else. Is there a separate path? Can one be configured?

Is there a way to deal with this?

Thanks!

If anyone is still looking for a solution to this. Add the following line to your vite.config.js file:

server: { hmr: { port: 80 },  },
Change the port number to match whatever your port your browser is using. (e.g. if running in a docker container setup as 3005:3000, then you would want to set this config to 3005 not 3000)
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.