HMR not working properly with https/wss protocol

[tinhcao-optimizely]

Hi @FlorianRappl

This may be related to the previous issue. Especially your last comment about injecting a script to handle the connection to the HMR socket.
My previous problem was basically solved by configuring apache. But it was basically a workaround rather than a solution. So I created this issue so we can continue the discussion. Many thank for your help.

We are currently using the custom domain myapp.localhost.com instead of localhost:1234 to debug the App shell and the Pilets.

here is my vite.config.ts

import react from '@vitejs/plugin-react-swc'
import { fileURLToPath, URL } from 'node:url'

export default {
  base: '/app-ui',
  plugins: [react()],
  resolve: {
    alias: {
      '@shared': fileURLToPath(new URL('./src/shared', import.meta.url)),
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests-setup.ts',
    coverage: {
      include: ['src/**'],
      exclude: ['src/mocks/**'],
      reporter: ['text', 'json', 'html'],
    },
  },
}

my config apache

<VirtualHost *:443>
  ServerName myapp.localhost.com
  ProxyRequests Off
  <Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

  # Proxy Vite HMR WebSocket (wss://)
  RewriteEngine On
  RewriteCond %{HTTP:Upgrade} =websocket [NC]
  RewriteRule /(.*) ws://localhost:1234/$1 [P,L]
  ProxyPass /$events ws://localhost:1234/$events
  ProxyPassReverse /$events ws://localhost:1234/$events

  ProxyPass /app-ui http://localhost:1234 retry=0
  ProxyPassReverse /app-ui http://localhost:1234

  ProxyPass /backend-api https://mybackend.localhost.com
  ProxyPassReverse /backend-api https://mybackend.localhost.com

  SSLProxyEngine on
  ProxyPassMatch ^/$ !
  RedirectMatch ^/$ /app-ui/

  ProxyPass / https://mybackend.localhost.com retry=0
  ProxyPassReverse / https://mybackend.localhost.com

  SSLEngine on
  SSLCertificateFile    /etc/apache2/ssl/mycert.localhost.cer
  SSLCertificateKeyFile /etc/apache2/ssl/mycert.localhost.key
  SSLHonorCipherOrder On
  SSLCipherSuite ALL:!ADH:!DH:!eNULL:!aNULL:!EXP:!LOW:+MEDIUM:+HIGH:!SSLv2
</VirtualHost>

You pointed me to the exact line in your package where the websocket URL is defined, and it looks to me that there it could be possible to avoid the problem if it didn't turns https into wss.

asset.code = `(() => new WebSocket(location.origin.replace('http', 'ws')+"/$events").onmessage = () => location.reload())();${asset.code}`;

I am not sure, but I think that if Piral changed the replacement on that line to always use the ws: protocol, and not wss: when I am debugging over HTTPS, it would work out of the box, without the proxy rewrite.

[FlorianRappl]

I am not sure if that is a good idea. In general if somebody uses HTTPS then the same server should be used for the WebSocket, too, i,e., requiring WSS in that case.

Maybe we can make this configurable, though.