Belajar Bun Dasar #7: Routing Manual di Bun

• Membuat Routing Dasar
• Membuat Routing dengan Object Mapping
• Menangani Metode HTTP (GET, POST, PUT, DELETE)
• Membuat Router Modular
• Menangani Route dengan Parameter
• Kesimpulan

Halo teman-teman semuanya, pada pembahasan sebelumnya kita sudah belajar bagaimana membuat Web Server dengan Bun menggunakan fungsi Bun.serve(). Kita juga telah menampilkan response teks, JSON, hingga file HTML sederhana.

Nah, pada materi kali ini kita akan melangkah lebih jauh dengan membangun Routing Manual di Bun agar struktur server lebih terorganisir.

Bun sebenarnya belum memiliki router bawaan seperti Express di Node.js, tetapi kita bisa dengan mudah membuat sistem routing sederhana sendiri menggunakan URL dan fetch() handler bawaan Bun.

Membuat Routing Dasar

Kita akan mulai dengan membuat server yang dapat menangani beberapa rute secara manual.

server.js

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

    if (url.pathname === "/") {
      return new Response("Selamat datang di halaman utama!");
    }

    if (url.pathname === "/about") {
      return new Response("Ini adalah halaman About.");
    }

    if (url.pathname === "/contact") {
      return new Response("Hubungi kami di kontak@santrikoding.com");
    }

    return new Response("Halaman tidak ditemukan", { status: 404 });
  },
});

Sekarang jalankan:

bun run server.js

Kemudian buka di browser:

• http://localhost:3000/ → “Selamat datang di halaman utama!”
• http://localhost:3000/about → “Ini adalah halaman About.”
• http://localhost:3000/contact → “Hubungi kami di kontak@santrikoding.com”

Dengan cara ini, kita sudah memiliki routing dasar tanpa library tambahan.

Membuat Routing dengan Object Mapping

Agar kode lebih rapi, kita bisa menyimpan daftar route di dalam objek, lalu memanggil handler-nya secara dinamis.

server.js

const routes = {
  "/": () => new Response("Halaman Utama"),
  "/about": () => new Response("Tentang Kami"),
  "/contact": () => new Response("Kontak Kami"),
};

Bun.serve({
  port: 3000,
  fetch(request) {
    const url = new URL(request.url);
    const handler = routes[url.pathname];

    if (handler) {
      return handler();
    }

    return new Response("404 - Halaman Tidak Ditemukan", { status: 404 });
  },
});

Pendekatan ini membuat kode lebih mudah dikembangkan ketika jumlah route semakin banyak.

Menangani Metode HTTP (GET, POST, PUT, DELETE)

Bun juga memungkinkan kita menangani berbagai metode HTTP dengan mudah menggunakan request.method. Contoh implementasi API sederhana:

server.js

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

    if (url.pathname === "/api/hello" && request.method === "GET") {
      return new Response("Halo dari GET endpoint!");
    }

    if (url.pathname === "/api/hello" && request.method === "POST") {
      const data = await request.json();
      return new Response(`Data diterima: ${JSON.stringify(data)}`, {
        headers: { "Content-Type": "application/json" },
      });
    }

    if (url.pathname === "/api/hello" && request.method === "DELETE") {
      return new Response("Data berhasil dihapus!");
    }

    return new Response("Endpoint tidak ditemukan", { status: 404 });
  },
});

Coba kirim request menggunakan curl:

curl -X GET http://localhost:3000/api/hello

Output:

Halo dari GET endpoint!

Atau kirim data:

curl -X POST http://localhost:3000/api/hello -H "Content-Type: application/json" -d '{"nama":"Santri Koding"}'

Output:

Data diterima: {"nama":"Santri Koding"}

Membuat Router Modular

Agar struktur proyek lebih rapi, kita bisa memisahkan route ke dalam file tersendiri.

Struktur folder:

src/
 ├─ routes/
 │   ├─ home.js
 │   ├─ about.js
 │   └─ contact.js
 └─ server.js

• src/routes/home.js

  export function home() {
    return new Response("Ini adalah halaman utama dari Bun!");
  }
  

• src/routes/about.js

  export function about() {
    return new Response("Ini halaman tentang kami.");
  }
  

• src/routes/contact.js

  export function contact() {
    return new Response("Hubungi kami di halo@santrikoding.com");
  }
  

• src/server.js

  import { home } from "./routes/home.js";
  import { about } from "./routes/about.js";
  import { contact } from "./routes/contact.js";
  
  const routes = {
    "/": home,
    "/about": about,
    "/contact": contact,
  };
  
  Bun.serve({
    port: 3000,
    fetch(request) {
      const url = new URL(request.url);
      const route = routes[url.pathname];
  
      if (route) return route();
      return new Response("404 - Halaman Tidak Ditemukan", { status: 404 });
    },
  });
  

Sekarang struktur server kita menjadi modular, mudah dikembangkan, dan tetap cepat.

Menangani Route dengan Parameter

Kadang kita ingin menangani route dengan parameter, seperti /user/123. Bun tidak memiliki router parser bawaan, tapi kita bisa membuat logika sederhana menggunakan split().

server.js

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

    if (url.pathname.startsWith("/user/")) {
      const id = url.pathname.split("/")[2];
      return new Response(`Detail pengguna dengan ID: ${id}`);
    }

    return new Response("Halaman tidak ditemukan", { status: 404 });
  },
});

Jika kita mengakses http://localhost:3000/user/101, maka akan muncul:

Detail pengguna dengan ID: 101

Kesimpulan

Dengan memanfaatkan fitur bawaan Bun.serve() dan sedikit logika manual, kita dapat membangun sistem routing sederhana namun efisien di Bun tanpa bantuan framework eksternal.

Kita dapat menangani berbagai endpoint, metode HTTP, parameter dinamis, serta memecah rute ke dalam file terpisah agar lebih rapi.

Pada artikel berikutnya, kita akan membahas Membaca dan Menulis File di Bun (fs module) untuk mengelola data dan file di sisi server.

Terima Kasih