Belajar HonoJS - Hello World & Project Setup Pertama

#Pendahuluan

Setelah di episode 2 kita memahami arsitektur Hono — RegExpRouter, context object, dan Web Standard API — pada episode ini kita langsung terjun ke praktik. Kita akan membuat proyek pertama, menjalankan server, dan memahami setiap baris kode dalam aplikasi minimal Hono.

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 bekerja bersama.

#Membuat Proyek Pertama

#Cloudflare Workers (Recommended)

Buat proyek Hono untuk Cloudflare Workers

npm create hono@latest my-api

Pilih template Cloudflare Workers saat diminta. Ini akan membuat proyek dengan konfigurasi Wrangler yang siap deploy.

#Bun Runtime

Buat proyek Hono untuk Bun

bun create hono@latest my-api

Pilih template Bun untuk local development tanpa Cloudflare.

#Node.js

Buat proyek Hono untuk Node.js

npm create hono@latest my-api

Pilih template nodejs untuk berjalan di Node.js.

#Struktur Proyek

#Cloudflare Workers

Struktur folder Cloudflare Workers

my-api/
  src/
    index.ts        # entry point
  wrangler.toml     # Cloudflare Workers config
  package.json
  tsconfig.json

#Struktur Node.js/Bun

Struktur folder Node.js/Bun

my-api/
  src/
    index.ts        # entry point
  package.json
  tsconfig.json

#Menjalankan Development Server

#Cloudflare Workers

Jalankan dev server dengan Wrangler

npm run dev

Server berjalan di http://localhost:8787 — simulated Workers environment.

#Node.js/Bun

Jalankan dev server

npm run dev

Server berjalan di http://localhost:3000.

#Test Endpoint

Test endpoint pertama

curl http://localhost:8787
# Output: Hello Hono!

#Anatomi Aplikasi Hono Minimal

Mari kita bedah kode di src/index.ts:

src/index.ts: aplikasi Hono minimal

import { Hono } from 'hono'
 
const app = new Hono()
 
app.get('/', (c) => {
  return c.text('Hello Hono!')
})
 
export default app

Baris per baris:

import { Hono } from 'hono': Import class utama Hono.
new Hono(): Membuat instance baru — inilah aplikasi kalian.
app.get('/', ...): Mendaftarkan route GET /.
c.text('Hello Hono!'): Mengembalikan response text/plain.
export default app: Export app untuk Cloudflare Workers runtime.

#Mengapa `export default app`?

Cloudflare Workers membutuhkan export default handler yang mengimplementasikan Fetch API. Hono secara otomatis mengkonversi app menjadi fetch handler — ini yang membuatnya kompatibel dengan Workers.

#Production Build

#Cloudflare Workers

Build dan deploy ke Cloudflare

npm run build
npx wrangler deploy

#Node.js/Bun

Build dan jalankan production

npm run build
npm run start

Tip

Untuk Cloudflare Workers, gunakan wrangler dev untuk local development yang mensimulasikan environment Workers. Ini memastikan kode kalian akan berjalan persis sama di production.

#Penutup

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

Inti yang harus dibawa pulang:

npm create hono@latest membuat proyek baru dengan template siap pakai.
Pilih template sesuai runtime: Cloudflare Workers, Bun, atau Node.js.
export default app adalah kunci kompatibilitas dengan Cloudflare Workers.
c.text(), c.json(), c.html() untuk berbagai jenis response.

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