honojs/hono

fixed: asset url import not working

Closed this issue · 4 comments

ajaishankar commented

What version of Hono are you using?

4.3.3

What runtime/platform is your app running on?

CloudFlare Workers

What steps can reproduce the bug?

Thanks for this amazing project!

Was trying out the CloudFlare starter and wanted to import a logo.png

import { Hono } from 'hono'
import { renderer } from './renderer'

import logo from './logo.png'

const app = new Hono()

app.use(renderer)

app.get('/', async (c) => {
  return c.render(
    <>
      <img src={logo}></img>
      <h1>Hello Hono</h1>
    </>)
})

export default app

When I run the dev server the logo path shows as <img src="/src/logo.png"/> and I'm getting a 404

Not sure what I'm doing wrong?

What is the expected behavior?

I'd expect to see the logo

What do you see instead?

Getting a 404

Additional information

If I add ssrEmitAssets to the vite.config

  build: {
    assetsDir: "static",
    ssrEmitAssets: true
  }

It does get generated during the build

vite v5.2.11 building SSR bundle for production...
✓ 44 modules transformed.
dist/static/logo-BC-ZWNTt.png  13.50 kB
dist/_worker.js                27.50 kB
ajaishankar commented

Figured it out!

Had to add .png to exclude in vite.config.ts

import devServer, { defaultOptions }  from '@hono/vite-dev-server'

devServer({
  adapter,
  entry: 'src/index.tsx',
  exclude: [/.*\.png/, ...defaultOptions.exclude]
}),

@yusukebe better documentation on what exactly dev server exclude does might be helpful.

It's not clear what this means

The paths that are not served by the dev-server.

Does that mean anything in exclude is served by vite instead of hono dev server?

An example of what you would want to be served by hono dev server (instead of vite) would be nice.

ajaishankar commented

I'm loving Hono, thanks for such a great framework!

My use case is JSX SSR on the server and Hotwire on the client

Had it working on Fastify Vite

But switching to Hono for the multi-runtime/serverless support...