Money Management Panduan Instalasi & Deploy

Supabase Cloud + Vercel, dari nol sampai online.

Tanpa nulis backend, tanpa kelola server sendiri. Panduan ini nuntun clone baru sampai punya project Supabase yang jalan dan deployment publik di Vercel — sekitar 15 menit dari awal sampai akhir.

req

Prasyarat

Node.js 20+ dan npm
Akun gratis di supabase.com dan vercel.com
Source project, sudah di-unzip lokal (atau sudah di-push ke repo GitHub/GitLab/Bitbucket — wajib buat Opsi A di Langkah 5)

Buat project Supabase

Buka database.new, buat project baru. Pilih region terdekat dari user; catat password database-nya.
Tunggu proses provisioning (~2 menit), lalu buka Project Settings → API.
Salin Project URL dan key anon public — dua-duanya dipakai di Langkah 4.

Pakai key anon saja. Key service_role nembus Row Level Security dan tidak boleh masuk ke kode frontend atau file .env.

Jalankan migrasi

Buka SQL Editor di dashboard Supabase, jalankan tiap file dari supabase/migrations/, urut, satu per satu:

File	Fungsi
20260904090001_schema.sql	Enum, tabel, index
20260904090002_rls_policies.sql	Row Level Security — mengisolasi data tiap user
20260904090003_views_functions.sql	View bantu period-index dan ringkasan
20260904090004_triggers.sql	Otomatis bikin profil, kategori & default saat sign-up
20260904090005_rpc_onboarding.sql	RPC `complete_onboarding()` untuk wizard onboarding
20260911000001_akun_saldo.sql	Pelacakan saldo per akun
20260911000002_pecah_akun_gabungan.sql	Memecah baris akun gabungan lama

Mau pakai script? Supabase CLI bisa jalankan folder yang sama secara urut:

npx supabase@latest login
npx supabase@latest link --project-ref <project-ref-kamu>
npx supabase@latest db push

Install ulang di atas database yang sudah ada? Jalankan supabase/reset.sql dulu — ini menghapus semua tabel, type, function, dan akun user di project. Backup dulu; tidak bisa di-undo.

Isi data demo — opsional

Buat akun yang sudah terisi data buat demo atau screenshot, jalankan salah satu ini di SQL Editor setelah migrasi selesai. Masing-masing idempotent dan waktu-relatif (data selalu berakhir di "hari ini").

supabase/seed_demo_idr.sql

demo@keuanganku.app / demo1234 — Rupiah, Bahasa Indonesia

supabase/seed_demo_usd.sql

demo.en@keuanganku.app / demo1234 — USD, English

Rincian lengkap isi tiap seed: docs/DEMO.md.

Environment lokal

cp .env.example .env

Isi dua nilai dari Langkah 1:

VITE_SUPABASE_URL=https://project-id-kamu.supabase.co
VITE_SUPABASE_ANON_KEY=anon-key-kamu

npm install
npm run dev

Buka localhost:5173. Daftar akun baru, atau login pakai akun demo dari Langkah 3.

Secara default, akun baru wajib konfirmasi email. Buat testing lokal cepat, matikan di Authentication → Providers → Email → Confirm email pada dashboard Supabase — nyalakan lagi sebelum go-live.

Deploy ke Vercel

A — Dashboard (disarankan)

Push repo ke GitHub/GitLab/Bitbucket → vercel.com/new → Import → Framework preset Vite → tambahkan dua env var yang sama dari Langkah 4 → Deploy.

B — CLI

npm i -g vercel
vercel login
vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY
vercel --prod

vercel.json sudah mengarahkan semua route ke index.html, jadi client-side routing (React Router) tetap jalan saat refresh atau akses link langsung — tidak perlu setting tambahan.

Checklist pasca-deploy

Buka URL Vercel, selesaikan wizard onboarding pakai akun baru.
Tambah satu pemasukan dan satu pengeluaran — pastikan saldo dashboard ke-update.
Kalau pakai domain custom, tambahkan di Vercel saja; tidak ada perubahan di sisi Supabase karena auth di sini email/password, tidak ada redirect URL OAuth yang perlu didaftarkan.
Nyalakan lagi Confirm email di Supabase kalau tadi dimatikan buat testing (Langkah 4).

Pemecahan masalah

"VITE_SUPABASE_URL dan VITE_SUPABASE_ANON_KEY harus disetel di file .env" saat startup — env var belum diisi atau salah nama. Vite cuma expose var berawalan VITE_, dan dibaca saat build: setelah edit .env, restart npm run dev, atau trigger deploy baru di Vercel.

Dashboard kosong setelah sign-up — trigger di 20260904090004_triggers.sql yang ngisi kategori default dan master data pas user baru dibuat. Kalau belum jalan, ulangi migrasi 1–5 secara urut di database bersih.

404 saat refresh halaman di production — pastikan vercel.json ikut ke-deploy; file ini yang bikin deep link fallback ke index.html.