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)