Using Hono with Bun and Vite for SSR and serving static files

[uorhsohk]

Hi everyone,

I have the following boilerplate code, which is basically created with the command: bunx create-vite-extra and then choosing.

✔ Select a template: › ssr-vue
✔ Select a variant: › Non-streaming
✔ Select a variant: › TypeScript

I have simplified the server.js file a bit for brevity.

import { Hono } from 'hono';
import fs from 'node:fs/promises';

import { serveStatic } from 'hono/bun'
const port = process.env.PORT || 3000;
const base = process.env.BASE || '/';
const app = new Hono();
let ssrManifest = await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8');

app.use('./dist/client/*', serveStatic({ root: './' }))
app.get('/', async (c) => {
  const url = c.req.url.replace(base, '');
  let template = await fs.readFile('./dist/client/index.html', 'utf-8');

  let render = (await import('./dist/server/entry-server.js')).render;
  const rendered = await render(url, ssrManifest);



  const html = template
    .replace(`<!--app-head-->`, rendered.head ?? '')
    .replace(`<!--app-html-->`, rendered.html ?? '');

  return c.html(html);
});

export default app;

console.log(`Server started at http://localhost:${port}`);

Now the problem is, that my CSS and JavaScript file gives a 404 back:

http://localhost:3000/assets/index-olW6NV7-.css
http://localhost:3000/assets/index-CW4QtCzv.js

The problem, I assume, is with the following line:

app.use('/', serveStatic({ path: './dist/client' }))

But I sadly don't know how to fix it.

The equivalent line of code using sirv is:

app.use(base, sirv('./dist/client', { extensions: [] }))

[fortezhuo]

It depend on your project structure. I am using vike-node. Built on top of vike. Vike provides SSR for Vite. And I ever got problem like you have, just define the static path correctly

const __filename = fileURLToPath(import.meta.url)
const root = dirname(__filename)
export const distClient = resolve(root, "./client")

export const ssr = () =>
  vikeNode({
    pageContext: (c: Context) => {
      return {
        preference: c.var.preference,
        user: c.var.user,
        vendor: c.var.vendor,
      }
    },
    static: {
      root: distClient,
    },
  })