fix(vite): share an https dev server for the hub WebSocket

Author: erkamyaman

packages/vite/src/hub.ts

@@ -2,8 +2,8 @@ import type { DevframeHubUi, DockRendererRegistration, HubDevframeEntry, HubInst
 import type { DevframeHubContext } from '@devframes/hub/node'
 import type { ClientScriptEntry } from '@devframes/hub/types'
 import type { DevframeDefinition } from 'devframe'
+import type { Server as NodeHttpServer } from 'node:http'
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
-import { Server as NodeHttpServer } from 'node:http'
 import process from 'node:process'
 import { DEVFRAMES_HUB_BASE, normalizeHubBase } from '@devframes/hub/constants'
 import { initHub } from '@devframes/hub/initiate'
@@ -180,7 +180,10 @@ export function viteDevframeHub(options: ViteDevframeHubOptions = {}): Plugin {
       // the hub client runtime imports it into the host page.
       const devframes = attachClientScripts(options.devframes, options.clientScripts)
 
-      const httpServer = server.httpServer instanceof NodeHttpServer ? server.httpServer : undefined
+      // Vite's https dev server is an `Http2SecureServer` (or an
+      // `https.Server` with `server.proxy`). Both emit `upgrade` for HTTP/1.1
+      // requests, as Vite's own HMR socket relies on, so share it too.
+      const httpServer = (server.httpServer ?? undefined) as NodeHttpServer | undefined
 
       const hub = initHub({
         base,
@@ -198,8 +201,8 @@ export function viteDevframeHub(options: ViteDevframeHubOptions = {}): Plugin {
         auth: options.auth,
         /**
          * Share Vite's own HTTP server for the WS upgrade at `<base>__ws`, with no
-         * side-car port to discover. A pinned `port` uses a side-car instead;
-         * an https/http2 dev server (non-`node:http`) asks for an auto-port
+         * side-car port to discover. A pinned `port` uses a side-car instead,
+         * and a middleware-mode Vite (no `httpServer`) asks for an auto-port
          * side-car. Clients discover either via `__connection.json`.
          */
         server: httpServer,
@@ -267,8 +270,8 @@ export function viteDevframeHub(options: ViteDevframeHubOptions = {}): Plugin {
 
 /**
  * Share Vite's own HTTP server for the WS upgrade unless a `port` pins a
- * side-car, or the dev server isn't a plain `node:http` server (https/http2),
- * which needs an auto-port side-car.
+ * side-car, or there is no server to share (middleware mode), which needs an
+ * auto-port side-car.
  */
 function resolveWsBinding(port: number | undefined, httpServer: NodeHttpServer | undefined): { ws?: { port: number } | { sidecar: true } } {
   if (port != null)

packages/vite/test/hub.test.ts

@@ -0,0 +1,78 @@
+import type { IncomingMessage, Server as NodeHttpServer, ServerResponse } from 'node:http'
+import type { Http2SecureServer } from 'node:http2'
+import type { ViteDevServer } from 'vite'
+import { mkdtempSync } from 'node:fs'
+import { createServer } from 'node:http'
+import { createSecureServer } from 'node:http2'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { getPort } from 'get-port-please'
+import { afterEach, describe, expect, it } from 'vitest'
+import { viteDevframeHub } from '../src/hub'
+
+type ConnectMiddleware = (req: IncomingMessage, res: ServerResponse, next: () => void) => void
+
+/**
+ * Vite on `server.https` hands plugins an `Http2SecureServer` (with
+ * `allowHTTP1`), which is not a `node:http` `Server`. Requests are served
+ * here over a plain HTTP server running the same middleware stack, so the
+ * test needs no certificate.
+ */
+function fakeHttpsViteServer() {
+  const stack: ConnectMiddleware[] = []
+  const requestServer: NodeHttpServer = createServer((req, res) => {
+    let i = 0
+    const next = (): void => {
+      const handler = stack[i++]
+      if (!handler) {
+        res.statusCode = 404
+        res.end()
+        return
+      }
+      handler(req, res, next)
+    }
+    next()
+  })
+  const httpServer: Http2SecureServer = createSecureServer({ allowHTTP1: true })
+  const server = {
+    httpServer,
+    resolvedUrls: null,
+    middlewares: { use: (handler: ConnectMiddleware) => stack.push(handler) },
+  }
+  return { server, httpServer, requestServer }
+}
+
+describe('viteDevframeHub', () => {
+  let cleanup: (() => Promise<void>) | undefined
+
+  afterEach(async () => {
+    await cleanup?.()
+    cleanup = undefined
+  })
+
+  it('shares an https (http2) dev server for the WebSocket upgrade', async () => {
+    const host = '127.0.0.1'
+    const port = await getPort({ port: 19800, host })
+    const { server, httpServer, requestServer } = fakeHttpsViteServer()
+    await new Promise<void>(resolve => requestServer.listen(port, host, resolve))
+
+    const plugin = viteDevframeHub({
+      ui: false,
+      auth: false,
+      quiet: true,
+      cwd: mkdtempSync(join(tmpdir(), 'devframe-vite-hub-')),
+    })
+    cleanup = async () => {
+      httpServer.emit('close')
+      await (plugin.closeBundle as () => Promise<void>)()
+      requestServer.close()
+      requestServer.closeAllConnections()
+    }
+    await (plugin.configureServer as (s: ViteDevServer) => Promise<void>)(server as any)
+
+    const res = await fetch(`http://${host}:${port}/__devframes/__connection.json`)
+    const meta = await res.json() as { websocket?: unknown }
+    expect(meta.websocket).toEqual({ path: '/__devframes/__ws' })
+    expect(httpServer.listenerCount('upgrade')).toBe(1)
+  })
+})