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

[Lippiece]

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!

[Lippiece]

Resolved by moving the dist folder to the server's folder and using this:

...
app.use("/*", serveStatic({ root: "dist/" }))
...