How to use `vite.createServer` with `Bun.serve`?

[Blankeos]

What is the problem this feature would solve?

Since Bun.serve doesn't have http.Incoming and http.ServerResponse, I'm wondering how to implement an equivalent of this Node code in Bun.

In Node:

import { Hono } from 'hono'
import { serve, type HttpBindings } from '@hono/node-server'
import type { ViteDevServer } from 'vite'

const base = process.env.BASE || '/'

const app = new Hono<{ Bindings: HttpBindings }>()

let vite: ViteDevServer
if (!isProduction) {
    const { createServer } = await import('vite')
    vite = await createServer({
        server: { middlewareMode: true },
        appType: 'custom',
        base
    })
    app.use(async (c, next) => {
        const viteDevMiddleware = () => new Promise<void>((resolve) => {
            vite.middlewares(c.env.incoming, c.env.outgoing, () => resolve())
        });
        await viteDevMiddleware()
        await next()
    })
}

serve({
    fetch: app.fetch,
    port
});

What is the feature you are proposing to solve the problem?

Maybe an adapter for Bun.serve with http.Incoming and http.ServerResponse if it's possible?

What alternatives have you considered?

No response

[huseeiin]

this is not an issue in bun. you cannot use connect middleware directly with Bun.serve. you should use express or polka or fastify with @fastify/middie

[Blankeos]

After some experimenting, this one actually works: https://github.com/vikejs/vike-node/blob/main/packages/vike-node/src/runtime/adapters/connectToWeb.ts

it's by @nitedani. Here's my current code with working Bun + Vite HMR + Custom Websocket handler + Watching of backend changes (like in controllers).

Only caveats I noticed (reproducible in the above example):

• bun run --watch server.ts will cause an infinite loop when Vite.createServer is called (Basically same problem as this https://github.com/oven-sh/bun/issues/5278#issuecomment-1816083713). So I'm using nodemon because it can exclude watching of other files).
• In incognito HMR will break. Something about Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
• HMR + Custom Websocket Handler works. BUT watching backend changes is scuffed because it will "lose connection" to the server and reconnect again. (losing frontend state)

[s00d]

Hi, I’ve been looking for examples of integrating Vite into other projects for a long time, but always ran into issues. Yesterday, I finally sat down to study the docs and ended up building this project: https://github.com/s00d/bun-rolldown-boilerplate

I wrote a middleware converter from Vite to Bun — you can see it here:
https://github.com/s00d/bun-vite-boilerplate/blob/main/src/server/routes/router.ts

It basically works in two modes: dev and production. Hot reload seems to work too.
If you're interested, feel free to check out how I did it.