Deployment

Ready to deploy your LaunchKit app? Let’s get it live in minutes!

Deploy to Vercel (Recommended)

Vercel is the easiest way to deploy your Next.js LaunchKit app.

Prerequisites

Push your code to GitHub, GitLab, or Bitbucket
Have a Vercel account

Steps

Connect Your Repository:
- Go to Vercel Dashboard
- Click “New Project”
- Import your LaunchKit repository

Configure Environment Variables: Add these environment variables in Vercel:

 # -----------------------------------------------------------------------------
 # Resend
 # -----------------------------------------------------------------------------
 RESEND_API_KEY=

 # -----------------------------------------------------------------------------
 # Database URI
 # -----------------------------------------------------------------------------
 NEXT_PUBLIC_APP_URL=
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_SERVICE_ROLE_KEY=

 # -----------------------------------------------------------------------------
 # Stripe
 # -----------------------------------------------------------------------------
 STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=

Deploy: Click “Deploy” and wait for the build to complete.
Update Supabase Settings:
- Go to your Supabase dashboard
- Navigate to Authentication > Settings
- Add your Vercel domain to “Site URL” and “Redirect URLs”

Custom Domain

In Vercel, go to your project settings
Click “Domains”
Add your custom domain
Update your DNS records as instructed
Update Supabase redirect URLs with your custom domain

Deploy to Netlify

Build Settings:

Build command: npm run build
Publish directory: .next

Build command: pnpm run build
Publish directory: .next

Build command: yarn build
Publish directory: .next

Build command: bun run build
Publish directory: .next

Environment Variables: Add the same environment variables as listed above
Redirects: Create a _redirects file in your public folder:
```
/*    /index.html   200
```

Deploy to Railway

Connect your GitHub repository to Railway
Add environment variables
Railway will automatically detect and deploy your Next.js app

Environment Variables Checklist

Make sure you have all required environment variables set:

✅ NEXT_PUBLIC_SUPABASE_URL - Your Supabase project URL
✅ NEXT_PUBLIC_SUPABASE_ANON_KEY - Supabase anonymous key
✅ SUPABASE_SERVICE_ROLE_KEY - Supabase service role key
✅ RESEND_API_KEY - Resend API key for emails
✅ STRIPE_PUBLIC_KEY - Stripe publishable key
✅ STRIPE_SECRET_KEY - Stripe secret key
✅ STRIPE_WEBHOOK_SECRET - Stripe webhook secret

Database Setup

Run Database Migrations: If you have any custom migrations, run them in your Supabase dashboard
Set up Row Level Security (RLS): Ensure your RLS policies are properly configured
Test Database Connection: Verify your app can connect to the database

Stripe Configuration

Update Webhook URL: In your Stripe dashboard, update your webhook endpoint to point to your production domain:
```
https://yourdomain.com/api/webhook/stripe
```
Test Payments: Make a test payment to ensure everything works
Enable Live Mode: Switch from test mode to live mode when ready

Analytics Integration

Add analytics to track your app performance:

npm install @vercel/analytics

pnpm add @vercel/analytics

yarn add @vercel/analytics

bun add @vercel/analytics

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Performance Optimization

1. Image Optimization

LaunchKit uses Next.js Image component for automatic optimization:

import Image from 'next/image';

<Image
  src="/hero-image.jpg"
  alt="Hero"
  width={800}
  height={600}
  priority // For above-the-fold images
/>;

2. Bundle Analysis

Analyze your bundle size:

npm install @next/bundle-analyzer
npm run build
npm run analyze

pnpm add @next/bundle-analyzer
pnpm run build
pnpm run analyze

yarn add @next/bundle-analyzer
yarn build
yarn analyze

bun add @next/bundle-analyzer
bun run build
bun run analyze

3. Caching Strategy

Configure caching in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ['yourdomain.com'],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Security Checklist

✅ Environment variables are secure and not exposed
✅ HTTPS is enabled (automatic with Vercel)
✅ Content Security Policy configured
✅ Rate limiting implemented for API routes
✅ Input validation on all forms
✅ Supabase RLS policies are properly configured
✅ Stripe webhooks are secured with signatures

Monitoring & Logging

1. Error Tracking

Set up error tracking with Sentry:

npm install @sentry/nextjs

pnpm add @sentry/nextjs

yarn add @sentry/nextjs

bun add @sentry/nextjs

2. Uptime Monitoring

Set up uptime monitoring with services like:

Vercel Analytics (built-in)
UptimeRobot
Pingdom
StatusPage

Custom Domain Setup

1. DNS Configuration

For a custom domain like yourlaunchkit.com:

Purchase your domain from a registrar (Namecheap, GoDaddy, etc.)
Configure DNS records:
- For apex domain: A record pointing to 76.76.19.61
- For www subdomain: CNAME record pointing to cname.vercel-dns.com

SSL Certificate

Vercel automatically provides SSL certificates for all domains. No additional setup required!

Backup Strategy

Database Backups: Supabase automatically backs up your database
Code Backups: Keep your code in version control (Git)
Environment Variables: Keep a secure backup of your .env file

Your LaunchKit app is now live and ready to serve users! 🚀