Skip to content

Deployment Guide

This guide will help you deploy SupaSaaS Template in under 10 minutes.

Prerequisites

Before starting, make sure you have accounts with:

GitHub

Check the video: Here

  • Required for code hosting and Vercel deployment
  • Sign up at github.com
  • Free tier is sufficient

Vercel

Check the video: Here

And Here

  • Hosts your Next.js application
  • Sign up at vercel.com
  • Free tier works perfectly

Supabase

Check the video: Here

  • Provides database and authentication
  • Sign up at supabase.com
  • Free tier includes everything needed

Paddle (for payments)

Check the video: Here

Required Tools

Node.js - Version 18.0 or higher recommended - Download from nodejs.org

docker - It's required for some tooling for Supabase

Supabase CLI

npm install -g supabase

# or use npx supabase in the future

Structure

nextjs/ - Next.js application - main code point and codebase

supabase/ - Supabase migrations, functions, local config

Step 1: Push the code to your repository

Check the video: Here

Grab the code and push into your repository

Step 2: Prepare and deploy environment

This step includes connecting Vercel, Supabase, and Paddle to your local development environment.

The video is longer, but following it should be enough

  1. Link Supabase to your local development environment. Check the video: Here
  2. Push migrations to Supabase and create documents bucket (to ensure demo works properly). Check the video: Here
  3. Configure vercel to work with your remote environment. This requires a bit of configuration. Check the video: Here

Congratulations! Your app should be now available to the public. You are half way there!

Organisation settings, 2FA and other features are available in the app.

Now let's proceed to setup pricing and billing.

Step 3: Configure Paddle and Pricing

  1. Configure paddle and pricing. This configuration requires a bit going back and forth between Vercel and Paddle. Check the video: Here

  2. Add product tier informations to the app. Check the video: Here

{
  "maxFiles": -1
}

Product_id is product from paddle, tier_level represents tier level (1 is minimum), and properties are json object like above

-1 means unlimited

Step 4. It's done!

Congratulations! Your app is properly configured! Check out rest of the documentation to see what can you customize etc.