Local Development using Supabase

Develop locally

If you haven't already done so, clone your Github repository to your local machine.

Configure Auth

Follow this guide to set up an OAuth app with GitHub and configure Supabase to use it as an auth provider.

In your Supabase project, navigate to auth > URL configuration and set your main production URL (e.g. https://your-deployment-url.vercel.app) as the site url.

Next, in your Vercel deployment settings, add a new Production environment variable called NEXT_PUBLIC_SITE_URL and set it to the same URL. Make sure to deselect preview and development environments to make sure that preview branches and local development work correctly.

Install dependencies

Ensure you have pnpm installed and run:

pnpm install

Local Development with Supabase

Prerequisites

Install Docker: Download and install Docker from here.

Setup Environment Files: Copy or rename .env.local.example to .env.local. Copy or rename .env.example to .env.

Starting Local Supabase Instance

Start Supabase: Open your terminal. Run the following command to start a local Supabase instance and set up the database schema:

npx supabase start

Note the URLs provided in the terminal output for accessing different services within the Supabase stack.

Configure Environment Variables: Copy the value of service_role_key from the terminal output. Open your .env.local file. Set SUPABASE_SERVICE_ROLE_KEY in your .env.local file with the copied value.

Print Supabase URLs: Open your terminal. Run the following command to print out the URLs:

npx supabase status

This will print the following keys that we will use in our environment variables. Copy these values and paste them in your .env.local file:

# NEXT_PUBLIC_SUPABASE_URL
API URL: http://127.0.0.1:54321
 
# NEXT_PUBLIC_SUPABASE_ANON_KEY
anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ******xad
 
# SUPABASE_SERVICE_ROLE_KEY
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9*******sad

Link Local Supabase Instance to Project: Open your terminal. Run the following command:

npx supabase link

Navigate to the Supabase project you created. Enter your database password when prompted.

Database Password Reset

Reset Database Password: Visit your database settings. Click "Reset database password". Copy the new password and store it in a password manager.

Schema Changes and Data Seeding

Pull Schema Changes: Open your terminal. Run the following command to pull schema changes from your remote database:

npx supabase db pull

Seed Local Database: Open your terminal. Run the following commands to generate seed data:

npx supabase db dump --data-only -f supabase/seed.sql
npx supabase db reset

Generating Types and Migrations

Generate TypeScript Types: Open your terminal. Run the following command to generate TypeScript types to match your schema:

npx supabase gen types typescript --local --schema public > types_db.ts

Generate Migration File: Open your terminal. Run the following command to automatically generate a migration file with all the changes you've made to your local database schema:

npx supabase db diff | npx supabase migration new

Push those changes to your remote database with:

npx supabase db push

Use the Stripe CLI to Test Webhooks

Setting Up Stripe CLI

Login to Stripe Account: Use the Stripe CLI to login to your Stripe account:

pnpm stripe:login

This will print a URL to navigate to in your browser and provide access to your Stripe account.

Start Local Webhook Forwarding: Run the following command:

pnpm stripe:listen

This will print a webhook secret (such as whsec_***) to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env.local file. If you haven't already, set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY in your .env.local file using the test mode keys from your Stripe dashboard.

Final environment variables

By now your environment variables should look like this:

.env

SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="http://127.0.0.1:54321/auth/v1/callback"
SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID="Ov23li********Q"
SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET="96e4**************************34d"

.env.local

NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
# These environment variables are used for Supabase Local Dev
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR************************************WNReilDMblYTn_I0"
NEXT_PUBLIC_SUPABASE_URL="http://127.0.0.1:54321"
SUPABASE_SERVICE_ROLE_KEY="eyJhbGciOiJIUzI1Ni******************************************Zx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU"
 
# Get these from Stripe dashboard
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_51PXT**********************************PpPple1"
STRIPE_SECRET_KEY="sk_test_5********************************************I7h"
STRIPE_WEBHOOK_SECRET="whsec_483**********************************d2118"
 
# Optional just to keep your database safe! :D
DB_PASSWORD="W23**********s8e"

Run the Next.js Client

Start Development Server: Open a separate terminal. Run the following command to start the development server:

pnpm dev

Note that webhook forwarding and the development server must be running concurrently in two separate terminals for the application to work correctly.

View Application: Navigate to http://localhost:3000 in your browser to see the application rendered.

Local Development using Supabase

On this page