Chameleon

Deployment

Learn how to deploy your Chameleon application to production

Deployment Guide

Learn how to deploy your Chameleon application to various platforms. Chameleon is designed to work seamlessly with modern hosting providers.

Deployment Options

Chameleon supports multiple deployment platforms:

1. Vercel (Recommended)

Deploy to Vercel →

Why Vercel?

  • ✅ Built for Next.js
  • ✅ Zero configuration
  • ✅ Automatic HTTPS
  • ✅ Edge network globally
  • ✅ Vercel Postgres included
  • ✅ Environment variables UI
  • ✅ Preview deployments
  • ✅ Free hobby tier

Best for:

  • Production deployments
  • Teams needing collaboration
  • Projects requiring high availability

Time to deploy: 10 minutes

2. Cloudflare Pages

Deploy to Cloudflare →

Why Cloudflare?

  • ✅ Global CDN
  • ✅ Fast edge computing
  • ✅ Generous free tier
  • ✅ DDoS protection
  • ✅ Works with D1 database
  • ✅ Workers for serverless

Best for:

  • Global audience
  • Cost optimization
  • High-traffic applications

Time to deploy: 20 minutes

3. Dokploy (Self-hosted)

Deploy with Dokploy →

Why Dokploy?

  • ✅ Full control
  • ✅ Self-hosted
  • ✅ Docker-based
  • ✅ One-click setup
  • ✅ CI/CD included
  • ✅ Database included

Best for:

  • Self-hosting enthusiasts
  • Privacy-focused projects
  • Custom infrastructure needs

Time to deploy: 30 minutes

Prerequisites

Before deploying, ensure you have:

1. Code Ready

# Test production build locally
pnpm build
pnpm start

# If build succeeds, you're ready!

2. Environment Variables

Configure these in your hosting provider:

Required:

DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="your-secret"
NEXTAUTH_URL="https://your-domain.com"
ADMIN_EMAILS="your-email@example.com"

Optional:

# Payment
STRIPE_SECRET_KEY="sk_live_..."
STRIPE_PUBLISHABLE_KEY="pk_live_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# AI Providers (can also configure in admin UI)
OPENAI_API_KEY="sk-..."
KLING_ACCESS_KEY="..."
SEEDANCE_API_KEY="..."

# Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-..."

3. Database

Option 1: Vercel Postgres (Easiest)

  • Create in Vercel dashboard
  • Auto-connects to your app
  • Generous free tier

Option 2: External Database

  • Railway, PlanetScale, Neon, etc.
  • Copy connection string
  • Add to DATABASE_URL

4. Domain (Optional)

  • Purchase domain from provider
  • Configure DNS in hosting platform
  • SSL certificate (usually automatic)

Deployment Checklist

Use this checklist before going live:

Pre-Deployment

  • Code builds successfully (pnpm build)
  • All environment variables configured
  • Database schema migrated (pnpm db:push)
  • Admin email set in ADMIN_EMAILS
  • Stripe keys for production (if using payments)
  • Update NEXTAUTH_URL to production domain

Post-Deployment

  • Visit site and verify it loads
  • Test authentication (Google/GitHub login)
  • Try creating an AI generation
  • Test payment flow (if applicable)
  • Verify admin panel access
  • Check analytics tracking
  • Test on mobile devices

Stripe Webhook Setup (If using payments)

  • Configure webhook in Stripe Dashboard
  • Webhook URL: https://your-domain.com/api/pay/notify/stripe
  • Select events: checkout.session.completed, customer.subscription.*
  • Copy webhook secret to STRIPE_WEBHOOK_SECRET
  • Test with Stripe CLI: stripe listen --forward-to localhost:3000/api/pay/notify/stripe

Quick Start: Deploy to Vercel

The fastest way to deploy:

  1. Push to GitHub

    git add .
git commit -m "Ready for deployment"
git push origin main

  2. Import to Vercel

    • Visit vercel.com/new
    • Connect GitHub
    • Select your repository
    • Click Deploy

  3. Add Environment Variables

    • Go to Settings → Environment Variables
    • Add DATABASE_URL, NEXTAUTH_SECRET, etc.
    • Redeploy

  4. Done! Your app is live 🎉

Detailed Vercel Guide →

Comparison

