hono
hono copied to clipboard
honojs
Bun "serveStatic" doesn't seem to serve at url
What version of Hono are you using?
3.12.8
What runtime/platform is your app running on?
Bun
What steps can reproduce the bug?
I am trying to recreate the example: https://hono.dev/getting-started/bun#serve-static-files but I can't seem to get it working.
What is the expected behavior?
That I can access the static files provided with the serverStatic function
What do you see instead?
I am getting status 404 whatever I try.
Additional information
import apiRoutes from "api/routes";
import appRoutes from "app/routes";
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
const app = new Hono();
app.use(
"/static/*",
serveStatic({
root: "/",
onNotFound: (path, c) => {
console.log(`${path} is not found, you access ${c.req.path}`);
},
})
);
app.use("/favicon.ico", serveStatic({ path: "./favicon.ico" }));
app.route("/", appRoutes);
app.route("/api", apiRoutes);
export default app;
Trying to access it from RootLayout:
import { Style } from "hono/css";
import type { FC } from "hono/jsx";
import Footer from "../components/Footer";
import Header from "../components/Header";
type Props = {
title: string;
};
const RootLayout: FC<Props> = ({ children, title }) => (
<html>
<head>
{/* CSS Style for Hono */}
<Style />
{/* StyleSheets */}
<StyleSheets />
{/* Scripts */}
<Scripts />
<title>{title}</title>
</head>
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
const StyleSheets: FC = () => (
<>
{/* Open Props Variables */}
<link rel="stylesheet" href="https://unpkg.com/open-props" />
{/* Normalize CSS */}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<link rel="stylesheet" href="static/css/style.css" />
</>
);
const Scripts: FC = () => (
<>
{/* AlpineJS */}
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
</>
);
export default RootLayout;
This is my structure:
├── api
│ └── routes.ts
├── app
│ ├── routes.tsx
│ └── views
│ ├── components
│ │ ├── Footer.tsx
│ │ ├── Grid
│ │ │ ├── Grid.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ ├── Header
│ │ │ ├── Header.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ ├── Modules
│ │ │ └── Hero
│ │ │ ├── Hero.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ └── UI
│ │ ├── Accordion
│ │ │ ├── Accordion.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ ├── Button
│ │ │ ├── Button.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ ├── Dialog
│ │ │ ├── Dialog.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ ├── Icons
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Spinner.tsx
│ │ │ └── X.tsx
│ │ ├── Link
│ │ │ ├── Link.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ └── Typography
│ │ ├── Headline
│ │ │ ├── Headline.tsx
│ │ │ ├── index.ts
│ │ │ └── styles.ts
│ │ └── Text
│ │ ├── Text.tsx
│ │ ├── index.ts
│ │ └── styles.ts
│ ├── layout
│ │ └── Root.tsx
│ └── pages
│ ├── Home.tsx
│ └── UI
│ ├── UI.tsx
│ ├── index.ts
│ └── styles.ts
├── directory.structure
├── index.ts
└── static
├── css
│ └── style.css
├── favicon.ico
└── placeholder.jpg
23 directories, 44 files
Same here. I've been trying with both nodejs and bun adapters but the static folder does not seem to be actually served. I tried the same thing with ElysiaJS and it works just fine.
I had some problem with this also, if you add console.log("Path: ", path) after the path variable on line 22 in /adapter/bun/serve-static.ts
What does it say?
Where and how are you launching bun from?`
For me the problem was where I was launching bun from.
@Hmoulvad
Personally, this is how I use serveStatic
app.use('/styles/*', serveStatic({
root: 'public/',
onNotFound: (path, c) => {
console.log(`${path} is not found, you access ${c.req.path}`)
}
}));
This allows me to access the styles in /public/styles/style.css with /styles/style.css. The onNotFound function also helps me debug in real-time.
I personally don't think it's intuitive but any change to it would qualify as a breaking change, so I assume it'd stay this way for a bit longer.
Just find the solution in my case
The root is always relative to the bun execution path.
Meaning if you want to server static the file and folder should be accessible in the path relative to bun.
So if you ran
$usr/serve/app/: bun src/index.ts
And in your code you wrote
app.use('/dashboard/*', serveStatic({ root: 'frontend'}));
Then the files need to be in usr/serve/app/frontend/dashboard
I just want to extend off of the previous answer; I wanted my app to always serve files relative to the script, not the current working directory. Normally I'd just use __dirname or import.meta.dirname for this, but I had trouble getting this working. Perhaps due to something here or here?
Regardless, for now, my workaround was to use path.relative() to get the relative path between the current working directory and the file directory.
const relativePathToScript = path.relative(process.cwd(), __dirname);
app.use('/static/*', serveStatic({ root: relativePathToScript }))
for me it was mostly solved by manually starting hono server, ig it really matter where you start your server from.
