Hono ViteDevServer takes 2s to serve index html

[Phoscur]

Hiho, First of all, I like Hono (played around with it last month), especially the feature that it can run in a service worker...!

If Hono has such great speed, this also needs to apply in the development environment: There is a bottleneck in the current dev-server implementation, it always takes around two seconds on Windows (Node v21.7) to return the index HTML.

Is on-demand TypeScript compilation taking too much time? Should I use Bun for faster server responses?

Reproduction:

0. Run npm create hono@latest - choose x-basic & npm & Y to install
1. npm run dev
2. open localhost:5173 with dev tools network tab open
3. (trigger a) refresh: /-document takes about 2000ms load

Yesterday, I've tried to make Vite a middleware for Hono instead: (based on https://github.com/bluwy/create-vite-extra/blob/master/template-ssr-vanilla/server.js#L23)

  const { createServer } = await import("vite")
  vite = await createServer({
    server: { middlewareMode: true },
    appType: "custom",
    base
  })
  const vmw = (c, body) => new Promise(resolve => vite.middlewares({
    headers: c.req.raw.headers,
    url: c.req.url,
    body,
  }, {
    ...c.res, 
    setHeader: c.header,
  }, resolve))
  // inject into nodemon/tsx reloaded server
  app.use(async (c, next) => {
    await next()
    return vmw(c, await c.req.parseBody())
  })

It does not serve the client files yet, probably req.url handling being different...?

Here is a related discussion: https://github.com/orgs/honojs/discussions/1520

I think it would be nice to have two utilities:

• convertHonoToConnectMiddleware (use hono nested into an express server)
• convertConnectToHonoMiddleware (use express e.g. vite dev server middleware nested into hono server)

These come in very handy when trying to migrate projects. Or when adapting existing Connect middleware until it is rewritten for performance reasons (in this case, hono-vite-dev-server has matured).

[yusukebe]

Hi @Phoscur

I never felt it was too late. In my environment, it is very fast.

And @hono/vite-dev-server is doing what you're talking about.

https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/src/dev-server.ts#L76

[Phoscur]

In my environment

Which is? Have you tried on Windows?

https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/src/dev-server.ts#L76

Yes exactly. I still wonder if it might be worth trying to reverse the approach to using Vite as a middleware like here: https://github.com/bluwy/create-vite-extra/blob/master/template-ssr-vanilla/server.js#L23

[Phoscur]

OK ouch, I can only reproduce this slow load in my (favorite Developer) Firefox :( So it's not Windows. Chromium loads it in 3ms

[Phoscur]

So I freshly installed vanilla Firefox, which does not have the issue so I guess it's on my side and one of my extensions... or I just have too many tabs open... omg time to close this issue.

@yusukebe do you want me to comment my feature request for the Connect Adapters in the discussion (again)?

[yusukebe]

@Phoscur

Making Connect Adapters is interesting. However, using them means converting Node.js Incoming/Outgoing Messages to web-standard Request/Response, which leads to performance degradation.

I don't want to do too much. Users can create their own projects, and we can link to them on our website. You are welcome to do so.