Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Vite server.hmr.path configuration. #119

Closed
scott-lc opened this issue Mar 5, 2022 · 1 comment
Closed

Add support for Vite server.hmr.path configuration. #119

scott-lc opened this issue Mar 5, 2022 · 1 comment

Comments

@scott-lc
Copy link

scott-lc commented Mar 5, 2022

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'
@fi3ework
Copy link
Owner

released in 0.4.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants