Bun for Full Stack
0 107
🧩 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!
Share:
Comments
Waiting for your comments