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 port443 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'