Skip to Content
Iris Saas Kit documentation is under construction.
DeploymentOverview

Deployment

Production deployment guide for your SaaS application with Vercel, Convex, and third-party integrations.

Deployment Overview

The boilerplate is designed for easy deployment with:

  • Vercel - Frontend hosting and edge functions
  • Convex - Backend and database hosting
  • Stripe - Payment processing
  • Resend - Email delivery
  • Custom domains - Professional branding

Environment Setup

Production Environment Variables

Create a .env.production file with production values:

# App Configuration
NEXT_PUBLIC_APP_NAME="Your SaaS App"
NEXT_PUBLIC_APP_URL="https://yourdomain.com"
 
# Convex Backend (Production)
CONVEX_DEPLOYMENT=your-production-deployment
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
 
# Authentication
AUTH_SECRET=your-super-secure-secret # Use: openssl rand -base64 32
 
# Google OAuth (Production)
GOOGLE_CLIENT_ID=your-production-google-client-id
GOOGLE_CLIENT_SECRET=your-production-google-client-secret
 
# Stripe (Live Keys)
STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_live_...
 
# Email (Production)
RESEND_API_KEY=your-production-resend-key
 
# Analytics (Optional)
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
 
# Feature Flags
NEXT_PUBLIC_ENABLE_BETA_FEATURES=false
 
# Node Environment
NODE_ENV=production

Security Considerations

  • Strong secrets - Use openssl rand -base64 32 for sensitive keys
  • Environment isolation - Keep development and production separate
  • Secret rotation - Regularly update API keys and secrets
  • Access control - Limit who has access to production secrets

Convex Deployment

Production Backend

Deploy your Convex backend to production:

# Install Convex CLI
npm install -g convex
 
# Login to Convex
npx convex login
 
# Create production deployment
npx convex deploy --prod
 
# Push schema and functions
npx convex dev --prod

Environment Configuration

Set production environment variables in Convex:

# Set environment variables
npx convex env set STRIPE_SECRET_KEY sk_live_... --prod
npx convex env set RESEND_API_KEY re_... --prod
npx convex env set GOOGLE_CLIENT_SECRET your-secret --prod
 
# Verify environment variables
npx convex env list --prod

Database Migration

Migrate your development data to production (if needed):

# Export development data
npx convex export --output development-data.jsonl
 
# Import to production (be careful!)
npx convex import development-data.jsonl --prod

Vercel Deployment

Automatic Deployment

Connect your repository to Vercel for automatic deployments:

  1. Go to Vercel Dashboard 
  2. Click “New Project”
  3. Import your Git repository
  4. Configure build settings:
    • Framework Preset: Next.js
    • Build Command: npm run build
    • Output Directory: .next
    • Install Command: npm install

Environment Variables

Set environment variables in Vercel dashboard:

# Required variables
NEXT_PUBLIC_APP_NAME=Your SaaS App
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
AUTH_SECRET=your-super-secure-secret
GOOGLE_CLIENT_ID=your-production-google-client-id
GOOGLE_CLIENT_SECRET=your-production-google-client-secret
STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_live_...
RESEND_API_KEY=your-production-resend-key

Custom Domain

Set up your custom domain in Vercel:

  1. Go to your project settings
  2. Navigate to “Domains”
  3. Add your custom domain
  4. Configure DNS records:
    • Type: CNAME
    • Name: www (or @)
    • Value: your-project.vercel.app

Build Optimization

Optimize your build for production:

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable static exports for better performance
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
 
  // Compress images
  images: {
    formats: ['image/webp', 'image/avif'],
  },
 
  // Enable experimental features
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['@radix-ui/react-icons'],
  },
 
  // Security headers
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
    ];
  },
};
 
export default nextConfig;

Third-party Service Setup

Stripe Configuration

Set up Stripe for production:

  1. Switch to Live Mode in Stripe dashboard
  2. Create Products and Prices for your subscription plans
  3. Configure Webhooks:
    • Endpoint: https://yourdomain.com/api/webhooks/stripe
    • Events: customer.subscription.*, invoice.*
  4. Update Price IDs in your configuration
  5. Test with real cards (use small amounts)

