Skip to main content
Back to Blog
How Tos & TutorialsDecember 22, 2024

LaunchKit Setup Guide: From Zero to Running App

The complete beginner's guide to setting up LaunchKit. No assumptions, no skipped steps. Clone, configure, and launch in under an hour.

LaunchKit Team

Building tools for makers

LaunchKit complete setup guide

Just got access to LaunchKit? This guide walks you through every single step from accepting your GitHub invite to seeing your app running locally. No prior experience required. We'll take nothing for granted.

Time required: 30-60 minutes (depending on account setup)

Before You Start: Prerequisites

You need three things installed on your computer. If you already have these, skip to the next section.

1. Node.js (JavaScript runtime)

Node.js lets your computer run JavaScript. LaunchKit requires Node.js 18 or higher.

Check if you have it: Open Terminal (Mac) or Command Prompt (Windows) and type:

node --version

If you see v18.0.0 or higher, you're good. If not, download from nodejs.org (choose the LTS version).

2. Git (version control)

Git lets you clone (download) the LaunchKit code from GitHub.

Check if you have it:

git --version

If you see a version number, you're good. If not:

  • Mac: Install Xcode Command Line Tools: xcode-select --install
  • Windows: Download from git-scm.com

3. Code Editor

You need something to edit code. We recommend VS Code (free) or Cursor (VS Code with AI built in).

Step 1: Accept Your GitHub Invite

After purchasing LaunchKit, you received an email from GitHub inviting you to the repository. Here's what to do:

  1. Check your email for "You've been invited to collaborate" from GitHub
  2. Click the green "View invitation" button
  3. Click "Accept invitation" on GitHub

Don't see the email? Check your spam folder. Still nothing? Email us at hello@launchkit.tech with your GitHub username.

Don't have a GitHub account? Create one free at github.com/join. Then let us know your username so we can send the invite.

Step 2: Clone the Repository

"Cloning" means downloading a copy of the code to your computer. Open your terminal and navigate to where you want the project:

# Go to your projects folder (create it if needed)
cd ~/Projects

# Clone LaunchKit (replace with your actual repo URL)
git clone https://github.com/YourOrg/launchkit-product.git

# Enter the project folder
cd launchkit-product

What just happened? You now have the entire LaunchKit codebase on your computer in a folder called launchkit-product.

Step 3: Install Dependencies

LaunchKit uses packages (pre-built code) from other developers. You need to download these:

npm install

This takes 1-2 minutes. You'll see a progress bar. When it's done, you'll have a node_modules folder with all the packages.

See warnings? That's normal. As long as you don't see red "ERROR" messages, you're fine.

Step 4: Create Your Environment File

Environment variables are secrets (API keys, passwords) that your app needs but shouldn't be shared publicly. Copy the example file:

cp .env.example .env.local

Now open .env.local in your code editor. You'll fill this in over the next steps.

Important: Never commit .env.local to Git. It's already in .gitignore so this happens automatically.

Step 5: Set Up Supabase (Database + Auth)

Supabase provides your database and user authentication. It has a generous free tier.

5a. Create a Supabase Account

  1. Go to supabase.com
  2. Click "Start your project"
  3. Sign up with GitHub (easiest) or email

5b. Create a New Project

  1. Click "New project"
  2. Name it something like "my-saas-app"
  3. Create a strong database password (save this somewhere safe!)
  4. Choose a region close to your users
  5. Click "Create new project"

Wait 1-2 minutes while Supabase sets up your project.

5c. Get Your API Keys

  1. In your Supabase dashboard, click "Project Settings" (gear icon)
  2. Click "API" in the sidebar
  3. You'll see your Project URL, anon key, and service_role key

Add these to your .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...

5d. Get Your Database Connection String

  1. Still in Project Settings, click "Database"
  2. Scroll to "Connection string" section
  3. Click "URI" tab
  4. Copy the connection string

Add it to .env.local (replace [YOUR-PASSWORD] with your database password):

SUPABASE_DB_URL=postgresql://postgres:[YOUR-PASSWORD]@db.xxxxx.supabase.co:5432/postgres

5e. Set Up the Database Tables

LaunchKit includes a seed script that creates the necessary tables:

