Deployment Guide

Complete guide to deploying 60 Projects to production on various cloud platforms.

🚀 Quick Overview

All projects are configured for one-click deployment on multiple platforms:

📋 Prerequisites

Before deploying, ensure you have:

1. Git Repository - Code pushed to GitHub/GitLab
2. Platform Account - Account on deployment platform
3. Environment Variables - API keys and secrets
4. Domain (Optional) - Custom domain for production

🔥 Platform-Specific Guides

1. Vercel (Recommended for Next.js)

Best for: Next.js projects, React apps, static sites

Setup Steps

1. Install Vercel CLI

npm install -g vercel

2. Login to Vercel

vercel login

3. Deploy Project

# From project directory
vercel

# Follow prompts:
# - Link to existing project or create new
# - Set project name
# - Add environment variables
# - Deploy to production

4. Add Environment Variables

In Vercel dashboard:

• Go to Project Settings → Environment Variables
• Add variables from .env.example
• Common variables:

  DATABASE_URL=
  NEXTAUTH_SECRET=
  STRIPE_SECRET_KEY=
  OPENAI_API_KEY=
  RESEND_API_KEY=
  SUPABASE_URL=
  SUPABASE_ANON_KEY=

5. Custom Domain (Optional)

• Go to Project Settings → Domains
• Add your domain
• Update DNS records

Automatic Deployment

Vercel automatically deploys:

• On every push to main branch
• On every pull request (preview URLs)
• When you push git tags

vercel.json Configuration

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["iad1"],
  "env": {
    "NEXT_PUBLIC_APP_URL": "https://yourdomain.com"
  }
}

Pros:

• ✅ Zero configuration for Next.js
• ✅ Automatic HTTPS
• ✅ Preview deployments
• ✅ Fast edge network
• ✅ GitHub integration

Cons:

• ❌ Serverless functions timeout (10s pro, 10s hobby)
• ❌ Limited execution time on free tier

2. Netlify

Best for: Static sites, JAMstack apps, SPAs

Setup Steps

1. Install Netlify CLI

npm install -g netlify-cli

2. Login to Netlify

netlify login

3. Initialize Project

netlify init

4. Deploy

netlify deploy --prod

netlify.toml Configuration

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[build.environment]
  NEXT_PUBLIC_APP_URL = "https://yourdomain.com"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Pros:

• ✅ Great for static sites
• ✅ Form handling included
• ✅ Serverless functions
• ✅ CDN included

Cons:

• ❌ Next.js requires plugin
• ❌ Slower cold starts than Vercel

3. Render

Best for: Full-stack apps, Docker containers, background workers

Setup Steps

1. Create Account - render.com

2. Connect GitHub

3. Create New Web Service

   • Connect repository
   • Select branch (usually main)
   • Add environment variables
   • Click "Deploy"

render.yaml Configuration

services:
  - type: web
    name: my-app
    env: node
    buildCommand: npm run build
    startCommand: npm run start
    envVars:
      - key: NODE_VERSION
        value: 18
      - key: DATABASE_URL
        sync: false

Environment Variables:

Add in Render dashboard:

DATABASE_URL=
NEXTAUTH_SECRET=
STRIPE_SECRET_KEY=
OPENAI_API_KEY=

Pros:

• ✅ Supports Docker
• ✅ Background workers
• ✅ Databases included
• ✅ Longer execution times
• ✅ Cheap pricing

Cons:

• ❌ Slower cold starts
• ❌ Limited global network

4. Cloudflare Pages

Best for: Static sites, edge functions, global reach

Setup Steps

1. Install Wrangler CLI

npm install -g wrangler

2. Login

wrangler login

3. Deploy

# For static sites
wrangler pages publish dist

# For Next.js (with adapter)
npm run build

Configuration

Add to next.config.js:

const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  }
}

Pros:

• ✅ Fastest global network
• ✅ Unlimited bandwidth
• ✅ Edge functions
• ✅ DDoS protection

Cons:

• ❌ No server-side Next.js support
• ❌ Limited edge function runtime

5. Firebase Hosting

Best for: Static sites, PWAs, real-time apps

Setup Steps

1. Install Firebase CLI

npm install -g firebase-tools

2. Login

firebase login

3. Initialize

firebase init hosting

4. Deploy

firebase deploy

firebase.json Configuration

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Pros:

• ✅ Fast global CDN
• ✅ Real-time database
• ✅ Authentication included
• ✅ Free SSL certificates

Cons:

• ❌ Build process separate
• ❌ No server-side rendering support

6. AWS Amplify

Best for: Enterprise apps, AWS ecosystem integration

Setup Steps

1. Install Amplify CLI

npm install -g @aws-amplify/cli

2. Configure

amplify init
amplify add hosting

3. Deploy

amplify publish

Pros:

• ✅ AWS integration
• ✅ Authentication
• ✅ GraphQL APIs
• ✅ Serverless functions

Cons:

• ❌ Complex setup
• ❌ Can get expensive
• ❌ Steep learning curve

7. Azure Static Web Apps

Best for: Microsoft stack, enterprise

Setup Steps

1. Create Resource - Azure Portal

2. Connect GitHub

3. Configure Build

app_build_command: "npm run build"
app_location: "/"
api_location: "api"
output_location: "out"

Pros:

• ✅ Free SSL
• ✅ GitHub integration
• ✅ Automatic deployments
• ✅ Backend functions included

Cons:

• ❌ Smaller network than Vercel
• ❌ Less developer-friendly

🔐 Environment Variables Management

Best Practices

1. Never Commit Secrets

# Add to .gitignore
.env.local
.env.*.local

2. Use Platform UI

• Add variables in platform dashboard
• Never expose in client code
• Use NEXT_PUBLIC_ prefix for public vars

3. Variable Naming

# Backend only (server-side)
DATABASE_URL=
STRIPE_SECRET_KEY=

# Public (exposed to client)
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_STRIPE_PRICE_ID=

4. Validation

// Validate required env vars
const requiredVars = [
  'DATABASE_URL',
  'NEXTAUTH_SECRET',
  'STRIPE_SECRET_KEY'
]

for (const varName of requiredVars) {
  if (!process.env[varName]) {
    throw new Error(`Missing: ${varName}`)
  }
}

📊 Deployment Checklist

Before deploying to production:

Code Quality

• Run npm run lint - No errors
• Run npm run build - Build succeeds
• Run npm run test - Tests pass
• Check for console errors
• Remove console.log() statements

Performance

• Optimize images
• Enable compression
• Set up caching
• Minify CSS/JS
• Lazy load components

Security

• Add security headers
• Enable HTTPS
• Set CORS policy
• Validate inputs
• Sanitize user data
• Rate limiting

SEO

• Add meta tags
• Create sitemap.xml
• Add robots.txt
• Open Graph tags
• Structured data

Analytics

• Set up Google Analytics
• Add error tracking (Sentry)
• Monitor performance
• Track user behavior

Documentation

• Update README
• Add deployment notes
• Document environment variables
• Create runbook

🌍 Custom Domain Setup

1. Purchase Domain

• Namecheap
• Google Domains
• Cloudflare Registrar

2. Update DNS Records

For Vercel:

Type: CNAME
Name: @
Value: cname.vercel-dns.com

Type: CNAME
Name: www
Value: cname.vercel-dns.com

For Netlify:

Type: CNAME
Name: @
Value: your-site.netlify.app

3. Configure Platform

Add domain in platform dashboard and verify DNS.

📱 Post-Deployment Tasks

1. Test Production

# Test all critical paths
- Homepage loads
- Authentication works
- Database connects
- Payment flow works
- Forms submit
- API endpoints respond

2. Set Up Monitoring

• Error tracking (Sentry)
• Analytics (Google Analytics)
• Performance (Web Vitals)
• Uptime monitoring (UptimeRobot)

3. Configure Backups

• Database backups
• Code repositories
• Asset backups
• Disaster recovery plan

4. Set Up Alerts

• Error alerts
• Performance alerts
• Security alerts
• SSL expiry reminders

🔄 CI/CD Pipeline

GitHub Actions Example

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Test
        run: npm run test

      - name: Build
        run: npm run build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

💰 Cost Comparison

🆚 Choosing a Platform

Use Vercel if:

• Building Next.js apps
• Want zero config
• Need preview deployments
• Value performance

Use Netlify if:

• Building static sites
• Need form handling
• Want JAMstack features
• Value ease of use

Use Render if:

• Need backend services
• Running Docker containers
• Want background workers
• Need longer execution times

Use Cloudflare if:

• Need global reach
• Want edge functions
• Value privacy
• Need DDoS protection

Use Firebase if:

• Building real-time apps
• Need authentication
• Using Google ecosystem
• Want BaaS features

Use AWS if:

• Enterprise requirements
• Need AWS services
• Complex infrastructure
• Have DevOps team

📚 Resources

• Vercel Docs
• Netlify Docs
• Render Docs
• Cloudflare Pages Docs
• Firebase Docs
• AWS Amplify Docs

🎯 Quick Decision Matrix

Congratulations! Your project is now live! 🎉

Need help? Check the documentation or join our community.