HonoH
Hono•2y ago
Readable name

How do I properly serve static files (generated by Astro)?

I'm trying to serve files built by Astro along with their imports. Currently only the html files without imports get served.

For example, http://localhost:3000/_astro/headerBg.C9Twm_Bk.png returns 404.

Here's my project structure:
├── client
...
│   ├── dist
│   │   ├── _astro
│   │   │   ├── 1.B70Zm12J_Z1OQE6k.webp
│   │   │   ├── 1.CoPNPzgA_Z2oQRy6.webp
│   │   │   ├── 1.CvrDwceM_2hTgs5.webp
│   │   │   ├── 1.lOGBak8s_phMG7.webp
│   │   │   ├── 2.B9-t1mcm_Z2Ukse.webp
│   │   │   ├── 2.sCC6bkJT_3IyJb.webp
│   │   │   ├── 3.CFts3sLf_ZAehgJ.webp
│   │   │   ├── 4.BwhrQHhY_23uVlh.webp
│   │   │   ├── about.FEnGzRqN_ZVYYpv.webp
│   │   │   ├── headerBg.C9Twm_Bk.png
│   │   │   ├── headerLogo.DBN-vjd1.png
│   │   │   ├── hoisted.BKH3BkdJ.js
│   │   │   ├── hoisted.DV4tCpfM.js
│   │   │   ├── index.DC9QqUou.css
│   │   │   ├── page.BmZDMUlE.js
│   │   │   ├── SixHandsChalk.DcYQEjWh.ttf
│   │   │   └── why.b67OkUTD_Z1J2InU.webp
│   │   ├── favicon.svg
│   │   ├── index.html
│   │   ├── reset.css
│   │   └── test
│   │       └── index.html
...
└── server
...
    ├── src
...
    │   ├── index.ts
...


And here's the code from index.ts:
import "./setup"

import { Hono } from "hono"
import { serveStatic } from "hono/bun"

import errorHandler from "./functions/errorHandler"
import api from "./routes/api"

const app = new Hono({ strict: true })

app
  .use("/*", serveStatic({ root: "../../client/dist/" }))
  .get("/", serveStatic({ path: "/index.html" }))

app.route("/api", api)

// Error
app.onError(errorHandler)

export type AppT = typeof app
export default app


Please ask me to share any other info you need to help. Thanks!
Was this page helpful?