npm run seed:supabase

You should see "Database seeded successfully" or similar.

5f. Configure Auth Redirects

  1. In Supabase, go to Authentication → URL Configuration
  2. Set Site URL to: http://localhost:3000
  3. Add to Redirect URLs: http://localhost:3000/auth/callback

Step 6: Set Up Stripe (Payments)

Stripe handles payments. You can use Test Mode for development (no real charges).

6a. Create a Stripe Account

  1. Go to stripe.com
  2. Click "Start now" and create an account
  3. You'll land on the Stripe Dashboard

6b. Enable Test Mode

In the top-right of your Stripe dashboard, make sure the toggle says "Test mode" (you'll see a "TEST DATA" banner). This lets you test payments without real money.

6c. Get Your API Keys

  1. Click "Developers" in the sidebar
  2. Click "API keys"
  3. Copy your Publishable key and Secret key

Add to .env.local:

STRIPE_PUBLIC_KEY=pk_test_xxxxx
STRIPE_SECRET_KEY=sk_test_xxxxx

6d. Create Your Products

  1. In Stripe, go to Products (or Product Catalog)
  2. Click "Add product"
  3. Name it (e.g., "Pro Plan")
  4. Set a price (one-time or recurring)
  5. Click "Save product"

After creating, click into the product and copy the Price ID (starts with price_).

Add to .env.local:

NEXT_PUBLIC_STRIPE_PRICE_LAUNCHKIT=price_xxxxx

6e. Set Up Webhooks (for local testing)

Webhooks let Stripe tell your app when payments happen. For local development, use the Stripe CLI:

  1. Install Stripe CLI: stripe.com/docs/stripe-cli
  2. Log in: stripe login
  3. Forward webhooks to your local server:
stripe listen --forward-to localhost:3000/api/webhook/stripe

This command outputs a webhook signing secret. Add it to .env.local:

STRIPE_WEBHOOK_SECRET=whsec_xxxxx

Keep this terminal running while you test payments locally.

Step 7: Run the Development Server

You're ready! Start your app:

npm run dev

Open your browser to http://localhost:3000

You should see your LaunchKit homepage! 🎉

Step 8: Verify Everything Works

Let's make sure all the integrations are working:

✓ Auth Test

  1. Click "Sign in" or "Get Started"
  2. Enter your email
  3. Check your email for a magic link
  4. Click it and you should be logged in

✓ Payments Test

  1. Navigate to the pricing page
  2. Click a "Buy" or "Get Started" button
  3. You should see the Stripe checkout
  4. Use test card: 4242 4242 4242 4242 (any future date, any CVC)

✓ Database Test

  1. In Supabase, go to Table Editor
  2. Click on the "profiles" table
  3. You should see a row for your logged-in user

Troubleshooting

"Module not found" error

Run npm install again. If it persists, delete node_modules and package-lock.json, then run npm install.

Supabase connection error

Double-check your .env.local values. Make sure there are no extra spaces or quotes around the values.

Stripe "No such price" error

Make sure you copied the Price ID (not the Product ID) and that you're in the same mode (Test/Live) in both Stripe and your env vars.

Magic link email not arriving

Check spam. In Supabase → Authentication → Email Templates, make sure emails are enabled. Supabase has a rate limit on the free tier.

What's Next?

Congratulations! Your LaunchKit app is running. Here are your next steps:

  1. Customize your branding: Edit config.ts to change your app name, colors, and pricing
  2. Follow the prompt chain: Use our vibe coding guide to customize everything with AI assistance
  3. Deploy to Vercel: Push to GitHub and connect to Vercel for free hosting
  4. Set up email: Create a Resend account for transactional emails
  5. Configure www redirect: In Vercel → Settings → Domains, add both yourdomain.com and www.yourdomain.com, then set one as primary with redirect. This ensures Google indexes your site correctly.

Ready to ship faster?

LaunchKit gives you auth, payments, CRM, and everything you need to launch your SaaS in days, not months.

Get LaunchKit

Written by

LaunchKit Team

We're a small team passionate about helping developers and entrepreneurs ship products faster. LaunchKit is our contribution to the maker community.

Related Articles