Belajar Bun Dasar #6: Membuat Web Server dengan Bun

• Membuat Web Server Sederhana
• Menambahkan Header Response
• Menangani Routing Sederhana
• Mengambil Data dari Request Body
• Menjalankan Server dengan Environment Variable
• Menampilkan File Statis
• Kesimpulan

Halo teman-teman semuanya, pada pembahasan sebelumnya kita telah mempelajari tentang Module System di Bun, di mana kita sudah memahami cara menggunakan import, export, dan kompatibilitas antara ESM serta CommonJS. Sekarang, kita akan melangkah ke bagian yang lebih menarik, yaitu membuat Web Server dengan Bun.

Salah satu fitur yang membuat Bun sangat efisien adalah adanya HTTP Server bawaan, sehingga kita tidak memerlukan framework tambahan seperti Express hanya untuk menjalankan server sederhana.

Membuat Web Server Sederhana

Langkah pertama, buat file baru bernama server.js, lalu isi dengan kode berikut:

Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Halo dari Bun!");
  },
});

Sekarang jalankan server dengan perintah berikut:

bun run server.js

Jika tidak ada error, buka browser dan akses:

http://localhost:3000

Maka akan tampil teks:

Halo dari Bun!

Kode di atas adalah contoh web server paling sederhana di Bun. Fungsi Bun.serve() berfungsi seperti http.createServer() pada Node.js, tetapi jauh lebih cepat dan lebih ringkas.

Menambahkan Header Response

Kita juga bisa menambahkan header HTTP di dalam response, misalnya untuk mengatur content-type:

Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response(JSON.stringify({ message: "Halo dari Bun!" }), {
      headers: {
        "Content-Type": "application/json",
      },
    });
  },
});

Ketika diakses melalui browser atau curl, output yang muncul akan berupa JSON:

{"message":"Halo dari Bun!"}

Menangani Routing Sederhana

Untuk membuat beberapa route dalam satu server, kita bisa memanfaatkan request.url dan melakukan pengecekan manual.

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

    if (url.pathname === "/") {
      return new Response("Ini halaman utama");
    } else if (url.pathname === "/about") {
      return new Response("Ini halaman tentang kami");
    } else {
      return new Response("Halaman tidak ditemukan", { status: 404 });
    }
  },
});

Jika kita buka:

• http://localhost:3000/ → menampilkan “Ini halaman utama”
• http://localhost:3000/about → menampilkan “Ini halaman tentang kami”
• http://localhost:3000/apa-saja → menampilkan “Halaman tidak ditemukan”

Dengan logika sederhana seperti ini, kita sudah bisa membangun sistem routing manual tanpa framework tambahan.

Mengambil Data dari Request Body

Server Bun juga bisa membaca request body, misalnya untuk menerima data dari metode POST.

Contoh:

Bun.serve({
  port: 3000,
  async fetch(request) {
    if (request.method === "POST") {
      const data = await request.json();
      return new Response(`Data diterima: ${JSON.stringify(data)}`, {
        headers: { "Content-Type": "application/json" },
      });
    }

    return new Response("Gunakan metode POST untuk mengirim data");
  },
});

Coba kirim request dengan curl:

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

Maka hasilnya akan berupa:

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

Menjalankan Server dengan Environment Variable

Kita juga bisa mengambil nilai port dari file .env, seperti yang telah kita pelajari sebelumnya.

.env

PORT=4000

server.js

Bun.serve({
  port: process.env.PORT || 3000,
  fetch() {
    return new Response(`Server berjalan di port ${process.env.PORT}`);
  },
});

Jalankan perintah:

bun run server.js

Maka server akan berjalan pada port 4000 sesuai dengan nilai di .env.

Menampilkan File Statis

Bun juga mendukung pembacaan file statis secara langsung. Misalnya, kita ingin menampilkan isi file HTML dari folder public.

Struktur proyek:

public/
 └─ index.html
server.js

server.js

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

    if (url.pathname === "/") {
      const file = Bun.file("public/index.html");
      return new Response(file);
    }

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

Isi file public/index.html:

<!DOCTYPE html>
<html>
  <head><title>Halo dari Bun</title></head>
  <body><h1>Selamat datang di server Bun!</h1></body>
</html>

Ketika diakses di browser, halaman HTML akan muncul seperti server web biasa.

Kesimpulan

Bun menyediakan HTTP Server bawaan yang sederhana namun sangat cepat, tanpa memerlukan library tambahan. Kita bisa membuat server, mengatur routing, membaca body request, dan menampilkan file statis hanya dengan beberapa baris kode.

Pada artikel selanjutnya, kita akan mempelajari bagaimana Membuat Routing Manual di Bun agar aplikasi server kita lebih terstruktur dan mudah dikembangkan.

Terima Kasih