3
Memulai
Halaman ini menjelaskan cara menjalankan proyek secara lokal: menyiapkan basis data D1, mengisi .env, lalu menyalakan dev server. Rincian nama variabel dan binding dibahas di Konfigurasi Environment dan Binding, sedangkan rilis ke produksi dibahas di Deployment ke Cloudflare Pages.
Prasyarat
Lingkungan pengembangan didefinisikan oleh shell.nix, yang menyediakan nodejs dan gh di dalam mkShell shell.nix:1-61. Berkas .envrc hanya berisi use nix, jadi direnv memuat shell itu saat direktori proyek dimasuki .envrc:1-1.
| Kebutuhan | Nilai di repository | Rujukan |
|---|---|---|
Runtime Node.js dan CLI gh | pkgs.nodejs, pkgs.gh di nativeBuildInputs | shell.nix:1-61 |
| Pemuat shell | use nix | .envrc:1-1 |
| Basis data D1 | binding = "DB", database_name = "githubroast" | wrangler.toml:28-312 |
| Kunci API | OPENAI_API_KEY, GITHUB_API_KEY, TELEGRAM_API_KEY | .env.example:1-33 |
| Dependency | svelte, @sveltejs/kit, @sveltejs/adapter-cloudflare, openai, wrangler | package.json:13-344 |
Diagram berikut menunjukkan urutan ketergantungannya. npm run dev baru berguna setelah dependency terpasang dan database sudah diimpor.
graph TD
nix["shell.nix: nodejs + gh"] --> deps["npm install"]
env[".env: OPENAI_API_KEY, GITHUB_API_KEY"] --> deps
d1["D1 database githubroast"] --> remote["wrangler d1 import --remote ./database.sql"]
d1 --> localimp["wrangler d1 import --local ./database.sql"]
deps --> dev["npm run dev"]
remote --> dev
localimp --> dev
style nix fill:#f59e0b,color:#000
style env fill:#f59e0b,color:#000
style d1 fill:#336791,color:#fff
style deps fill:#2d7d46,color:#fff
style remote fill:#336791,color:#fff
style localimp fill:#8b5cf6,color:#fff
style dev fill:#2d7d46,color:#fff
%% fig: Prasyarat sebelum dev server
%% desc: shell.nix, berkas .env, dan database D1 harus siap sebelum npm run dev menyalakan dev server.Menyiapkan Basis Data D1
Bagian Setup di README memuat empat langkah: membuat database D1 baru, mengimpor ./database.sql ke remote, mengimpor berkas yang sama ke local, lalu menjalankan npm run dev README.md:7-105.
Nama database pada langkah pertama harus cocok dengan database_name = "githubroast" di blok [[d1_databases]], karena binding DB itulah yang dibaca handler sebagai platform.env.DB wrangler.toml:28-312. Handler memakai binding tersebut dua kali: untuk membaca riwayat roast dan untuk menyisipkan roast baru src/routes/llama/+server.js:40-446.
Berkas database.sql membuat tabel roasts dengan kolom id, gh_username, response, created_at, country, dan language, lalu satu index bernama gh_username_idx database.sql:2-117.
graph LR
sql["./database.sql"] --> remoteimp["wrangler d1 import --remote ./database.sql"]
sql --> localimp["wrangler d1 import --local ./database.sql"]
remoteimp --> remotedb[("D1 remote: githubroast")]
localimp --> localdb[("D1 local: githubroast")]
style sql fill:#f59e0b,color:#000
style remoteimp fill:#336791,color:#fff
style remotedb fill:#336791,color:#fff
style localimp fill:#8b5cf6,color:#fff
style localdb fill:#8b5cf6,color:#fff
%% fig: Dua target impor database.sql
%% desc: Perintah wrangler d1 import dijalankan dua kali dengan flag berbeda, satu untuk database remote dan satu untuk salinan local.⚠️
database.sqltidak memiliki kolomip_address, tetapiINSERT INTO roastsmenyebut enam kolom termasukip_addresssrc/routes/llama/+server.js:194-2078. Di database hasil impor, pernyataan itu gagal dan kegagalannya tertelan olehcatch {}yang kosong, sehingga roast tetap dikirim ke pengguna tanpa tersimpan. Bandingkan definisi tabel di database.sql:2-117 dengan daftar kolom di handler sebelum mengandalkan riwayat roast saat mengembangkan secara lokal.
Mengisi .env
+server.js mengimpor OPENAI_API_KEY dan GITHUB_API_KEY dari $env/static/private, lalu langsung memakainya pada new OpenAI({ apiKey: OPENAI_API_KEY }) src/routes/llama/+server.js:1-79. Karena diimpor sebagai static, nilainya disisipkan saat build atau saat dev server dimulai, bukan dibaca ulang per request.
| Variabel | Sifat | Pemakaian |
|---|---|---|
OPENAI_API_KEY | wajib | argumen apiKey untuk client OpenAI src/routes/llama/+server.js:1-79 |
GITHUB_API_KEY | opsional | memasang header Authorization: token ... bila terisi src/routes/llama/+server.js:49-5110 |
TELEGRAM_API_KEY | tidak dipakai | hanya ada di .env.example, tidak dirujuk kode mana pun .env.example:1-33 |
Salin .env.example menjadi .env, lalu isi nilainya .env.example:1-33. Tanpa GITHUB_API_KEY, permintaan ke GitHub API dikirim tanpa token dan lebih cepat kena rate limit src/routes/llama/+server.js:49-5110.
Menjalankan Dev Server
npm run dev menjalankan vite dev package.json:5-1211. Konfigurasi Vite memasang lokalTunnel dengan tunnelName: 'GitHub Roast' dan lanAddress: 'github-roast.local', sehingga dev server juga bisa dibuka dari perangkat lain di jaringan lokal vite.config.js:5-1212.
Untuk menguji binding D1 secara lokal, gunakan npm run preview yang menjalankan npm run build lalu wrangler pages dev package.json:5-1211. Konfigurasi Pages diambil dari wrangler.toml, termasuk pages_build_output_dir = ".svelte-kit/cloudflare" wrangler.toml:413.
| Perintah | Yang dijalankan | Kegunaan |
|---|---|---|
npm run dev | vite dev | pengembangan UI dengan hot reload package.json:5-1211 |
npm run preview | npm run build + wrangler pages dev | menguji aplikasi beserta binding D1 lokal package.json:5-1211 |
npm run build | vite build | menghasilkan keluaran untuk adapter-cloudflare package.json:5-1211 |
Setelah dev server hidup, alur request yang dilayaninya dijelaskan di Alur Permintaan Roast.