Belajar ElysiaJS - Hello World & Project Setup Pertama

#Pendahuluan

Setelah di episode 2 kita memahami arsitektur ElysiaJS — core routing berbasis TypeBox, plugin system, dan Eden Treaty — pada episode ini kita langsung terjun ke praktik. Kita akan membuat proyek pertama, menjalankan server, dan memahami setiap baris kode dalam aplikasi minimal ElysiaJS.

Mengapa langsung praktik? Karena memahami arsitektur secara teori tanpa sentuh kode akan membuat konsep terasa abstrak. Dengan menjalankan server pertama, kalian akan melihat langsung bagaimana semua komponen — TypeBox, routing, fetch handler — bekerja bersama.

#Membuat Proyek Pertama

Gunakan perintah scaffold bawaan Bun untuk membuat proyek ElysiaJS baru:

bun create elysia hello-elysia

Perintah ini akan membuat direktori hello-elysia dengan struktur proyek siap pakai:

hello-elysia/
  src/
    index.ts        # entry point
  package.json
  tsconfig.json

Masuk ke direktori proyek dan install dependencies:

cd hello-elysia
bun install

#Menjalankan Server

#Development Server

Untuk memulai development server dengan auto-reload:

bun run dev

Server akan berjalan di http://localhost:3000. Buka browser atau gunakan curl:

curl http://localhost:3000
# Output: Hello Elysia!

Auto-reload akan mendeteksi perubahan file dan me-restart server secara otomatis — sangat nyaman saat development.

#Production Build

Untuk production, build dulu lalu jalankan:

bun run build
bun run start

bun run build mengkompilasi TypeScript ke JavaScript, lalu bun run start menjalankan versi production yang sudah di-optimasi.

#Anatomi Aplikasi ElysiaJS Minimal

Mari kita bedah kode di src/index.ts:

import { Elysia } from 'elysia'
 
const app = new Elysia()
  .get('/', () => 'Hello Elysia!')
  .listen(3000)

Baris per baris:

1. import { Elysia } from 'elysia': Import class utama ElysiaJS.
2. new Elysia(): Membuat instance baru — inilah aplikasi kalian.
3. .get('/', () => 'Hello Elysia!'): Mendaftarkan route GET / dengan handler yang mengembalikan string.
4. .listen(3000): Memulai server di port 3000.

#Cara Kerja .listen()

Di balik panggilan .listen(3000), ElysiaJS menggunakan Bun.serve() — HTTP server bawaan Bun yang dioptimasi untuk performa tinggi:

// ElysiaJS pada dasarnya melakukan ini di bawah hood:
Bun.serve({
  port: 3000,
  fetch(request) {
    // routing logic + handler execution
    return new Response('Hello Elysia!')
  }
})

Fetch handler menerima Request object dan mengembalikan Response object — sesuai Web Standard API yang digunakan Bun. Ini juga berarti ElysiaJS kompatibel dengan lingkungan yang mendukung Web Standard API, termasuk Cloudflare Workers.

#Penutup

Episode 3 menandai langkah pertama kalian dari teori ke praktik ElysiaJS. Kita telah membuat proyek, menjalankan server, dan memahami anatomi kode minimal.

Inti yang harus dibawa pulang:

• bun create elysia membuat proyek baru dengan struktur siap pakai.
• bun run dev menjalankan dev server dengan auto-reload di port 3000.
• bun run build && bun run start untuk production build.
• .listen() menggunakan Bun.serve() di bawah hood — HTTP server bawaan Bun.
• Aplikasi minimal hanya butuh 4 baris kode: import, new Elysia, route definition, listen.

Di episode 4 selanjutnya kita akan memahami routing dan HTTP methods — dynamic parameters, query strings, multiple HTTP methods, dan route grouping. Sampai jumpa di episode 4!