Start here

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:

  1. 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.
  2. Stripe/Lemonsqueezy Account
    • Sign up or Sign in to your Stripe / Lemonsqueezy account.
    • This is required for handling payments and billing.
  3. Resend Account
    • Sign up or Sign in to Resend.
    • This service is needed for the email functionality within the app.
  4. 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:

  1. List your Supabase projects: This command will display the available Supabase projects linked to your account. 
    supabase projects list
  2. 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
  3. Push the database migration to the cloud: This command applies your local migrations to the Supabase cloud environment. 
    supabase db push
  4. 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);
  5. 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

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

Create a Price

  1. On the product page, click + Add price.
  2. Select the pricing model (Recurring or One-time).
  3. Set the price, billing interval (for subscriptions), and currency.
  4. 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

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

Lemonsqueezy Setup

Create a Product:

  1. Log in to your LemonSqueezy Dashboard.
  2. Navigate to Products from the sidebar.
  3. Click the + New Product button.
  4. Fill in the product details (Name, Description, Files, License Keys, etc.).
  5. Under the Pricing section, define your price, currency, and subscription billing interval ( We only support ).
  6. Click Save Product.

After saving, you can access the product’s checkout URL and other settings.

Create a Price

Pricing is part of the product setup in LemonSqueezy. When creating or editing a product:

  1. Scroll to the Pricing section.
  2. Choose Subscription.
  3. Enter the price, billing frequency (for subscriptions), and currency.
  4. Save the product to apply your pricing.

Each product will have a unique product_id and corresponding variant_id for handling different price options.

Setup LemonSqueezy Webhooks

Webhooks allow LemonSqueezy to notify your application about events like successful payments, subscription changes, and refunds.

  1. Sign in to your LemonSqueezy Dashboard.
  2. Go to Settings → API & Webhooks.
  3. Under Webhooks, click + New Webhook.
  4. Set the Webhook URL to your production endpoint
  5. Choose the events you want to subscribe to, such as:
  • subscription_created
  • subscription_updated
  • subscription_cancelled
  • subscription_resumed
  • subscription_expired
  1. Click Save Webhook.

LemonSqueezy will send POST requests to your endpoint whenever these events occur.

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
JWT_SECRET_KEY=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_KEY=
 
# Resend
RESEND_FROM_DOMAIN=
RESEND_API_KEY=
RESEND_AUDIENCE_ID=
 
NEXT_PUBLIC_SITE_BASE_URL=
BILLING_ENVIRONMENT=production
 
# Stripe ( Required if you choose stripe as payment provider )
STRIPE_WEBHOOK_SECRET=
STRIPE_SECRET_KEY=
 
# Lemonsqueezy ( Required if you choose lemonsqueezy as payment provider)
LEMONSQUEEZY_WEBHOOK_SECRET=
LEMONSQUEEZY_API_KEY=
LEMONSQUEEZY_STORE_ID=
 
# Google
GOOGLE_OAUTH_CLIENT_ID=
GOOGLE_OAUTH_CLIENT_SECRET=
 
# Github
GITHUB_OAUTH_CLIENT_ID=
GITHUB_OAUTH_CLIENT_SECRET=

Sync Products

We sync products under /src/products.production.json file which needs to synced locally using script

Prerequisites for script:

  1. Make sure to update app.config.ts file with paymentGateway key to include product ids for production environment. You can refer to billing plan setup for more information.
  2. Create a .env.prod file with following production environment variables based on your selected payment provider

The required environment variables are as follows

BILLING_ENVIRONMENT=production
# Stripe ( Required if you choose stripe as payment provider )
STRIPE_SECRET_KEY=
# Lemonsqueezy ( Required if you choose lemonsqueezy as payment provider)
LEMONSQUEEZY_API_KEY=
  1. Run the following script in order to sync products
npm run sync:billing-production
  1. Verify the generated file at src/proudcts.production.json

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.

Replace NEXT_PUBLIC_SITE_BASE_URL with base url of your application.

Previous

Customization

Next

Production Checklist

On this page

PrerequisitesSupabase ProjectStripe SetupCreate a ProductCreate a PriceSetup Stripe WebhooksCreate a Webhook EndpointLemonsqueezy SetupCreate a Product:Create a PriceSetup LemonSqueezy WebhooksResend SetupSetup DomainSetup API KeySetup Audience (Optional)Setup Webhook (Optional)Vercel DeploymentConnect Git RepositorySet Environment VariablesSync ProductsConfigure Build SettingsDeploy