Bun for Full Stack

0 841

ðŸ§© Bun for Full Stack Development

Full stack development has traditionally required juggling multiple tools â€” Node.js for backend, Webpack or Vite for bundling, Jest for testing, and npm for package management.

But now there's Bun â€” an all-in-one toolkit that can power your full stack app with blazing speed âš¡.

ðŸš€ Why Choose Bun for Full Stack?

Bun isn't just a JavaScript runtime â€” it's also a bundler, transpiler, test runner, and package manager. This means:

ðŸ“¦ Faster installs with bun install
ðŸ§ª Built-in testing with bun test
ðŸš€ Native bundling and transpilation
ðŸ§ Fewer dependencies to configure

By reducing complexity and speeding up development, Bun helps full stack developers focus more on building â€” not tool-chaining.

ðŸ”§ Setting Up a Full Stack Project with Bun

Letâ€™s scaffold a basic full stack app with Bun. Backend will use Bunâ€™s native server and the frontend will be a vanilla HTML+JS app served by the same server.

// index.ts - Backend entry point
Bun.serve({
  port: 3000,
  fetch(req) {
    const url = new URL(req.url);

    if (url.pathname === "/api/hello") {
      return Response.json({ message: "ðŸ‘‹ Hello from Bun API" });
    }

    return new Response(Bun.file("public/index.html"));
  }
});

Create a public/index.html file:

<!DOCTYPE html>
<html>
  <head><title>Bun Full Stack</title></head>
  <body>
    <h1>ðŸ§‘â€ðŸ’» Full Stack with Bun</h1>
    <button onclick="loadData()">Fetch API</button>
    <pre id="output"></pre>
    <script>
      async function loadData() {
        const res = await fetch('/api/hello');
        const data = await res.json();
        document.getElementById('output').textContent = JSON.stringify(data, null, 2);
      }
    </script>
  </body>
</html>

Thatâ€™s it â€” youâ€™ve got a working full stack app with zero build config and one command: bun index.ts âœ…

ðŸ› ï¸ Add a Simple Database (SQLite)

Letâ€™s expand the backend with a simple database using Bunâ€™s SQLite driver:

const db = new Database("data.db");
db.run("CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY, text TEXT)");

Bun.serve({
  port: 3000,
  async fetch(req) {
    const url = new URL(req.url);

    if (url.pathname === "/api/message" && req.method === "POST") {
      const body = await req.json();
      db.run("INSERT INTO messages (text) VALUES (?)", [body.text]);
      return Response.json({ status: "Saved âœ…" });
    }

    if (url.pathname === "/api/message") {
      const messages = db.query("SELECT * FROM messages").all();
      return Response.json(messages);
    }

    return new Response(Bun.file("public/index.html"));
  }
});

Now youâ€™ve got a working database layer for your full stack Bun app ðŸ“¥.

ðŸ§ª Testing Both Frontend & Backend

Bun has a native test runner that supports both backend and frontend logic.

Here's an example of an API unit test:

import { test, expect } from "bun:test";

test("basic API response", async () => {
  const res = await fetch("http://localhost:3000/api/hello");
  const data = await res.json();
  expect(data.message).toBe("ðŸ‘‹ Hello from Bun API");
});

No extra libraries or configs needed. Just run bun test âœ….

ðŸ“¦ Handling Frontend Builds

You can bundle and transpile frontend assets using Bun too:

bun build public/main.js --outdir=dist --minify

It supports JSX, TypeScript, and ES6 out of the box. So even React or Preact-based frontends are easy to set up with Bun ðŸŒŸ.

ðŸ’¡ Full Stack Project Ideas with Bun

ðŸ—‚ï¸ Task manager (SQLite + native APIs)
ðŸ“¬ Real-time chat app (WebSocket support)
ðŸ“Š Analytics dashboard (Bun + React + D3)
ðŸ“š Blog engine (Markdown rendering, SQLite)

ðŸ“ Folder Structure Example

project/
â”œâ”€â”€ index.ts
â”œâ”€â”€ db/
â”‚   â””â”€â”€ sqlite.ts
â”œâ”€â”€ public/
â”‚   â”œâ”€â”€ index.html
â”‚   â””â”€â”€ main.js
â”œâ”€â”€ tests/
â”‚   â””â”€â”€ api.test.ts

ðŸŒ Going Further: Add SSR or APIs

You can integrate Bun with server-side rendering (SSR) frameworks like Elysia or use it to build REST APIs, GraphQL APIs, or static site generators.

Itâ€™s flexible enough to serve as both the frontend engine and the backend server ðŸ› ï¸.

ðŸ Final Thoughts

Bun for full stack development is a game changer. It combines speed, simplicity, and flexibility in one powerful toolset.

Whether youâ€™re building a small prototype or a production-ready app, Bun can handle the frontend, backend, and everything in between.

If youâ€™re passionate about building a successful blogging website, check out this helpful guide at Coding Tag â€“ How to Start a Successful Blog. It offers practical steps and expert tips to kickstart your blogging journey!

For dedicated UPSC exam preparation, we highly recommend visiting www.iasmania.com. It offers well-structured resources, current affairs, and subject-wise notes tailored specifically for aspirants. Start your journey today!