Hot Module Replacement (HMR)

Hot Module Replacement (HMR) allows you to update modules in your application without a full page reload. When using Porthole, WebSocket connections for HMR must be properly configured to route through the tunnel.

WebSocket Tunneling

Porthole automatically tunnels WebSocket connections. However, frontend frameworks like Vite or Astro often need to know the public hostname and port to establish the WebSocket connection correctly from the browser.

Configuration Sample

If you are using Vite (or Astro, which uses Vite), update your configuration to use the tunnel’s hostname for HMR.

Vite / Astro Config

// vite.config.js or astro.config.mjs
export default {
  server: {
    // Required for Vite 5+ to allow the tunnel's hostname
    allowedHosts: ['.porthole.dev'],
    hmr: {
      // The protocol should be 'wss' for HTTPS tunnels
      protocol: 'wss',
      // This ensures the browser connects to the tunnel's public URL
      host: process.env.TUNNEL_HOST || 'your-subdomain.porthole.dev',
      // The public port for the tunnel (usually 443 for HTTPS)
      clientPort: 443,
    },
  },
}

By setting clientPort to 443 and protocol to wss, you tell the Vite client in the browser to connect back to the HTTPS tunnel rather than trying to connect to localhost.