FeatureVercelCloudflareDokploy
Ease of Setup⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Free Tier⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ (self-hosted)
Global CDN⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Database✅ Vercel Postgres⚠️ D1 or external✅ Included
Preview Deploys✅ Yes✅ Yes✅ Yes
Custom Domain✅ Free✅ Free✅ Yes
Serverless✅ Yes✅ Yes❌ No
Build TimeFastFastMedium
Control⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

Database Considerations

PostgreSQL (Recommended)

Works with all deployment options:

Vercel Postgres:

  • Easiest for Vercel deployments
  • 256MB free
  • Built-in connection pooling

Neon:

  • Serverless PostgreSQL
  • 3GB free storage
  • Good for Cloudflare

Railway:

  • $5/month
  • More resources
  • Simple setup

Supabase:

  • Generous free tier
  • Includes auth, storage
  • Good for all platforms

Connection Pooling

For serverless platforms (Vercel, Cloudflare):

# Use connection pooling URL
DATABASE_URL="postgres://user:pass@host:6543/db?sslmode=require&pgbouncer=true"

Environment-Specific Configuration

Development

.env.development:

NEXTAUTH_URL="http://localhost:3000"
DATABASE_URL="postgresql://localhost:5432/chameleon_dev"

Staging

.env.staging:

NEXTAUTH_URL="https://staging.your-domain.com"
DATABASE_URL="postgresql://staging-db-url"

Production

.env.production (Set in hosting provider):

NEXTAUTH_URL="https://your-domain.com"
DATABASE_URL="postgresql://production-db-url"
STRIPE_SECRET_KEY="sk_live_..." # Use live keys!

CI/CD

GitHub Actions (Optional)

Automatically deploy on push:

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: pnpm install
      - run: pnpm build
      - run: pnpm test
      # Deploy step depends on platform

Preview Deployments

Most platforms automatically create preview deployments:

  • Vercel: Every PR gets a preview URL
  • Cloudflare: Branch deployments available
  • Dokploy: Configure branch-based deployments

Security

Before Going Live

  1. Use Production Keys

    • Stripe live keys (not test)
    • Production API keys
    • Strong NEXTAUTH_SECRET

  2. HTTPS Only

    • All hosting providers provide free SSL
    • Force HTTPS in production

  3. Environment Variables

    • Never commit secrets to Git
    • Use hosting provider's UI to add secrets

  4. Rate Limiting

    • Consider adding rate limiting middleware
    • Use Vercel's built-in protection

  5. Content Security Policy

    • Configure CSP headers in next.config.mjs

Monitoring

Analytics

  • Vercel Analytics: Built-in for Vercel deployments
  • Google Analytics: Configure NEXT_PUBLIC_GOOGLE_ANALYTICS_ID
  • OpenPanel: Privacy-focused alternative

Error Tracking

Consider adding:

  • Sentry: Error monitoring
  • LogRocket: Session replay
  • Datadog: Full observability

Performance

  • Vercel Speed Insights: Web Vitals tracking
  • Lighthouse CI: Automated performance tests

Troubleshooting

Build Fails

# Common fixes:
1. Check Node.js version (18+)
2. Clear cache: rm -rf .next node_modules
3. Reinstall: pnpm install
4. Test locally: pnpm build

Database Connection Errors

# Check:
1. DATABASE_URL is correct
2. Database allows connections from hosting IP
3. Use connection pooling for serverless
4. Check SSL mode: ?sslmode=require

Environment Variables Not Working

# Solutions:
1. Restart deployment after adding variables
2. Check variable names (case-sensitive)
3. Ensure NEXT_PUBLIC_ prefix for client variables
4. Redeploy application

Cost Estimation

Hobby Project (Free)

  • Vercel: Free plan
  • Database: Vercel Postgres free tier
  • Domain: $10-15/year
  • Total: ~$15/year

Small SaaS ($20-50/month)

  • Vercel: Pro plan $20/month
  • Database: Neon or Railway $5-10/month
  • Stripe: Transaction fees only
  • Total: ~$30-50/month

Growing SaaS ($100-500/month)

  • Vercel: Pro or Enterprise
  • Database: Scaled instance
  • CDN: Additional bandwidth
  • Monitoring: Sentry, etc.
  • Total: Varies by usage

Next Steps

Choose your deployment platform:

  1. Deploy to Vercel - Recommended for most projects
  2. Deploy to Cloudflare - Great for global apps
  3. Deploy with Dokploy - Self-hosting option

After deployment:

Ready to go live? Pick a platform and follow the detailed guide! 🚀