Deploy to Production

This section covers the steps needed to deploy your Supabase TDD Boilerplate application to production using Vercel and Vercel KV.

Pre-Deployment Checklist

Before starting the deployment process, ensure you have:

• A Vercel account
• A production Supabase project
• A Stripe account (if using payments)
• A Resend account (for email delivery)
• Domain name (optional but recommended)
• SSL certificate (if using a custom domain)

Deployment Steps

1. Prepare Your Environment

   Set up your production environment variables:

   # Copy environment example files
   cp apps/web/.env.example apps/web/.env.production
   cp packages/supabase/.env.example packages/supabase/.env.production

   Update the following in your production environment files:

   • Database connection strings
   • API keys and secrets
   • Authentication provider credentials
   • Service endpoints

2. Build Your Application

   Run a production build to catch any issues:

   # From the root directory
   pnpm build
   
   # Run type checks
   pnpm type-check
   
   # Run tests
   pnpm test

   Fix any errors or warnings before proceeding.

3. Generate Logo and Branding Assets

   Create your application's visual identity:

   • Logo requirements:
     • Primary logo (SVG preferred)
     • Favicon (32x32 PNG)
     • App icon (512x512 PNG)
     • Social media preview (1200x630 PNG)

   Save assets in the correct locations:

   apps/web/public/
   ├── favicon.ico
   ├── icon.png
   ├── logo.svg
   └── social-preview.png

4. Sync Supabase CLI to Your Project

   Deploy your database schema:

   # Navigate to Supabase package
   cd packages/supabase
   
   # Link to production project
   npx supabase link --project-ref your-project-ref
   
   # Review changes
   npx supabase db diff
   
   # Push migrations
   npx supabase db push

   Verify the deployment:

   • Check tables in Supabase Dashboard
   • Verify RLS policies
   • Test database functions

5. Configure Supabase Authentication

   In your Supabase dashboard:

   • Enable required auth providers
   • Configure OAuth credentials
   • Set up email templates
   • Update site URL and redirect URLs
   • Test auth flows end-to-end

6. Configure Resend for Email

   Set up email delivery:

   • Verify your domain
   • Create API keys
   • Test email templates
   • Configure bounce handling
   • Set up email monitoring

7. Set Up Stripe Live Mode

   If using payments:

   • Switch to live mode
   • Set up webhooks
   • Create products/prices
   • Configure payment methods
   • Test end-to-end transactions

8. Generate App Icons

   Create platform-specific icons:

   apps/web/public/
   ├── apple-touch-icon.png     # 180x180
   ├── icon-192.png             # 192x192 (Android)
   ├── icon-512.png             # 512x512 (PWA)
   └── manifest.webmanifest     # PWA manifest

9. Set Up OpenGraph Data

   Configure social sharing:

   apps/web/
   ├── opengraph-image.png      # 1200x630
   ├── twitter-image.png        # 1200x630
   ├── opengraph-image.alt.txt  # Alt text
   └── twitter-image.alt.txt    # Alt text

10. Deploy to Vercel

    Connect your repository:

    • Import from Git
    • Select your repository
    • Configure build settings:

      Build Command: pnpm build
      Output Directory: apps/web/.next
      Install Command: pnpm install

    Set environment variables:

    • Copy from .env.production
    • Add any additional secrets
    • Configure preview environments

11. Set Up Vercel KV

    Enable and configure KV storage:

    • Create KV database
    • Add connection strings
    • Update environment variables
    • Migrate any existing data
    • Test KV operations

12. Configure GitHub Actions

    Set up CI/CD:

    .github/workflows/
    ├── ci.yml                  # Tests and checks
    ├── preview.yml             # Preview deployments
    └── production.yml          # Production deployments

    Add repository secrets:

    • VERCEL_TOKEN
    • VERCEL_ORG_ID
    • VERCEL_PROJECT_ID

Post-Deployment Steps

1. Domain Configuration

   • Add custom domain
   • Configure DNS
   • Verify SSL setup

2. Monitoring Setup

   • Enable error tracking
   • Set up performance monitoring
   • Configure alerts

3. Analytics Integration

   • Set up Google Analytics
   • Configure custom events
   • Test data collection

4. Security Measures

   • Enable 2FA
   • Review security headers
   • Configure CORS policies

Vercel-Specific Optimizations

• Edge Functions:

  • Move appropriate routes to edge
  • Configure edge caching
  • Test edge performance

• Image Optimization:

  • Use next/image
  • Configure domains
  • Set up blur placeholders

• Caching Strategy:

  • Configure ISR/SSG
  • Set up revalidation
  • Implement stale-while-revalidate

Remember to consult the Vercel documentation for the most up-to-date deployment practices.

Troubleshooting

Common issues and solutions:

• Build failures
• Environment variable mismatches
• Domain configuration problems
• Database connection issues

For detailed troubleshooting steps, refer to our Production Checklist.

Next Steps

After deployment:

1. Monitor application performance
2. Set up logging and alerting
3. Plan for scaling
4. Document maintenance procedures

For more detailed instructions on specific aspects of deployment, refer to the following sections in this documentation.