Installation

Complete setup guide to get your SaaS template running locally and configured with all required services.

Prerequisites

• Node.js 18+ installed
• Git for version control
• Accounts with Supabase, Stripe, and Sanity (we'll create these)

Step 1: Clone and Install

git clone <your-repo-url>
cd your-project-name
npm install

Step 2: Environment Configuration

Copy the environment template:

cp .env.example .env.local

Now let's configure each service. Open .env.local and we'll fill in each section:

Site Configuration

NEXT_PUBLIC_SITE_URL=http://localhost:3000

For production, change this to your actual domain.

Supabase Setup

1. Go to supabase.com and create a new project
2. In your project dashboard, go to Settings → API
3. Copy your project details:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_public_key_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here

Stripe Configuration

1. Create a Stripe account
2. In your Stripe Dashboard, go to Developers → API Keys
3. Copy your keys (use test keys for development):

STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key

4. For webhooks, we'll configure this after running locally:

STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

Sanity CMS Setup

1. Install Sanity CLI globally: npm install -g @sanity/cli
2. Create a new Sanity project: sanity init
3. Choose your project name and dataset name
4. Copy your project details:

NEXT_PUBLIC_SANITY_PROJECT_ID=your-sanity-project-id
NEXT_PUBLIC_SANITY_DATASET=production

Email Service (Resend)

1. Create a Resend account
2. Go to API Keys and create a new key
3. Add your configuration:

RESEND_API_KEY=re_your_resend_api_key
USE_RESEND_ONBOARDING=true
CONTACT_EMAIL=hello@yourdomain.com

Analytics (PostHog)

1. Create a PostHog account
2. Get your project API key from Project Settings:

NEXT_PUBLIC_POSTHOG_KEY=phc_your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Step 3: Database Setup

Run the database migrations to set up your tables:

# Make sure you're in the project root
psql -h your-supabase-host -p 5432 -U postgres -d postgres -f db-setup.sql

Or copy the contents of db-setup.sql and run it in your Supabase SQL editor.

Step 4: Sanity Studio Setup

Initialize your Sanity studio:

cd sanity
sanity start

This will start the Sanity Studio at http://localhost:3333 where you can manage your content.

Step 5: Start Development Server

Back in your main project directory:

npm run dev

Your application will be available at http://localhost:3000

Step 6: Configure Stripe Webhooks

Now that your app is running locally, set up Stripe webhooks:

1. Install Stripe CLI: stripe.com/docs/stripe-cli
2. Login to Stripe CLI: stripe login
3. Forward webhooks to your local app:

stripe listen --forward-to localhost:3000/api/webhooks/stripe

4. Copy the webhook signing secret and add it to your .env.local:

STRIPE_WEBHOOK_SECRET=whsec_the_secret_from_stripe_cli

Step 7: Test Your Setup

Visit these URLs to verify everything works:

• http://localhost:3000 - Landing page
• http://localhost:3000/auth/login - Authentication
• http://localhost:3000/dashboard - Protected dashboard
• http://localhost:3000/pricing - Stripe pricing
• http://localhost:3000/blog - Sanity content
• http://localhost:3333 - Sanity Studio

Troubleshooting

Common Issues

"Module not found" errors

• Run npm install again
• Delete node_modules and package-lock.json, then npm install

Supabase connection issues

• Verify your URL and keys are correct
• Check if your Supabase project is active
• Ensure database setup script ran successfully

Stripe webhook errors

• Make sure Stripe CLI is running and forwarding
• Check your webhook secret is correct
• Verify your app is running on port 3000

Sanity content not loading

• Confirm your project ID and dataset are correct
• Make sure Sanity Studio is set up and has content
• Check CORS settings in Sanity project settings

Environment Variables Checklist

Make sure all these are set in your .env.local:

• ✅ NEXT_PUBLIC_SITE_URL
• ✅ NEXT_PUBLIC_SUPABASE_URL
• ✅ NEXT_PUBLIC_SUPABASE_ANON_KEY
• ✅ SUPABASE_SERVICE_ROLE_KEY
• ✅ STRIPE_SECRET_KEY
• ✅ STRIPE_PUBLISHABLE_KEY
• ✅ STRIPE_WEBHOOK_SECRET
• ✅ NEXT_PUBLIC_SANITY_PROJECT_ID
• ✅ NEXT_PUBLIC_SANITY_DATASET
• ✅ RESEND_API_KEY
• ✅ CONTACT_EMAIL
• ✅ NEXT_PUBLIC_POSTHOG_KEY
• ✅ NEXT_PUBLIC_POSTHOG_HOST

Next Steps

With your local environment set up, you can now:

1. Set up authentication - Configure user management and protected routes
2. Configure payments - Set up your Stripe products and subscriptions
3. Customize your app - Modify components and styling
4. Deploy to production - Get your SaaS live

Your development environment is ready! Time to dive into the authentication system.