Noticable page refresh when using nginx proxy in front of vite

[charlesbrandt]

When a web server (e.g. nginx) is sitting in front of the vite dev server and acting as a proxy, there is a frequent visible page refresh that happens automatically.

If I remove the nginx proxy, the issue disappears. However, then I need to different cross-origins for the ui and api containers.

I've got an example repo that illustrates this behavior here: https://gitlab.com/fern-seed/web-vite-api-data

Requirements: docker, docker-compose

git clone https://gitlab.com/fern-seed/web-vite-api-data

To use the browser included with Cypress, ensure you've run xhost local:root (on linux). Otherwise, map boilerplate.local to 127.0.0.1 in /etc/hosts:

127.0.0.1	boilerplate.local

launch the services:

cd web-vite-api-data
docker-compose up -d
docker-compose ps

Navigate to the application in a browser. The automated page refresh is visible.

Any ideas on how to prevent the visible refresh without getting rid of the proxy?

[jonaskuske]

Two ways to solve this:

1. expose the ui service on port 3000 in Docker, so while the site and its requests are proxied through nginx, the WebSocket can reach the service directly
2. instruct Vite to use the same port for HMR that nginx is exposed on, so the WebSocket goes through the proxy too:

export default defineConfig({
  // ...
  server: {
    hmr: {
      port: 8888 // vite@2.5.2 and newer: clientPort
    }
  }
})

---

But why is it happening?
Vite's HMR tries to reach the Vite server via WebSocket on localhost:3000 – but since the Vite service isn't directly exposed via Docker, the request fails. When that happens, Vite assumes the dev server isn't running (yet) and long polls via normal GET requests, waiting for the dev server to start. Once a request is successful, it knows the server is now running and reloads the page. However, unlike the WebSocket connection (which tries to connect to the Vite server directly on localhost:3000), the GET requests goes through the proxy (/__vite_ping). This means that the GET request is successful, the page reloads, the WebSocket fails again because it doesn't go through the proxy, Vite sends another GET request, reloads on success and voilá, you got yourself your reload loop.

[jonaskuske]

Also see #2563