Deployment

ZeroDrag is ready for deployment to Vercel. This guide covers production setup and configuration.

What This System Does

The deployment process covers:

  • Vercel deployment configuration
  • Environment variable setup
  • Database migration and seeding
  • Payment provider webhook configuration
  • OAuth redirect URI updates
  • Production checklist

Why It Exists

Proper deployment ensures your application works correctly in production with all integrations configured, webhooks receiving events, and users able to authenticate and subscribe.

When You Need to Care About It

You'll work with deployment when:

  • Deploying to production for the first time
  • Configuring production environment variables
  • Setting up payment provider webhooks
  • Updating OAuth redirect URIs
  • Troubleshooting production issues

Prerequisites

Before deploying:

  • Payment provider products/plans created (Stripe prices or Razorpay plans)
  • Database hosted (e.g., Supabase, Railway, Neon)
  • Google OAuth configured with production redirect URI
  • Resend API key ready
  • Payment provider webhook configured

Environment Variables

Set these in your hosting platform (Vercel Dashboard → Project → Settings → Environment Variables):

Required

bash
DATABASE_URL=postgresql://...
AUTH_SECRET=your-random-32-char-secret
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
RESEND_API_KEY=re_...
EMAIL_FROM=noreply@yourdomain.com
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXTAUTH_URL=https://yourdomain.com

Payment Provider (Choose One)

bash
PAYMENT_PROVIDER=stripe  # or "razorpay"

# Stripe (if using Stripe)
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
STRIPE_PUBLISHABLE_KEY=pk_live_...

# Razorpay (if using Razorpay)
RAZORPAY_KEY_ID=rzp_live_...
RAZORPAY_KEY_SECRET=...
RAZORPAY_WEBHOOK_SECRET=...

Note: Use live keys for production. Test keys (sk_test_, pk_test_, rzp_test_) are for development only.

Vercel Deployment

1. Push to GitHub

bash
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/you/your-repo.git
git push -u origin main

2. Import to Vercel

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

3. Post-Deployment Steps

Update Google OAuth

Go to Google Cloud Console → Credentials → OAuth 2.0 Client ID → Add authorized redirect URI: https://yourdomain.com/api/auth/callback/google

Configure Payment Provider Webhooks

For Stripe:

  • Stripe Dashboard → Webhooks
  • Add endpoint: https://yourdomain.com/api/payments/webhook/stripe
  • Select events: checkout.session.completed, invoice.paid, invoice.payment_failed, customer.subscription.updated, customer.subscription.deleted
  • Copy webhook secret to STRIPE_WEBHOOK_SECRET

For Razorpay:

  • Generate a secure webhook secret
  • Razorpay Dashboard → Settings → Webhooks
  • Add endpoint: https://yourdomain.com/api/payments/webhook/razorpay
  • Select events: subscription.activated, subscription.charged, subscription.cancelled, payment.failed
  • Add the secret to RAZORPAY_WEBHOOK_SECRET

Run Database Migration & Seed

Temporarily connect to production database locally and run:

bash
npx prisma db push
npx prisma db seed

Update Payment Provider Plan IDs

Link your production plan IDs to the database:

bash
# For Stripe
node scripts/update-stripe-price.js pro price_live_xxxxx

# For Razorpay
node scripts/update-razorpay-plan.js pro plan_live_xxxxx

Database Hosting Options

Supabase (Recommended)

Free tier available, Postgres compatible, easy setup.

Neon

Serverless Postgres, free tier available, auto-scaling.

Railway

Simple setup, pay-as-you-go pricing.

Production Checklist

Before Launch

  • ☐ Environment variables set
  • ☐ Database migrated and seeded
  • ☐ Payment provider plan IDs linked to database
  • ☐ Payment provider webhooks configured
  • ☐ Google OAuth redirect URI updated
  • ☐ Test login flow
  • ☐ Test subscription flow
  • ☐ Test email delivery
  • ☐ Verify payment provider is working (test mode first)

After Launch

  • ☐ Monitor payment provider webhook logs
  • ☐ Check error logging (Sentry if configured)
  • ☐ Test magic link emails
  • ☐ Verify SEO (sitemap, robots.txt)
  • ☐ Monitor subscription creation and cancellation flows

Troubleshooting

Webhook Failures

Check provider dashboard webhook logs. Verify webhook secret matches environment variable. Ensure endpoint URL is correct.

Auth Issues

Verify AUTH_SECRET is set. Check Google OAuth redirect URI matches exactly. Verify NEXTAUTH_URL matches your domain.

Database Issues

Check DATABASE_URL connection string. Ensure database is accessible from Vercel. Run prisma db push if schema is out of sync.

Email Issues

Verify Resend API key. Check Resend dashboard for delivery logs. Ensure sender domain is verified.

Related Sections