Vite with SSR in Docker behind Traefik

[designermonkey]

I am at my wits' end here after two days of reading and re-reading the same posts on the internet about how to get this setup working.

As far as I can see, this is a common enough setup that I am really surprised there is no useful documentation or even an official tutorial on how to do this. I even resorted to asking ChatGPT and Perplexity, both of the examples provided still didn't work!

The issue is this:

• I have Traefik set up correctly. I have been using Traefik for years and I know it's quirks, and I know it, by default, upgrades websocket connections.
• I have my docker container building properly using Node 24 and Vite 7.0.6. I know it builds properly as I can run vite dev locally, end even our SSR server works locally.
• I put the two together and follow the severly lacking instructions on how to get hmr set up behind a reverse proxy, aaaand, it fails.

The HMR config is set inside the SSR server call to make a ViteDevServer (using the example from vite-create-ssr (I think it's called that)). It is as follows:

  vite = await createServer({
    server: {
      middlewareMode: true,
      host: '0.0.0.0',
      port: port,
      // strictPort: true,
      allowedHosts: true,
      // proxy: {
      //   '/socket.io': {
      //     target: `ws://localhost:5432`,
      //     ws: true,
      //     secure: false,
      //   },
      // },
      hmr: {
        host: hmr_host,
        clientPort: 80,
        // port: 5432,
        // path: '/socket.io'
      },
      watch: {
        usePolling: true,
      },
    },
    appType: 'custom',
    base,
  })

As you can see, I have even tried the proxy. With it configured as above, it simple fails in the browser with no message on the server. Client errors:

client:745 WebSocket connection to 'ws://providers.microntech.io/?token=7tBS5lgoOFUD' failed: 
createConnection @ client:745
connect @ client:412
connect @ client:751
connect @ client:290
connect @ client:374
(anonymous) @ client:823
client:772 [vite] failed to connect to websocket (Error: WebSocket closed without opened.). 
connect @ client:772
await in connect
connect @ client:290
connect @ client:374
(anonymous) @ client:823
client:424 Uncaught (in promise) Error: WebSocket closed without opened.
    at WebSocket.<anonymous> (client:424:30)
(anonymous) @ client:424

Can anyone out there get this working?

[barthol0]

The fundamental issue is that WebSocket connections require HTTP server capability for the upgrade handshake, which Express alone doesn't provide in the way Vite HMR expects when you run Vite in middlewareMode. You need to give Vite’s HMR a real Node HTTP server to attach its WS upgrade handler to.

import { createServer as createHmrServer } from 'node:http'
import express from 'express'
import type { ViteDevServer } from 'vite'

const base = process.env.BASE || '/'
const hmrHost = process.env.HMR_HOST || 'localhost'

const app = express()
const hmrServer = createHmrServer(app) // <- real HTTP server for HMR
let vite: ViteDevServer

const { createServer } = await import('vite')

vite = await createServer({
  server: {
    middlewareMode: true,
    hmr: {
      server: hmrServer,   // <- hand Vite the server
      host: hmrHost,       // <- your public domain behind Traefik
      clientPort: 80,      // <- 80 if Traefik terminates TLS; use 443 + 'wss' if not
      protocol: 'ws',
    },
    watch: { usePolling: true },
  },
  appType: 'custom',
  base,
})

// then mount Vite middlewares as usual
app.use(vite.middlewares)
// start your main app server as you normally do