┌─────────────────────────────────────────────┐
│           Vercel Platform                  │
├─────────────────────────────────────────────┤
│  Frontend (React + Vite)                  │
│  → Static build on Vercel                 │
│  → Deployed to global CDN edge            │
├─────────────────────────────────────────────┤
│  Backend API (Node.js + Express)          │
│  → Converted to serverless functions       │
│  → Runs on Vercel Edge Network            │
├─────────────────────────────────────────────┤
│  Database (PostgreSQL via Prisma)          │
│  → External (Neon, Supabase, or Railway)  │
│  → Connected via environment variables     │
└─────────────────────────────────────────────┘

npm i -g vercel

cd ayw-monorepo
vercel login
vercel link

{
  "version": 2,
  "projects": {
    "frontend": {
      "root": "apps/frontend",
      "outputDirectory": "dist",
      "buildCommand": "npm run build",
      "devCommand": "npm run dev",
      "framework": "vite"
    }
  }
}

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

VITE_API_URL=https://your-backend.vercel.app
VITE_WS_URL=wss://your-backend.vercel.app

cd apps/frontend
vercel --prod

import express from 'express';
import serverless from 'serverless-http';
import cors from 'cors';
import helmet from 'helmet';

import authRoutes from '../src/routes/auth';
import conversationRoutes from '../src/routes/conversations';
import chatbotRoutes from '../src/routes/chatbot';

const app = express();

// Security middleware
app.use(helmet());
app.use(cors({
  origin: process.env.FRONTEND_URL || 'https://your-frontend.vercel.app',
  credentials: true
}));

app.use(express.json());

// API routes
app.use('/auth', authRoutes);
app.use('/conversations', conversationRoutes);
app.use('/chatbot', chatbotRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// Export as serverless function
export default serverless(app);

cd apps/backend
npm install serverless-http

{
  "version": 2,
  "builds": [
    {
      "src": "api/index.ts",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["dist/**"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/api/index.ts"
    }
  ]
}

DATABASE_URL=postgresql://user:pass@your-db.com:5432/ayw_db
OPENAI_API_KEY=sk-your-openai-key
JWT_SECRET=your-jwt-secret-32-chars-minimum
FRONTEND_URL=https://your-frontend.vercel.app

cd apps/backend
vercel --prod

postgresql://user:password@ep-cool-neon.us-east-2.aws.neon.tech/ayw_db?sslmode=require

# Locally (with production DATABASE_URL)
npx prisma migrate deploy

# Or use Vercel's build step:
# Add to package.json:
"scripts": {
  "vercel-build": "npx prisma generate && npx prisma migrate deploy && npm run build"
}

cd apps/chatbot
npm run build

{
  "version": 2,
  "public": "dist",
  "routes": [
    {
      "src": "/ayw-widget.js",
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable",
        "Content-Type": "application/javascript"
      }
    }
  ]
}

<!-- Add before </body> tag -->
<script>
  window.AYW_CONFIG = {
    companyId: 'your-company-id',
    apiKey: 'your-api-key',
    theme: 'light',
    position: 'bottom-right'
  };
</script>
<script src="https://your-chatbot.vercel.app/ayw-widget.js" async></script>

// api/socket.ts (Edge Function)
export const config = {
  runtime: 'edge',
};

export default async function handler(request: Request) {
  // Edge runtime has limited WebSocket support
  // Best for simple HTTP polling fallback
  return new Response('WebSocket not supported in Edge', { status: 426 });
}

// Backend: Send message to Pusher
import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: 'us2'
});

await pusher.trigger(`conversation-${id}`, 'new-message', {
  message: botResponse,
  timestamp: new Date()
});

// Frontend: Listen for messages
import Pusher from 'pusher-js';

const pusher = new Pusher('your-pusher-key', {
  cluster: 'us2'
});

const channel = pusher.subscribe(`conversation-${id}`);
channel.bind('new-message', (data) => {
  setMessages(prev => [...prev, data.message]);
});

PR #123: "Add sentiment analysis to chatbot"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Frontend preview: https://ayw-frontend-git-pr-123.vercel.app
✅ Backend preview:  https://ayw-backend-git-pr-123.vercel.app
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

// Backend: Update CORS origin
app.use(cors({
  origin: [
    'https://chatbot.yourcompany.com',
    'https://yourcompany.com',
    process.env.FRONTEND_URL!
  ],
  credentials: true
}));

// Cache common responses (Redis or in-memory)
const faqCache = new Map<string, string>();

const getBotResponse = async (message: string) => {
  // Check cache first
  if (faqCache.has(message)) {
    return faqCache.get(message);
  }

  // Generate response
  const response = await openai.generateResponse(message);

  // Cache for 1 hour
  faqCache.set(message, response);
  setTimeout(() => faqCache.delete(message), 3600000);

  return response;
};

// vercel.json
{
  "functions": {
    "api/chatbot.ts": {
      "runtime": "edge",
      "regions": ["iad1", "sfo1", "lhr1"] // US East, US West, London
    }
  }
}

// Log chatbot interactions
await fetch('https://your-logging-endpoint.com/log', {
  method: 'POST',
  body: JSON.stringify({
    conversationId,
    message,
    response: botResponse,
    timestamp: new Date()
  })
});

"scripts": {
  "vercel-build": "npx prisma generate && npm run build"
}

const allowedOrigins = [
  'https://your-frontend.vercel.app',
  process.env.FRONTEND_URL!
];

// Add preview URL pattern
if (process.env.VERCEL_URL) {
  allowedOrigins.push(`https://${process.env.VERCEL_URL}`);
}