Skip to main content

Deploying to Vercel

Vercel is an excellent platform for deploying Next.js applications. This guide will walk you through the process of deploying your Supabase TDD Boilerplate project to Vercel.

Prerequisites​

  • A Vercel account.
  • Your project pushed to a Git repository (Ideally Github).

Steps to Deploy​

1. Connect Your Repository​

  1. Log in to your Vercel account.
  2. Click "Add New..." and select "Project".
  3. Choose your Git provider and select your repository.

2. Configure Your Project​

  1. Set the directory to apps/web
  2. Set your Environment Variables:
    • Click on "Environment Variables".
    • Add all the necessary variables from your apps/web/.env.local file.
    • Ensure you're using production values for services like Stripe and Supabase.

3. Deploy​

  1. Click "Deploy".
  2. Vercel will build and deploy your application.

Setting Up a Custom Domain​

  1. In your project dashboard, go to "Settings" > "Domains".
  2. Add your custom domain and follow the instructions to configure your DNS settings.

Configuring Continuous Deployment​

Vercel automatically sets up continuous deployment. Every push to your main branch will trigger a new deployment.

To change this behavior:

  1. Go to "Settings" > "Git".
  2. Under "Production Branch", you can change which branch deploys to production.

Environment Variables​

Ensure you've set all necessary environment variables in Vercel:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • NEXT_PUBLIC_SITE_URL
  • RESEND_API_KEY
  • GOOGLE_CLIENT_ID
  • GOOGLE_CLIENT_SECRET
  • NEXT_PUBLIC_STRIPE_PUBLIC_KEY
  • STRIPE_SECRET_KEY
  • STRIPE_WEBHOOK_SECRET
  • NEXT_PUBLIC_STRIPE_PRICE_ID_SINGLE_PAYMENT
  • NEXT_PUBLIC_STRIPE_PRICE_ID_SINGLE_PAYMENT_SECONDARY
  • NEXT_PUBLIC_STRIPE_PRICE_ID_MONTHLY_SUBSCRIPTION
  • SENTRY_AUTH_TOKEN
  • NEXT_PUBLIC_SENTRY_DSN
  • NEXT_PUBLIC_SENTRY_ORG
  • NEXT_PUBLIC_SENTRY_PROJECT

Best Practices​

  • Use Vercel's Preview Deployments feature to test changes before merging to production.
  • Set up separate projects for staging and production environments.
  • Regularly review and update your environment variables.

Troubleshooting​

  • If your build fails, check the build logs for errors.
  • Ensure all dependencies are correctly listed in your package.json.
  • Verify that your environment variables are correctly set in Vercel.

By following these steps, you'll have your application deployed and running on Vercel, ready for users to access!