In Vite, you are able to configure customer settings for the websocket connection between the frontend application and the backend Vite dev server:
https://vitejs.dev/config/#server-hmr
As mentioned in the Vite documentation, this is useful when you are using an SSL proxy in front of Vite dev server. This is exactly what I am doing, using NGINX as an SSL proxy, passing HTTPS/SSLtraffic on port
443 to the Vite dev server running on (by default) port 3000
.
However, because of how one uses NGINX as a websocket proxy, I need to proxy websocket (wss://
) traffic over a different path. Vite supports this via the server.hmr.path
configuration option:
vite.config.js
defineConfig({
// ...
server: {
hmr: {
clientPort: 443,
path: '/hmr'
},
host: 'x.y.z',
port: 3000,
strictPort: true
}
This all works perfectly with Vite. However, vite-plugin-checker
does not allow the same configuration options, so it tries to establish a websocket connection to:
const socketProtocol = null || (location.protocol === 'https:' ? 'wss' : 'ws')
const socketHost = `${location.hostname}:${location.port}`
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
Whereas the HMR traffic, from Vite's perspective, is being sent on ${socketProtocol}://${socketHost}/${vite.server.hmr.path}
As, such, I get the following error in the console when the page loads:
WebSocket connection to 'wss://x.y.z/' failed: Error during WebSocket handshake: Unexpected response code: 404
@vite-plugin-checker-runtime:1347
What I am looking for is a configuration option that lets me specify the path that the vite-plugin-checker
websocket code should connect to. That is, connect to wss://x.y.z/${path}
as opposed to wss://x.y.z/
.
Here is pertinent code in vite:
https://github.com/vitejs/vite/blob/76bbcd09985f85f7786b7e2e2d5ce177ee7d1916/packages/vite/src/client/client.ts#L25
In my example example, the __HMR_xxx__
values are injected as:
__HMR_PROTOCOL__ = 'wss';
__HMR_HOSTNAME__ = 'x.y.z:443/hmr'