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:

bun create react-router@latest

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:

cd my-app

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

nvim package.json

Ganti bagian scripts, jadi gini:

  "build": "bunx --bun react-router build",
  "dev": "bunx --bun react-router dev",
  "start": "bunx --bun react-router-serve ./build/server/index.js",
  "typecheck": "bunx --bun react-router typegen && tsc"

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:

export async function loader() {
  console.log(Bun.which("ls"));
}

export default function Home() {
  return <div>Test Bun</div>;
}

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:

bun add @types/bun

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

...
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["node", "vite/client", "@types/bun"],
    "target": "ES2022",
...

Ini biar lo dapet autocompletion dan IDE lo nggak ngambek.

Gitu aja kira-kira.