How to proxy Vite's HMR request in Docker?

user_192729 0
Viewed 1999

I have a developer environment where there is an Nginx dev server and some requests are routed to my local machine and some a routed to the staging environment in the internet.

I'm using vitejs.dev and everything works except for the Websocket connection of Vite's Hot Module Replacement (HMR).

vite.config.ts

export default defineConfig({
  server: {
    host: true,
    port: 3300,
    hmr: {
      path: '/__vite_hmr',
    },
  },
})

nginx config

location ~* /__vite_hmr {
    proxy_pass "http://cr-frontend:3300";
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

I can successfully proxy other requests to http://cr-frontend:3300 but not Vite's HMR. This is what I get:

client.ts:28 WebSocket connection to 'wss://url.xyz:3300/__vite_hmr' failed:

Any idea?

vite node.js nginx
1 Answers

Vite's documentation of the config options for the server and server.hmr properties is just shabby.

I've got rid of the same error you get with this config:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    //https://github.com/vitejs/vite/discussions/3396
    host: true,
    port: 8015, //default is 3000 but I have multiple apps within one site running so I need to define multiple custom ports on the same machine / container
    https: true,
    hmr:{
      clientPort: 9026,
    },
  }
})

Where server.port is the internal port of the node docker container and server.hmr.clientPort is the port the browser on my local machine is sending requests to (docker maps my machine's localhost:9026 to the node container's localhost:8015)

user_47212320
Related