Production Deployment

This guide provides a step-by-step process to set up production environment for your SaaS. Follow the instructions to configure and deploy the application.

Prerequisites

Ensure the following are set up:

Supabase Account
- Sign up or Sign in to your Supabase account.
- Create a new project in Supabase, which will serve as the backend for the authentication, database, and storage.
Stripe Account
- Sign up or Sign in to your Stripe account.
- This is required for handling payments and billing.
Resend Account
- Sign up or Sign in to Resend.
- This service is needed for the email functionality within the app.
Vercel Account
- Go to Vercel and click Sign Up.
- You can sign up using your GitHub, GitLab, or Bitbucket account, or use your email to create a new account.
- Once signed in, follow the onboarding process to link your Git provider (GitHub, GitLab, or Bitbucket) if not already done.
- After signing up, you'll be taken to your Vercel dashboard where you can manage your projects and deployments.
- Vercel will be used to deploy the frontend and serverless API functions of your application.

Supabase Project

Install the Supabase CLI on your local machine.

Next, push the migration to the Supabase cloud environment using the following commands:

List your Supabase projects: This command will display the available Supabase projects linked to your account.
supabase projects list
Link your local project to the Supabase cloud project: Replace $PROJECT_REF with the reference ID of the project you want to link to.
supabase link --project-ref $PROJECT_REF
Push the database migration to the cloud: This command applies your local migrations to the Supabase cloud environment.
supabase db push
Go to the SQL section in Supabase Studio by visiting https://supabase.com/dashboard/project/_/sql/new, select your project, and then run this command:
INSERT INTO storage.buckets (id, name, public) VALUES ('avatars', 'avatars', true);
Update the email templates for sign-up and magic link (if you're using them) by visiting https://supabase.com/dashboard/project/_/auth/templates.
- Magic Link:
<html> <body> <h2>Confirm your Sign In</h2> <a href="{{ .RedirectTo }}type=magiclink&token_hash={{ .TokenHash }}">Log In</a> </body> </html>
- Confirm Sign up:
<html> <body> <h2>Confirm your Sign Up</h2> <a href="{{ .RedirectTo }}type=email&token_hash={{ .TokenHash }}">Sign Up</a> </body> </html>

Stripe Setup

Create a Product

Log in to your Stripe Dashboard.
Navigate to Products in the left sidebar.
Click the + Add product button.
Fill in the product details (Name, Description, etc.) and click Save.
After saving, you’ll be redirected to the product page where you can add pricing information.

Create a Price

On the product page, click + Add price.
Select the pricing model (Recurring or One-time).
Set the price, billing interval (for subscriptions), and currency.
Click Save.

You can add multiple prices for different billing frequencies (e.g., monthly and yearly plans). Each price will have its own price_id.

Setup Stripe Webhooks

Webhooks allow Stripe to notify your app when certain events happen, like when a payment succeeds or a subscription is created.

Create a Webhook Endpoint

Sign in to your Stripe Dashboard.
Go to Developers > Webhooks in the left sidebar.
Click the + Add endpoint button.
Select the events you want to listen to. Events for subscriptions include:
- product.created
- product.updated
- price.created
- price.updated
- product.deleted
- customer.subscription.created
- customer.subscription.updated
- customer.subscription.deleted
- checkout.session.completed
Click Add endpoint to save.

Resend Setup

Setup Domain

To set up a domain, go to the following link and click the "+ Add Domain" button.

Resend will guide you through the DNS registrar setup. Once the domain name is verified, you can proceed to set up the API Key.

Setup API Key

To set up an API Key, go to the following link and click the "+ Create API Key" button.

If you're also setting up an audience, grant full permissions; otherwise, you can grant only "Sending access" permission.

Setup Audience (Optional)

To set up an audience, go to the following link, where you will see one audience created by default.

This audience ID will need to be added to your environment variables.

Setup Webhook (Optional)

To set up a webhook, go to the following link and click the "+ Add Webhook" button.

For events, the code is currently configured to accept only the contact.updated event.

Vercel Deployment

Vercel is our recommended platform for deploying the frontend and serverless API functions. Here's how you can deploy the project on Vercel:

Connect Git Repository

Go to your Vercel dashboard.
Click New Project.
Import your Git repository.

Set Environment Variables

After connecting your project, Vercel will ask you to set environment variables. Add the following variables:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_KEY=
 
# Code
NEXT_PUBLIC_SITE_BASE_URL=
JWT_SECRET_KEY=
 
# Resend
RESEND_FROM_DOMAIN=
RESEND_API_KEY=
RESEND_AUDIENCE_ID=
RESEND_WAITLIST_AUDIENCE_ID=
RESEND_WEBHOOK_SECRET=
 
# Stripe
STRIPE_WEBHOOK_SECRET=
STRIPE_SECRET_KEY=
STRIPE_PRODUCT_IDS=
 
# Google
GOOGLE_OAUTH_CLIENT_ID=
GOOGLE_OAUTH_CLIENT_SECRET=
 
# Github
GITHUB_OAUTH_CLIENT_ID=
GITHUB_OAUTH_CLIENT_SECRET=

Configure Build Settings

Ensure that the build command is set to npm run build
For the output directory, Vercel will automatically use the default, so no need to change it.

Deploy

Click the Deploy button, and Vercel will begin building and deploying your project. Once the deployment is complete, you'll get a live production URL.

Sync stripe data

Open your browser and navigate to:

<NEXT_PUBLIC_SITE_BASE_URL>/api/sync

Replace NEXT_PUBLIC_SITE_BASE_URL with base url of your application.

Production Deployment

On this page