Setup Database

ERD Builder Pro mendukung tiga mode database. Pilih salah satu sesuai kebutuhan Anda.

Aspek	Supabase PostgreSQL	Local PostgreSQL	Desktop (SQLite)
Cocok untuk	Production / Cloud	Development / Self-hosted	Aplikasi Desktop / Tauri
Autentikasi	Supabase Auth (JWT)	Lokal (email + password)	Lokal (email + password)
ID Type	`BigInt`	`Int`	`Int`
Env vars tambahan	`SUPABASE_URL`, `SUPABASE_SERVICE_ROLE_KEY`	—	—
Setup schema	SQL Editor di Dashboard Supabase	`npm run db:push:pg:local`	`npm run db:push:sqlite`
Seed data	— (via SQL Editor)	`npm run db:seed:pg:local`	`npm run db:seed:sqlite`
Generate client	`npm run db:generate:pg`	`npm run db:generate:pg`	`npm run db:generate:sqlite`
Jalankan	`npm run dev`	`npm run dev:pg:local`	`npm run dev:desktop`

Arsitektur Prisma 7 + Driver Adapter

Semua mode menggunakan Prisma 7 dengan driver-adapter pattern. Prisma 7 tidak lagi mendukung datasource.url atau legacy query engine — setiap koneksi harus dibuat dengan adapter yang sesuai:

Mode	Adapter	Package
PostgreSQL	`PrismaPg`	`@prisma/adapter-pg`
SQLite	`PrismaBetterSqlite3`	`@prisma/adapter-better-sqlite3`

Pemilihan adapter terjadi otomatis saat runtime berdasarkan DATABASE_URL:

Jika DATABASE_URL diawali file: atau berakhiran .db → mode SQLite
Jika DATABASE_URL diawali postgresql:// dan tanpa SUPABASE_URL → mode Local PostgreSQL
Jika DATABASE_URL diawali postgresql:// dengan SUPABASE_URL → mode Supabase

Terdapat tiga schema file Prisma yang digunakan tergantung mode:

File Prisma	Mode	ID Type	Auth
`schema.prisma`	Supabase	`BigInt`	Supabase Auth
`schema.pg.prisma`	Local PostgreSQL	`Int`	Lokal
`schema.sqlite.prisma`	Desktop SQLite	`Int`	Lokal

Opsi A: Supabase PostgreSQL (Production)

1. Membuat Proyek Baru

Masuk ke Supabase Dashboard.
Buat proyek baru, pilih Region terdekat, dan simpan Database Password Anda dengan aman.

2. Inisialisasi Database (Schema)

Anda perlu membuat tabel-tabel yang diperlukan secara manual menggunakan SQL Editor:

Buka file supabase_schema.sql yang ada di root direktori aplikasi ERD Builder Pro.
Salin seluruh isi file tersebut.
Di dashboard Supabase, buka menu SQL Editor.
Klik New Query, tempelkan kode yang sudah disalin, lalu klik Run.
Pastikan semua tabel (seperti projects, diagrams, dll) berhasil dibuat.

3. Generate Prisma Client

npm run db:generate:pg

Perintah ini menggenerate Prisma Client menggunakan schema schema.prisma (varian Supabase).

4. Konfigurasi Autentikasi (Privat)

Agar aplikasi Anda tetap privat dan tidak bisa digunakan oleh orang lain:

Buka menu Authentication > Settings.
Di bagian Sign Up, matikan (uncheck) opsi Allow new users to sign up.
Simpan perubahan. Sekarang orang asing tidak bisa mendaftar secara mandiri.

5. Mendaftarkan Akun Anda

Setelah registrasi publik dimatikan, Anda harus membuat akun Anda sendiri secara manual:

Buka menu Authentication > Users.
Klik tombol Add User dan pilih Create new user.
Masukkan Email dan Password yang ingin Anda gunakan.
(Opsional) Matikan opsi "Auto-confirm user" jika Anda ingin memverifikasi email, atau biarkan menyala untuk login instan.
Klik Create User. Gunakan akun ini untuk login ke aplikasi ERD Builder Pro Anda.

6. Mengambil API Keys

Buka menu Settings > API untuk mengambil variabel yang diperlukan di file .env:

Project URL: Masukkan ke SUPABASE_URL dan VITE_SUPABASE_URL.
anon public: Masukkan ke VITE_SUPABASE_ANON_KEY.
service_role: Masukkan ke SUPABASE_SERVICE_ROLE_KEY.

[!CAUTION] Jangan pernah membagikan service_role key Anda kepada siapa pun atau memasukkannya ke dalam kode frontend (tanpa prefix VITE_).

7. Konfigurasi `.env`

DATABASE_URL="postgresql://user:pass@host:6543/db?pgbouncer=true&connection_limit=10"
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key

8. Jalankan Aplikasi

npm run dev

Opsi B: Local PostgreSQL (Development / Self-hosted)

1. Install & Siapkan PostgreSQL

Pastikan PostgreSQL sudah terinstal di mesin Anda. Buat database baru:

createdb erd_builder_pro

2. Konfigurasi `.env`

Di file .env, atur DATABASE_URL dan hapus atau komentari variabel SUPABASE_URL:

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/erd_builder_pro"
# SUPABASE_URL=   ← tidak perlu untuk mode ini
# SUPABASE_SERVICE_ROLE_KEY=   ← tidak perlu

Aplikasi akan otomatis mendeteksi mode Local PostgreSQL selama SUPABASE_URL tidak diisi.

3. Generate Prisma Client

npm run db:generate:pg

Sama seperti mode Supabase, menggunakan schema schema.pg.prisma (varian Local PostgreSQL).

4. Push Schema

npm run db:push:pg:local

Perintah ini akan membuat semua tabel yang diperlukan di database lokal Anda.

Prisma 7 menggunakan db push untuk menyinkronkan schema tanpa file migrasi. Gunakan db:migrate:pg:local jika Anda membutuhkan riwayat migrasi.

5. Seed Data

npm run db:seed:pg:local

Output:

Seeding database...
  ✓ Admin user: admin@local.dev
  ✓ AI Providers: OpenAI, Gemini, OpenAI Compatible
  ✓ OpenAI models: GPT-4o, GPT-4o Mini, GPT-4 Turbo
  ✓ Gemini models: Gemini 1.5 Pro, Gemini 1.5 Flash
  ✓ OpenAI Compatible models: DeepSeek V4 Flash
  ✓ Default system prompt: Simple & Direct

✅ Seed complete

Default credentials:

Email: admin@local.dev
Password: admin123

Seed script menggunakan Prisma 7 adapter pattern yang sama. Pastikan DATABASE_URL di .env mengarah ke database lokal Anda.

6. Jalankan Aplikasi

npm run dev:pg:local

Aplikasi akan tersedia di http://localhost:3000.

Mode Local PostgreSQL menggunakan autentikasi lokal (email + password) dengan Prisma Session, bukan Supabase Auth. Semua akun lokal otomatis menjadi admin.

Opsi C: Desktop / Tauri (SQLite)

Mode ini menggunakan SQLite sebagai database lokal untuk aplikasi desktop berbasis Tauri.

1. Generate Prisma Client untuk SQLite

npm run db:generate:sqlite

Menggunakan schema schema.sqlite.prisma dengan adapter @prisma/adapter-better-sqlite3.

2. Push Schema ke SQLite

npm run db:push:sqlite

Perintah ini membuat file data.db dan membuat 19 tabel:

ai_chat_messages, ai_chat_sessions, ai_models, ai_providers, ai_system_prompts,
backups, columns, diagrams, drawings, entities, entity_changes, flowcharts,
notes, projects, relationships, sessions, user_ai_configs, user_ai_rules, users

3. Seed Data

npm run db:seed:sqlite

Output:

Seeding SQLite database...
  ✓ Admin user: admin@local.dev
  ✓ AI Providers: OpenAI, Gemini, OpenAI Compatible
  ✓ OpenAI models: GPT-4o, GPT-4o Mini, GPT-4 Turbo
  ✓ Gemini models: Gemini 1.5 Pro, Gemini 1.5 Flash
  ✓ OpenAI Compatible models: DeepSeek V4 Flash
  ✓ Default system prompt: Simple & Direct

✅ Seed complete

Default credentials:

Email: admin@local.dev (ubah dengan env ADMIN_EMAIL)
Password: admin123 (ubah dengan env ADMIN_PASSWORD)

4. Verifikasi

sqlite3 data.db ".tables"
# 19 tables listed

sqlite3 data.db "SELECT email FROM users;"
# admin@local.dev

5. Jalankan Aplikasi

# Mode API + Vite (tanpa shell Tauri)
npm run dev:desktop

# Mode Tauri penuh (perlu Rust toolchain)
npm run dev:tauri:servers   # API :3099 + Vite :3098
npm run dev:tauri           # membuka jendela Tauri

dev:desktop menggunakan DATABASE_URL=file:./data.db dan me-override nilai di .env, sehingga kedua mode (Supabase PG di .env dan SQLite di script) bisa berjalan berdampingan.

Saat pertama kali aplikasi desktop dijalankan, user pertama yang mendaftar otomatis menjadi admin. Setelah melakukan seed, fitur ini tidak lagi diperlukan.

