Deployment naar Vercel + Supabase

Stap-voor-stap gids om Liefdevolle Blik live te zetten.

Vereisten

  • GitHub account met repo liefdevolleblik
  • Vercel account (link je GitHub)
  • Supabase account (project al aangemaakt)
  • Domein: liefdevolleblik.nl bij mijn.host

1. Supabase Setup

1a. Project Aanmaken

  1. Ga naar https://supabase.com
  2. Klik New Project
  3. Vul in:
    • Name: liefdevolleblik
    • Database Password: Sterk wachtwoord (save!)
    • Region: Europe (EU-West-1)
  4. Wacht tot project gereed is

1b. Database Migrations Uitvoeren

# In repo directory:
npm install -D supabase

# Login
npx supabase login

# Link project
npx supabase link

# Push migrations
npx supabase db push

Dit voert uit:

  • migrations/001_schema.sql — Tabellen
  • migrations/002_rls.sql — RLS policies
  • migrations/003_functions.sql — Stored procedures

1c. Environment Variables Ophalen

Ga naar Supabase Dashboard → Project Settings → API:

NEXT_PUBLIC_SUPABASE_URL = https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = eyJ...
SUPABASE_SERVICE_ROLE_KEY = eyJ...

BELANGRIJK: Service role key nooit in code, alleen in Vercel secrets!

1d. Cron Jobs Inplannen

Zie: Cron Jobs

Voer uit in Supabase SQL Editor:

SELECT cron.schedule('dagelijkse-opening-check', '0 7 * * *', ...);
SELECT cron.schedule('schrijf-herinnering', '0 17 * * 1', ...);
SELECT cron.schedule('data-vernietiger', '0 3 * * *', ...);

2. Vercel Deployment

2a. Connect GitHub

  1. Ga naar https://vercel.com
  2. Klik New Project
  3. Selecteer repo liefdevolleblik
  4. Klik Import

2b. Environment Variables

  1. Klik Environment Variables
  2. Voeg toe:
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
WA_PHONE_ID
WA_ACCESS_TOKEN
WA_VERIFY_TOKEN
RESEND_API_KEY
ENCRYPTION_MASTER_KEY
NEXT_PUBLIC_APP_URL=https://liefdevolleblik.nl
CRON_SECRET=<willekeurig lang geheim>

Hoe Environment Variabelen In Te Voeren:

# Via CLI:
vercel env add NEXT_PUBLIC_SUPABASE_URL
# (interactief invoeren)

# Of in Vercel Dashboard: Project → Settings → Environment Variables

2c. Build & Deploy

Vercel bouwt automatisch:

npm run build
npm start

Wacht tot Deployment Complete ✅

2d. Test Deploy

curl https://liefdevolleblik.vercel.app/
# Moet HTML teruggeven

3. DNS Setup (liefdevolleblik.nl)

3a. DNS Provider instellingen

Je DNS provider is mijn.host:

  1. Log in op mijn.host
  2. Ga naar liefdevolleblik.nl domeininstellingen
  3. Voeg CNAME record toe:
Type Name Value
CNAME @ cname.vercel-dns.com

3b. Vercel Domain Verbinden

  1. In Vercel: Project → Settings → Domains
  2. Klik Add Domain
  3. Voer in: liefdevolleblik.nl
  4. Vercel checkt DNS (kan 24u duren)

3c. SSL Certificaat

Vercel genereert automatisch SSL via Let's Encrypt — geen actie nodig!

4. WhatsApp Business Setup

Zie: Externe Diensten

4a. Meta Business Account

  1. Ga naar https://www.facebook.com/business/
  2. Maak Business Account aan
  3. Voeg zakelijk telefoonnummer toe

4b. WhatsApp App Approval

  1. Ga naar Meta App Manager
  2. Maak WhatsApp Business app aan
  3. Request template approval (24-48 uur)

Templates:

  • liefdevolle_blik_uitnodiging (invitation)
  • liefdevolle_blik_opening (opening notification)
  • liefdevolle_blik_herinnering (write reminder)

4c. Environment Variabelen

WA_PHONE_ID=<je phone number id>
WA_ACCESS_TOKEN=<permanent token van Meta>
WA_VERIFY_TOKEN=<willekeurig geheim voor webhook>

5. Email Setup (Resend)

5a. API Key

  1. Ga naar https://resend.com
  2. Maak account aan
  3. Kopieer API key
RESEND_API_KEY=re_xxxxx

5b. Domain Verification

  1. In Resend: Domains
  2. Voeg liefdevolleblik.nl toe
  3. Verifieer SPF/DKIM records (zie instructies)

6. Checklist voor Launch

  • Supabase migrations uitgevoerd
  • Cron jobs ingesteld
  • Vercel deploy compleet
  • DNS CNAME geconfigureerd
  • SSL working (groen icoontje)
  • WhatsApp templates goedgekeurd
  • Resend domein geverifieerd
  • Environment variabelen allemaal ingevuld
  • Test: Notitie schrijven en lezen
  • Test: WhatsApp bericht verzenden
  • Test: Email bericht verzenden

7. Post-Launch Monitorering

Logs Bekijken

Vercel:

vercel logs
# Of in Dashboard: Deployments → Runtime Logs

Supabase:

# Edge Functions logs
supabase functions logs dagelijkse-check
supabase functions logs verwijder-verlopen

Errors Opvolgen

Stel up:

  • Sentry (error tracking)
  • Datadog (performance monitoring)
  • CloudFlare Analytics (traffic)

Performance Check

# Lighthouse audit
lighthouse https://liefdevolleblik.nl --view

8. Troubleshooting

"SUPABASE_URL not found"

Zorg dat NEXT_PUBLIC_SUPABASE_URL ingesteld is in Vercel.

"RLS policy violation"

Check SELECT * FROM pg_policies in Supabase SQL editor — policies moeten bestaan.

"Cron job niet uitgevoerd"

  1. Check Supabase → Edge Functions → Logs
  2. Zorg dat http_post call correct is
  3. Test manueel via curl

"WhatsApp bericht niet verzonden"

  1. Check WA_PHONE_ID en WA_ACCESS_TOKEN
  2. Zorg dat templates goedgekeurd zijn
  3. Telefoonnummer E.164 format (+316...)

Quick Deploy Commando

# Volledige setup in één keer:
git clone https://github.com/ptrdbrbndr/liefdevolleblik
cd liefdevolleblik

# 1. Supabase
npx supabase login
npx supabase link
npx supabase db push

# 2. Vercel
npm install
vercel env add NEXT_PUBLIC_SUPABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY
vercel env add SUPABASE_SERVICE_ROLE_KEY
# ... voeg rest in ...

vercel deploy --prod

# 3. DNS
# Handmatig in mijn.host: CNAME @ → cname.vercel-dns.com

# 4. WhatsApp + Resend
# Handmatig in Meta + Resend dashboards

Zie Ook: