HTML Imports & Full-Stack Routes in Bun

From the Bun cheat sheet · HTTP Server · verified Jul 2026

HTML Imports & Full-Stack Routes

Import .html into routes — Bun bundles JS/CSS automatically (Bun 1.2+)

typescript
// Import HTML files directly — Bun bundles their <script>/<link> deps
import index from './index.html'
import dashboard from './dashboard.html'

Bun.serve({
  port: 3000,
  routes: {
    '/': index,                       // bundled, served, hot-reloaded
    '/dashboard': dashboard,

    // API mixed with HTML in the same server
    '/api/posts': {
      GET: () => Response.json([]),
      POST: async (req) => Response.json(await req.json(), { status: 201 }),
    },

    '/api/posts/:id': (req) =>
      Response.json({ id: req.params.id }),
  },

  development: true,                  // browser-side error overlay + HMR
})
💡 import index from "./index.html" — Bun bundles its JS/CSS/TS into the response
⚡ Per-method handlers (GET/POST/PATCH/DELETE) replace if/else routing chains
📌 development: true enables Bun's browser-side error overlay + HMR
🎯 One server can mix HTML routes, JSON APIs, static files, and WebSocket upgrades
fullstackroutesmodern

More Bun tasks

Back to the full Bun cheat sheet