Vercel Deployment Configuration for HG Content System¶

Vercel Projects:
├── hgcontent.com          - Marketing site (apps/frontend)
├── app.hgcontent.com      - Dashboard app (apps/frontend with auth routing)  
├── docs.hgcontent.com     - Documentation portal (MkDocs)
└── api.hgcontent.com      - External API (apps/external) - Deploy to Railway

{
  "name": "hg-content-marketing",
  "version": 2,
  "builds": [
    {
      "src": "apps/frontend/package.json",
      "use": "@vercel/next",
      "config": {
        "distDir": ".next"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/frontend/$1"
    }
  ],
  "env": {
    "NEXT_PUBLIC_SUPABASE_URL": "@supabase-url",
    "NEXT_PUBLIC_SUPABASE_ANON_KEY": "@supabase-anon-key",
    "SUPABASE_SERVICE_KEY": "@supabase-service-key",
    "REDIS_URL": "@redis-url"
  }
}

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_KEY=your-service-role-key

# Redis Configuration (Upstash recommended for Vercel)
REDIS_URL=redis://default:password@redis-host:port

# Service URLs
NEXT_PUBLIC_IM_SERVICE_URL=https://im.hgcontent.com
NEXT_PUBLIC_CPM_SERVICE_URL=https://cpm.hgcontent.com  
NEXT_PUBLIC_SMM_SERVICE_URL=https://smm.hgcontent.com

# Analytics (optional)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=hgcontent.com

# Framework Preset
Framework Preset: Next.js

# Build Command (default for Next.js)
Build Command: npm run build

# Output Directory (default for Next.js)
Output Directory: .next

# Install Command
Install Command: npm ci

# Development Command  
Development Command: npm run dev

# Root Directory
Root Directory: apps/frontend

{
  "name": "hg-content-docs",
  "version": 2,
  "builds": [
    {
      "src": "requirements-docs.txt",
      "use": "@vercel/python"
    },
    {
      "src": "build.sh",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "site"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/site/$1"
    }
  ]
}

# Create build.sh in root directory
#!/bin/bash
pip install -r requirements-docs.txt
mkdocs build

# Python Version
PYTHON_VERSION=3.11

# Analytics
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
MKDOCS_ANALYTICS_ID=G-XXXXXXXXXX

# Redis (for feedback system)
REDIS_URL=redis://default:password@redis-host:port

// lib/redis.ts
import { Redis } from '@upstash/redis'

export const redis = Redis.fromEnv()

// Usage examples
export async function setCacheValue(key: string, value: any, ttl = 3600) {
  return await redis.setex(key, ttl, JSON.stringify(value))
}

export async function getCacheValue(key: string) {
  const value = await redis.get(key)
  return value ? JSON.parse(value) : null
}

// Rate limiting
export async function checkRateLimit(ip: string, limit = 100) {
  const key = `rate_limit:${ip}`
  const count = await redis.incr(key)
  if (count === 1) {
    await redis.expire(key, 3600) // 1 hour window
  }
  return count <= limit
}

// Session storage
export async function storeSession(sessionId: string, data: any) {
  await redis.setex(`session:${sessionId}`, 86400, JSON.stringify(data)) // 24 hours
}

// Analytics caching
export async function cacheAnalytics(key: string, data: any) {
  await redis.setex(`analytics:${key}`, 3600, JSON.stringify(data)) // 1 hour
}

// Documentation feedback
export async function storeFeedback(pageId: string, feedback: any) {
  await redis.lpush(`feedback:${pageId}`, JSON.stringify({
    ...feedback,
    timestamp: Date.now()
  }))
}

# Main domains
hgcontent.com → Vercel project (marketing)
app.hgcontent.com → Vercel project (dashboard)
docs.hgcontent.com → Vercel project (documentation)
api.hgcontent.com → Railway deployment (external API)

# DNS Records (at your domain provider)
Type: CNAME
Name: @
Value: cname.vercel-dns.com

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

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

Type: CNAME
Name: api
Value: your-railway-domain.up.railway.app

// pages/api/edge-example.ts
import type { NextRequest } from 'next/server'

export const config = {
  runtime: 'edge'
}

export default async function handler(req: NextRequest) {
  // Runs at the edge, closer to users
  const response = await fetch('https://api.hgcontent.com/status')
  return new Response(await response.text(), {
    status: 200,
    headers: { 'content-type': 'application/json' }
  })
}

// pages/api/contact.ts
import { NextApiRequest, NextApiResponse } from 'next'
import { redis } from '@/lib/redis'

export default async function handler(
  req: NextApiRequest, 
  res: NextApiResponse
) {
  if (req.method === 'POST') {
    // Store contact form submission
    await redis.lpush('contact_forms', JSON.stringify({
      ...req.body,
      timestamp: Date.now(),
      ip: req.headers['x-forwarded-for']
    }))

    res.status(200).json({ success: true })
  } else {
    res.status(405).json({ error: 'Method not allowed' })
  }
}

# Automatic preview deployments for:
- Pull requests
- Feature branches
- Development pushes

# Preview URLs format:
https://hg-content-git-feature-username.vercel.app

// Enable Vercel Analytics
import { Analytics } from '@vercel/analytics/react'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

// Web Vitals reporting
export function reportWebVitals(metric) {
  // Send to analytics service or Vercel Analytics
  if (metric.label === 'web-vital') {
    console.log(metric)
  }
}

// Sentry integration (optional)
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV
})

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          },
          {
            key: 'X-Content-Type-Options', 
            value: 'nosniff'
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin'
          }
        ]
      }
    ]
  }
}

# Use Vercel's encrypted environment variables
# Never commit sensitive values to git

# In Vercel Dashboard → Project → Settings → Environment Variables
# Set as "Encrypted" for sensitive values

# .github/workflows/deploy.yml (optional, Vercel auto-deploys)
name: Deploy to Vercel
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - 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 }}

# Install Vercel CLI
npm i -g vercel

# Login to Vercel
vercel login

# Deploy (from project root)
vercel --prod

# Deploy specific directory
vercel apps/frontend --prod

# Analyze bundle
npx @next/bundle-analyzer

# Check Core Web Vitals
# Use Vercel Analytics or Lighthouse

# Optimize images
# Vercel automatically optimizes images with next/image