DO NOT upgrade any dependencies (Clerk, Stripe, Supabase, Plunk, etc.) when preparing for production deployment. Upgrading dependencies during production deployment can introduce breaking changes and cause deployment failures. Always test dependency upgrades in development first and only upgrade after reading official migration guides.

Once you’re happy with your application after testing locally, we can deploy it to production.

​
Deployment Process

1

Purchase a Domain

You must purchase a domain before deploying to production. Services like Clerk and Stripe require a verified domain for production environments.

  1. Choose a domain registrar:

    • Namecheap - Affordable with good customer service
    • Google Domains - Simple interface with free privacy protection
    • Porkbun - Budget-friendly with free WHOIS privacy
    • GoDaddy - Well-known provider with many TLDs

  2. Select a domain name that:

    • Is memorable and easy to spell
    • Reflects your brand/product
    • Ideally has a .com TLD (or relevant alternative like .io for tech products)

  3. Purchase your domain with WHOIS privacy protection enabled

  4. Configure your DNS settings (you’ll need this for the next steps)

2

Setup Production Database (Supabase)

  1. Create a new production project in Supabase:

    • Log in to Supabase
    • Click “New Project”
    • Name it “[Project Name] Production”
    • Set a secure database password (avoid special characters like ’#’ and ’&’)
    • Select a region closest to your target users
    • Create the project

  2. Securely store your production credentials:

    • Database password
    • NEXT_PUBLIC_SUPABASE_URL
    • NEXT_PUBLIC_SUPABASE_ANON_KEY
    • SUPABASE_SERVICE_ROLE_KEY
    • DATABASE_URL (with pgbouncer)
    • DIRECT_URL (without pgbouncer)

  3. Migrate your schema to production:

    • Connect to your production database using the Supabase CLI
    • Apply your migrations
    bun run db:push
    • Apply your RLS policies
    bun run db:rls
3

Configure Production Clerk Instance

If you were building for an agency client, you would need to jump on a call and help them set this up for their Google Workspace account and add the relevant DNS records.

  1. Create a production instance in Clerk:

    • Log in to Clerk
    • Create a new application for production (can duplicate your existing test environment application)
    • Enable required authentication methods (Google, Email, etc.)

  2. Configure your production domain:

    • Add your custom domain in Clerk settings
    • Verify ownership of your domain
    • Set up proper redirect URLs

  3. Configure Google OAuth:

    • Add your production Google OAuth credentials
    • Configure redirect URLs

  4. Create a new webhook in Clerk:

  5. Securely store your production API keys:

    • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
    • CLERK_SECRET_KEY
    • CLERK_WEBHOOK_SECRET
4

Configure Stripe for real Payments

  1. Create your production products and prices:

    • Create the same products/prices as in your test environment (you can copy them from the test environment)

    • Note the live product and price IDs

  2. Switch from test mode to live mode

  3. Configure webhook endpoints:

    • Set up webhook endpoints for your production domain (e.g. https://your-production-domain.com/api/webhooks)
    • Configure the following webhook events:
      • customer.subscription.created
      • customer.subscription.updated
      • customer.subscription.deleted
      • invoice.payment_succeeded
      • invoice.payment_failed
      • checkout.session.completed
      • payment_intent.succeeded
      • charge.refunded
      • refund.updated
      • refund.failed
      • charge.refund.updated
      • refund.created
    • Store the webhook signing secret

  4. Securely store your production API keys

    • STRIPE_SECRET_KEY
    • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
    • NEXT_PUBLIC_STRIPE_PRICE_ID (for each product)
    • STRIPE_WEBHOOK_SECRET

Never mix test mode and live mode API keys. Always keep them completely separate.

5

Configure Email Service (Plunk)

  1. Set up your production email templates in Plunk:

    • Log in to Plunk
    • Create/update email templates for production
    • Test all email templates

  2. Configure sender domains and verification:

    • Add your custom domain as a sender domain
    • Verify domain ownership by adding required DNS records

  3. Securely store your production API key:

    • PLUNK_API_KEY

Using your custom domain for sending emails improves deliverability and prevents your emails from being marked as spam.

6

Configure Feedback Collection (UserJot)

  1. Set up your feedback collection:
    • Create a board in UserJot dashboard
    • Set the link on the “Submit a bug/Request a Feature” button in your app
    • No additional configuration is needed as this is pre-configured in the Titan repository
7

Configure Analytics

  1. Set up analytics tracking:
    • Add the analytics script tag to your index.html file
    • No local testing is required, this is for production use only
8

Configure Customer Support

  1. Set up customer support:
    • Connect your Stripe account to handle support tickets
    • No additional configuration is needed
9

Deploy to Vercel

  1. Create a new project in Vercel:

    • Log in to Vercel
    • Click “Add New Project”
    • Connect to your GitHub repository

  2. Configure project settings:

    • Select NextJS as the framework
    • Configure build settings if needed
    • Set your production domain

  3. Set all environment variables:

    • Add all your production API keys and configuration values
    • Double-check for any missing or incorrect values

  4. Deploy your application:

    • Click “Deploy”
    • Monitor the build process for any errors

  5. Set up your custom domain:

    • Add your domain in the Vercel project settings
    • Configure the required DNS records at your domain registrar
    • Wait for DNS propagation (can take up to 48 hours)

  6. Set Spending Caps:

    • To prevent unexpected bill surges, especially if your app gains sudden popularity, configure spending limits in your Vercel project settings. This can help you control costs associated with high traffic or usage.
    • For a demonstration on how to set this up, refer to this explanation by Lee Robinson on X.

Never commit sensitive environment variables to your repository. Always use Vercel’s environment variable system.

10

Post-Deployment Verification

  1. Verify authentication flows:

    • Test sign-up and sign-in
    • Test social authentication providers
    • Verify email verification process

  2. Verify payment processing:

    • Test subscription sign-ups
    • Test one-time payments (if applicable)
    • Verify webhook handling

  3. Verify email functionality:

    • Test transactional emails
    • Check for proper formatting and delivery

​
Additional Production Considerations

​
Security

Vercel takes care of most security concerns. However, you can still see our Security Guide for more recommendations

​
Performance

When you build with Sonnet 3.7 or Grok, you’ll usually have very performant React code. However, you can still see our Performance Guide for more recommendations and tooling to improve performance, if necessary.

​
Compliance

  • Ensure proper privacy policy and terms of service
  • Implement cookie consent if serving EU users

Templates for these coming soon.