Deployment

Deploy your SaaS to Vercel with these steps.

Prerequisites

Before deploying, ensure you have:

• Supabase project with production database
• Stripe account with live API keys
• Resend account with verified domain
• GitHub repository with your code

Deploy to Vercel

1. Push to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

2. Import to Vercel

1. Go to vercel.com
2. Click "Add New Project"
3. Import your GitHub repository
4. Configure environment variables (see below)
5. Click "Deploy"

3. Environment Variables

Add these in Vercel → Settings → Environment Variables:

# App
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_APP_NAME=Your App Name

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Stripe (use live keys!)
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_PRO_PRICE_ID=price_...

# Resend
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=hello@yourdomain.com

Post-Deployment

Configure Supabase

1. Go to Supabase Dashboard → Authentication → URL Configuration
2. Update Site URL to your production domain
3. Add redirect URLs:
   • https://yourdomain.com/auth/callback
   • https://yourdomain.com/auth/reset-password

Configure Stripe Webhooks

1. Go to Stripe Dashboard → Developers → Webhooks
2. Add endpoint: https://yourdomain.com/api/webhooks/stripe
3. Select events:
   • checkout.session.completed
   • customer.subscription.created
   • customer.subscription.updated
   • customer.subscription.deleted
   • invoice.payment_succeeded
   • invoice.payment_failed
4. Copy the webhook secret and add to Vercel

Configure Custom Domain

1. In Vercel → Settings → Domains
2. Add your custom domain
3. Configure DNS as instructed

Pre-Deployment Checklist

# Build locally first
npm run build

# Run tests
npm run test

# Check for lint errors
npm run lint

Security Checklist

• Using HTTPS (automatic with Vercel)
• Environment variables are set (not hardcoded)
• RLS is enabled on all Supabase tables
• Stripe webhook secret is configured
• No secrets in client-side code

SEO Checklist

• src/config/site.ts has correct metadata
• Open Graph images are configured
• Sitemap is generated (/sitemap.xml)
• robots.txt allows crawling

Monitoring

Vercel Analytics

Enable in Vercel → Analytics for:

• Page views
• Web Vitals
• Geographic data

Error Tracking

Consider adding error tracking:

• Sentry
• LogRocket

Troubleshooting

Build Fails

# Check build locally
npm run build

# Check for TypeScript errors
npx tsc --noEmit

Webhooks Not Working

1. Check webhook secret matches
2. Verify endpoint is correct
3. Check Stripe webhook logs
4. Ensure API route is deployed

Auth Redirects Fail

1. Verify redirect URLs in Supabase
2. Check NEXT_PUBLIC_APP_URL is correct
3. Ensure callback route exists

Continuous Deployment

Vercel automatically deploys on push to main. For preview deployments:

• Push to a branch → Preview URL generated
• Open PR → Preview deployment with comments
• Merge to main → Production deployment