Deployment

This guide covers deploying the kit to production with Vercel (hosting), Supabase (database and auth), and Stripe (payments).

Prerequisites

• A Vercel account
• A Supabase project (production, not local)
• A Stripe account with live API keys

Step 1 — Prepare Supabase for Production

Run Migrations

In your production Supabase project, run the migration files in order via the SQL Editor:

1. 001_schema.sql — Tables
2. 002_rls.sql — Row-level security
3. 003_triggers.sql — Triggers
4. 004_storage.sql — Storage bucket

Configure Auth

1. Go to Auth > URL Configuration

2. Set Site URL to your production domain (e.g., https://your-store.com)

3. Add redirect URLs:

   • https://your-store.com/auth/callback
   • https://your-store.com/auth/confirm

4. Enable OAuth providers (Google, GitHub) with production credentials

Create Admin User

1. Sign up on your production site
2. In Supabase Dashboard, find the user under Authentication > Users
3. Edit app_metadata to include {"role": "admin"}

Step 2 — Deploy to Vercel

Option A: Git Integration

# Push your code to GitHub
git push origin main

# Connect to Vercel
# 1. Go to vercel.com/new
# 2. Import your repository
# 3. Add environment variables (see below)
# 4. Deploy

Option B: Vercel CLI

npm i -g vercel
vercel --prod

Environment Variables

Set these in Vercel Dashboard > Project Settings > Environment Variables:

Variable	Value	Notes
NEXT_PUBLIC_SUPABASE_URL	https://xxx.supabase.co	Your project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJ...	Public anon key
SUPABASE_SERVICE_ROLE_KEY	eyJ...	Private service role key
STRIPE_SECRET_KEY	sk_live_...	Live Stripe secret key
STRIPE_WEBHOOK_SECRET	whsec_...	Production webhook secret
NEXT_PUBLIC_APP_URL	https://your-store.com	Your production URL

Important: Use sk_live_ keys for production, not sk_test_. The webhook secret must match the production Stripe webhook endpoint.

Step 3 — Configure Stripe Webhook

1. Go to Stripe Dashboard > Webhooks
2. Click Add endpoint
3. Enter URL: https://your-store.com/api/webhooks/stripe
4. Select event: checkout.session.completed
5. Copy the signing secret and add it as STRIPE_WEBHOOK_SECRET in Vercel

Step 4 — Verify Production

After deployment, test the full flow:

1. Browse products on the storefront
2. Add items to cart
3. Go through checkout
4. Complete a test payment (use Stripe test mode first if needed)
5. Verify the order appears in the admin dashboard
6. Check that the order confirmation page loads correctly

Custom Domain

1. In Vercel Dashboard > Project Settings > Domains
2. Add your custom domain
3. Update DNS records as directed by Vercel
4. Update NEXT_PUBLIC_APP_URL to your custom domain
5. Update Supabase Auth Site URL and redirect URLs
6. Update Stripe webhook endpoint URL

Performance

The kit is optimized for production:

• Server Components for initial render (no client-side data fetching)
• next/image for all product images with lazy loading
• Route-level code splitting via the App Router
• Supabase connection pooling for database queries

Monitoring

• Supabase Dashboard — monitor database queries, auth events, and storage usage
• Stripe Dashboard — monitor payments, webhook deliveries, and failed charges
• Vercel Analytics — monitor page load times and Web Vitals
• Vercel Logs — check server-side errors and webhook handler logs