Referensi Cepat Script

Command	Tujuan	Schema	`DATABASE_URL`
`npm run db:generate:sqlite`	Generate Prisma Client	`schema.sqlite.prisma`	—
`npm run db:push:sqlite`	Buat tabel SQLite	`schema.sqlite.prisma`	`file:./data.db`
`npm run db:seed:sqlite`	Seed data SQLite	(via `seed.sqlite.ts`)	`file:./data.db`
`npm run db:generate:pg`	Generate Prisma Client	`schema.prisma` / `schema.pg.prisma`	—
`npm run db:push:pg:local`	Buat tabel Local PG	`schema.pg.prisma`	(dari `.env`)
`npm run db:seed:pg:local`	Seed Local PG	(via `seed.sqlite.ts`)	(dari `.env`)
`npm run dev`	Jalankan mode Supabase	`schema.prisma`	(dari `.env`)
`npm run dev:pg:local`	Jalankan mode Local PG	`schema.pg.prisma`	(dari `.env`)
`npm run dev:desktop`	Jalankan mode Desktop	`schema.sqlite.prisma`	`file:./data.db`

Perbedaan Lintas Mode

Aspek	Supabase	Local PostgreSQL / Desktop
Tipe ID	`BigInt` (via `toProjectId()`)	`Number` / `Int`
Status Admin	Dikelola via Supabase Auth	Semua user lokal otomatis admin
Auth	Supabase Auth (JWT)	Prisma Session (lokal)
Kolom `uid`	`@default(uuid())` di Prisma	Harus diisi manual via `randomUUID()` (SQLite)

Masalah Umum

`PrismaClient needs to be constructed with a non-empty, valid PrismaClientOptions`

Prisma 7 membutuhkan opsi adapter — new PrismaClient() tanpa argumen akan gagal. Pastikan aplikasi menggunakan driver adapter yang sesuai.

Schema mismatch saat seed

Script seed bisa gagal jika DATABASE_URL mengarah ke database yang salah. Pastikan:

SQLite: DATABASE_URL=file:./data.db
Local PG: DATABASE_URL di .env mengarah ke database lokal

File `prisma/data.db` stale

File prisma/data.db kadang terbentuk secara tidak sengaja. Untuk mode desktop, gunakan ./data.db (root proyek) dan hapus prisma/data.db.

Arsitektur Prisma 7 + Driver Adapter​

Opsi A: Supabase PostgreSQL (Production)​

1. Membuat Proyek Baru​

2. Inisialisasi Database (Schema)​

3. Generate Prisma Client​

4. Konfigurasi Autentikasi (Privat)​

5. Mendaftarkan Akun Anda​

6. Mengambil API Keys​

7. Konfigurasi .env​

8. Jalankan Aplikasi​

Opsi B: Local PostgreSQL (Development / Self-hosted)​

1. Install & Siapkan PostgreSQL​

2. Konfigurasi .env​

3. Generate Prisma Client​

4. Push Schema​

5. Seed Data​

6. Jalankan Aplikasi​

Opsi C: Desktop / Tauri (SQLite)​

1. Generate Prisma Client untuk SQLite​

2. Push Schema ke SQLite​

3. Seed Data​

4. Verifikasi​

5. Jalankan Aplikasi​

6. Login Bootstrap​

Referensi Cepat Script​

Perbedaan Lintas Mode​

Masalah Umum​

PrismaClient needs to be constructed with a non-empty, valid PrismaClientOptions​

Schema mismatch saat seed​

File prisma/data.db stale​

Arsitektur Prisma 7 + Driver Adapter

Opsi A: Supabase PostgreSQL (Production)

1. Membuat Proyek Baru

2. Inisialisasi Database (Schema)

3. Generate Prisma Client

4. Konfigurasi Autentikasi (Privat)

5. Mendaftarkan Akun Anda

6. Mengambil API Keys

7. Konfigurasi `.env`

8. Jalankan Aplikasi

Opsi B: Local PostgreSQL (Development / Self-hosted)

1. Install & Siapkan PostgreSQL

2. Konfigurasi `.env`

3. Generate Prisma Client

4. Push Schema

5. Seed Data

6. Jalankan Aplikasi

Opsi C: Desktop / Tauri (SQLite)

1. Generate Prisma Client untuk SQLite

2. Push Schema ke SQLite

3. Seed Data

4. Verifikasi

5. Jalankan Aplikasi

6. Login Bootstrap

Referensi Cepat Script

Perbedaan Lintas Mode

Masalah Umum

`PrismaClient needs to be constructed with a non-empty, valid PrismaClientOptions`

Schema mismatch saat seed

File `prisma/data.db` stale