Preview Environment dengan Database Isolated: Setup Neon + Helipod

Preview environment adalah fitur yang memungkinkan kamu preview perubahan kode sebelum di-merge ke production. Tapi masalahnya: preview environment butuh database sendiri, dan setup database manual untuk setiap preview itu ribet.

Sekarang ada solusinya.

Dengan Neon database branching + Helipod, setiap preview environment otomatis punya database branch sendiri — tanpa setup manual, tanpa tunggu menit, tanpa takut ngotorin data production.

Apa Itu Preview Environment?

Preview environment adalah copy dari production environment yang dibuat secara otomatis untuk setiap:

Pull request di GitHub/GitLab
Branch yang di-push
Commit tertentu

Production: https://app.helipod.io
    ↓
Preview PR #123: https://pr-123.helipod.io
Preview PR #124: https://pr-124.helipod.io
Preview PR #125: https://pr-125.helipod.io

Masalah: Setiap preview butuh database sendiri. Kalau manual, ribet.

Solusi: Neon database branching + Helipod = otomatis.

Kenapa Database Isolated Penting?

Tanpa Database Isolated

PR #123: Add payment feature → Testing di staging → Data production kotor!
PR #124: Fix login bug → Testing di staging → Data campur aduk!

Akhirnya:

QA harus hati-hati banget waktu testing
Sering ada data "sampah" di staging
Production data terancam kena dampak

Dengan Database Isolated

PR #123: Add payment feature → Database branch pr-123 → Isolated!
PR #124: Fix login bug → Database branch pr-124 → Isolated!

Hasilnya:

QA bisa testing bebas tanpa takut
Data production tetap bersih
Setiap PR punya data sendiri

Cara Kerja Neon Branching untuk Preview

Production Database (main branch)
│
├── Preview PR #123 (branch: pr-123)
│   ├── Data: Copy dari production saat branching
│   ├── Schema: Bisa di-migrate tanpa ngaruh production
│   └── URL: pr-123.helipod.io
│
├── Preview PR #124 (branch: pr-124)
│   ├── Data: Copy dari production saat branching
│   ├── Schema: Bisa di-migrate tanpa ngaruh production
│   └── URL: pr-124.helipod.io
│
└── Staging (branch: staging)
    ├── Data: Copy dari production
    ├── Schema: Selalu update
    └── URL: staging.helipod.io

Setup Preview Environment dengan Helipod

Langkah 1: Setup Neon + Helipod

Connect Neon ke Helipod (lihat tutorial integrasi)
Aktifkan Branch per environment
Set naming pattern: pr-{number}

Langkah 2: Konfigurasi Auto-Deploy

Konfigurasi preview environment melalui dashboard Helipod:

Buka Settings → Integrations → Neon
Aktifkan Preview Environment
Set naming pattern: pr-{number}
Aktifkan Auto Cleanup untuk cleanup otomatis

Langkah 3: Deploy Preview

# Push kode ke branch
git push origin feature/new-feature

# Helipod otomatis:
# 1. Buat database branch baru
# 2. Deploy preview environment
# 3. Generate preview URL

Hasil:

Preview deployed!
├── URL: https://pr-123.helipod.io
├── Database: pr-123 branch (isolated)
└── Status: Ready for testing

Real Use Cases

Use Case 1: E-commerce Feature

Situasi: Developer buat fitur checkout baru yang butuh schema changes

# 1. Push feature branch
git push origin feature/new-checkout

# 2. Helipod buat preview
Preview URL: https://pr-456.helipod.io
Database: pr-456 (isolated)

# 3. Developer test fitur baru
# - Buat test orders
# - Test payment flow
# - Ga ngaruh production data

# 4. PR di-merge → Preview cleanup otomatis

Use Case 2: Schema Migration Testing

Situasi: Butu test migration sebelum apply ke production

# 1. Buat branch untuk testing migration
git checkout -b feature/db-migration

# 2. Database branch otomatis dibuat
# Data: Copy dari production

# 3. Jalankan migration
npx prisma migrate dev --name add-payment-table

# 4. Test migration
# - Cek apakah migration jalan
# - Cek apakah ada data loss
# - Cek performance

# 5. Kalau aman → merge ke main

Use Case 3: Client Demo

Situasi: Perlu demo fitur baru ke client tanpa install lokal

# 1. Push kode ke branch
git push origin feature/client-demo

# 2. Preview otomatis deployed
Preview URL: https://pr-789.helipod.io

# 3. Kirim link ke client
Client bisa langsung test tanpa install apapun!

# 4. Setelah demo → cleanup otomatis

Best Practices

1. Naming Pattern yang Jelas

# Untuk pull requests
pr-{number}

# Untuk feature branches
feature-{name}

# Untuk staging
staging

2. Auto-Cleanup

{
  "preview": {
    "auto_cleanup": true,
    "cleanup_on_merge": true,
    "cleanup_on_close": true
  }
}

3. Data Seeding

# Seed preview database dengan test data
helipod seed --branch pr-123 --data test-data.json

4. Environment Variables

# Preview environment punya env vars sendiri
DATABASE_URL=postgresql://[email protected]/dbname
NEXT_PUBLIC_API_URL=https://pr-123.helipod.io/api

FAQ

Berapa biaya preview environment dengan Neon?

Neon free tier mendukung 10 branches gratis. Untuk project yang lebih besar, Neon Pro tersedia mulai $19/bulan dengan 100 branches.

Apakah preview environment otomatis cleanup?

Ya! Di Helipod, kamu bisa setup cleanup otomatis saat PR di-merge atau ditutup. Branch database juga otomatis dihapus.

Bagaimana jika butuh production data di preview?

Kamu bisa clone production branch ke preview branch. Data akan di-copy secara instan tanpa downtime.

Bisakah saya test migration di preview?

Ya! Preview environment punya database branch sendiri, jadi kamu bisa test migration tanpa takut ngaruh production.

Checklist Setup Preview

Kesimpulan

Preview environment dengan database isolated adalah game changer untuk tim development. Dengan Neon + Helipod, kamu bisa:

✅ Preview environment otomatis untuk setiap PR
✅ Database branch isolated tanpa setup manual
✅ Cleanup otomatis saat PR di-merge
✅ Testing tanpa takut ngotorin production

Butuh bantuan setup? Hubungi [email protected]

Baca juga: