I am trying to serve static frontend only react apps through bun and using hono for framework. My code for server is :

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

const app = new Hono();

// Config
app.use(
  cors({
    origin: ["http://localhost", "https://localhost"],
    allowMethods: ["GET", "POST"],
    exposeHeaders: ["Content-Type"],
    maxAge: 300,
  })
);

// Static paths
app.use("/assets/*", serveStatic({ root: "../dist/links/assets/" }));
app.use(
  "/portfolio/assets/*",
  serveStatic({ root: "../dist/portfolio/assets/" })
);

// Routes
app.get("/", serveStatic({ path: "../dist/links/index.html" }));
app.get(
  "/portfolio",
  serveStatic({
    path: "../dist/portfolio/index.html",
  }),

);

// Start server
try {
  const server = Bun.serve({
    fetch: app.fetch,
    port: process.env.PORT || 3000,
  });
  console.log("Server started on port : ", server.port);
} catch (e) {
  console.error("Error occured while starting the server : ", e);
}

My directory structure is like : enter image description here

I tried everything. Litterally every relative and absolute path possible. I used path.resolve(). It still wont serve the static files. Please help its frustrating. The docs are of no help at all.

I am trying to serve static frontend only react apps through bun and using hono for framework. My code for server is :

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

const app = new Hono();

// Config
app.use(
  cors({
    origin: ["http://localhost", "https://localhost"],
    allowMethods: ["GET", "POST"],
    exposeHeaders: ["Content-Type"],
    maxAge: 300,
  })
);

// Static paths
app.use("/assets/*", serveStatic({ root: "../dist/links/assets/" }));
app.use(
  "/portfolio/assets/*",
  serveStatic({ root: "../dist/portfolio/assets/" })
);

// Routes
app.get("/", serveStatic({ path: "../dist/links/index.html" }));
app.get(
  "/portfolio",
  serveStatic({
    path: "../dist/portfolio/index.html",
  }),

);

// Start server
try {
  const server = Bun.serve({
    fetch: app.fetch,
    port: process.env.PORT || 3000,
  });
  console.log("Server started on port : ", server.port);
} catch (e) {
  console.error("Error occured while starting the server : ", e);
}

My directory structure is like : enter image description here

I tried everything. Litterally every relative and absolute path possible. I used path.resolve(). It still wont serve the static files. Please help its frustrating. The docs are of no help at all.

• javascript
• typescript
• bun
• hono

Share Improve this question Follow edited Mar 3 at 14:58 Sourabrata Bose asked Mar 3 at 14:57 Sourabrata BoseSourabrata Bose 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

My understanding is that the paths used for serving static files are relative to project root (i.e., wherever you're calling bun run ...).

I copy/pasted your code into the index file of a simple project:

/src
 - /index.ts
/dist
 - /links
 - /index.html

and updated the static file paths accordingly:

// serveStatic({ path: '../dist/links/index.html' })
app.get(
  '/',
  serveStatic({ path: './dist/links/index.html' }),
);

After updating the paths, I was able to visit the served pages without issue. I'm not entirely sure how this translates to your project setup, but static serving does work with [email protected] and [email protected].