Setup Project React Router v7 Pake Bun

Sebenernya nggak ribet-ribet banget buat setup project React Router v7 pakai Bun, cuma gue nggak nemu dokumentasinya aja, sih.

Tapi, ngomong-ngomong, kenapa gue pakai Bun di React Router v7 ini? Karena di perangkat kerja gue (yang pakai Windows 11) Bun lebih cepet, cold start-nya minim dibanding Node.js. Juga lebih banyak built-in APIs-nya, kayak SQLite, gue nggak perlu instal library lagi.

Instalasi

Barangkali lo juga mau pakai Bun buat project React Router v7, begini caranya:

Pertama, jalanin perintah bun create:

Perintah itu buat jalanin program scaffolding-nya React Router, nanti lo bakal ditanya beberapa hal, mulai dari nama project-nya, sampai instal dependencies pakai Bun.

Kalau udah, masuk ke folder project yang baru dibikin:

Abis itu edit file package.json, misal, pakai nvim:

Ganti bagian scripts, jadi gini:

Simpelnya, tambahin bunx --bun sebelum perintah aslinya dari React Router. Ini tujuannya buat ngasih tahu ke Bun kalau program tersebut harus dijalanin pakai runtime-nya Bun, bukan Node. Karena secara bawaan React Router pakai Node. Kalau di-breakdown, gini:

• bunx ini kayak npx kalau di Node alias package runner, tugasnya buat jalanin package/program tanpa harus instal dulu secara eksplisit
• --bun ini flag buat ngasih tahu ke Bun kalau kita pengen pakai runtime-nya Bun alih-alih Node. Kalau tanpa flag ini, Bun bakal bikin process Node.js kalau ada package yang ditandai pakai shebang #!/usr/bin/env node.

Buat ngujinya, bikin route yang isinya begini:

Kalau di terminal muncul log kayak /bin/ls, berarti udah pakai Bun. Kalau sebaliknya muncul error, artinya runtime yang dipakai masih Node.js.

Setup TypeScript

Kalau lo pakai TypeScript, perlu instal type definition-nya Bun. Begini:

Habis itu, tinggal tambahin aja @types/bun ke bagian types di file tsconfig.json yang ada di root project directory:

Ini biar lo dapet autocompletion dan IDE lo nggak ngambek.

Gitu aja kira-kira.