Development with https proxy + HMR (recipe)

[zealot128]

In Dev, we run the server proxied by a Caddy/Nginx, so that https works great, and we can easily guess the hostnames of each developer and the development systems are reachable from outside (WebHook-Test etc.).
Also, we are using one big shared machine for work, so the ports are automatically assigned for the rails-server and vite-server, and the Caddy sorts the traffic:

1. Proxy config:

This is an example of a Caddy-like config to proxy both the rails-server (Port 3000 in this example), and Vite (Port 3001 in this example)

 realdomain.company.com:443, {
    proxy /ws localhost:3001 {
      websocket
    }
    # proxy /__webpack_dev_server__ localhost:3001 {
    #  websocket
    # }
    proxy /sockjs-node localhost:3001 {
     websocket
    }
    proxy /vite-dev localhost:3001 {
      websocket
    }
    proxy / localhost:3000 {
      websocket
      transparent
      except /sockjs-node
    }
    ...
  }

For this to work, we are using the environment variables when running vite dev (in our setup we have a small wrapper that determines the port automatically by app-type+developer):

VITE_RUBY_PORT=3001
VITE_RUBY_HOST=0.0.0.0
VITE_RUBY_AUTO_BUILD=false
VITE_RUBY_HTTPS=false
## this env is not used by Vite-Ruby, but in our config below
VITE_WSS_HOST=realdomain.company.com

Also, then we still got errors in development regarding HMR, so we fixed it by setting the ws-host in die Vite-conf directely:

 export default defineConfig({
   server: {
      hmr: {
        host: process.env.VITE_WSS_HOST,
        clientPort: 443,
        # port: 443, <--- older VITE versions
        protocol: "wss",
      },
    },

Otherwise, the HMR script that got injected will point to a wrong host, like "ws://localhost:3001", but we want it to be "wss://realdomain.company.com"

[ElMassimo]

Thanks for sharing Stefan! Should be useful for folks using Caddy in a similar manner.

Regarding the last point, it might be related to #179, which means it might require no config once that's reverted.

[ElMassimo]

@zealot128 Released vite-plugin-ruby@3.0.8 which might avoid the need to configure server.hmr.host explicitly (not sure given that you are using https, and still might require manual configuration).