Google OAuth Setup

Configure Google OAuth for production:

  1. Go to Google Cloud Console 
  2. Create a new project or select existing
  3. Enable Google+ API
  4. Create OAuth 2.0 credentials
  5. Add authorized redirect URIs:
    • https://yourdomain.com/api/auth/callback/google
  6. Update client ID and secret in environment variables

Resend Email Setup

Set up Resend for production emails:

  1. Create account at Resend 
  2. Verify your domain for better deliverability
  3. Create API key with appropriate permissions
  4. Configure DKIM records for your domain
  5. Test email delivery in production

Monitoring & Analytics

Error Tracking

Set up error tracking with Sentry:

npm install @sentry/nextjs
// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';
 
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

Performance Monitoring

Monitor application performance:

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Uptime Monitoring

Set up uptime monitoring:

  1. Vercel Analytics - Built-in monitoring
  2. UptimeRobot - External uptime monitoring
  3. Pingdom - Comprehensive monitoring solution
  4. Custom health checks - API endpoints for monitoring

Security Configuration

HTTPS & SSL

Ensure HTTPS is properly configured:

  • Vercel automatically provides SSL certificates
  • Redirect HTTP to HTTPS
  • Use HSTS headers for security
  • Configure CSP headers

Rate Limiting

Implement rate limiting for API routes:

// lib/rate-limit.ts
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
 
const redis = Redis.fromEnv();
 
export const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, '10 s'),
});
 
// Usage in API routes
export default async function handler(req, res) {
  const { success } = await ratelimit.limit(
    req.headers['x-forwarded-for'] || '127.0.0.1'
  );
 
  if (!success) {
    return res.status(429).json({ error: 'Too many requests' });
  }
 
  // Handle request
}

Content Security Policy

Configure CSP headers:

// next.config.mjs
const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' blob: data: https:;
  font-src 'self';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`;
 
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ];
  },
};

Performance Optimization

Caching Strategy

Implement appropriate caching:

// next.config.mjs
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/public/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, s-maxage=86400, stale-while-revalidate',
          },
        ],
      },
    ];
  },
};

Database Optimization

Optimize Convex queries for production:

  • Use appropriate indexes
  • Implement pagination
  • Cache frequently accessed data
  • Monitor query performance

Image Optimization

Optimize images for production:

// next.config.mjs
const nextConfig = {
  images: {
    domains: ['images.unsplash.com', 'avatars.githubusercontent.com'],
    formats: ['image/webp', 'image/avif'],
    minimumCacheTTL: 60,
  },
};

Backup & Recovery

Database Backups

Set up regular backups:

# Daily backup script
#!/bin/bash
DATE=$(date +%Y%m%d_%H%M%S)
npx convex export --output "backups/backup_${DATE}.jsonl" --prod
 
# Keep only last 30 days
find backups/ -name "backup_*.jsonl" -mtime +30 -delete

Disaster Recovery Plan

  1. Regular backups - Daily database exports
  2. Version control - All code in Git
  3. Infrastructure as code - Documented deployment process
  4. Recovery testing - Regular restore tests
  5. Monitoring alerts - Immediate notification of issues

Deployment Checklist

Pre-deployment

  • All environment variables configured
  • Stripe webhooks tested
  • Email delivery tested
  • Database migrations applied
  • Security headers configured
  • Performance optimizations applied

Post-deployment

  • DNS records updated
  • SSL certificate active
  • Monitoring configured
  • Error tracking active
  • Backup system running
  • User acceptance testing
  • Performance benchmarks met

Go-live

  • Custom domain active
  • Production data migrated
  • Payment processing tested
  • User onboarding flow tested
  • Support documentation updated
  • Team notifications configured

Next: Learn about Advanced Topics and customization options.

Last updated on
Function ReferenceVercel Deployment (tbc)