Shipping Real Products

Why Vercel beats GitHub Pages for real products

• Automatic deploys — push to GitHub → Vercel builds and deploys in under 30 seconds. No manual steps.
• Preview deployments — every pull request gets its own live URL. Share it for review before merging.
• Environment variables — store API keys and secrets securely. They never appear in your code or GitHub.
• Serverless functions — write backend logic (like making API calls with secret keys) without maintaining a server.
• Custom domains — connect a domain in 2 minutes. Free SSL included.

Deploying to Vercel

1. 1
   Push your project to GitHub (you know how to do this from Chapter 5).
2. 2
   Go to vercel.com → Sign up with GitHub → "New Project" → Import your GitHub repo.
3. 3
   Vercel auto-detects your framework (React, Next.js, plain HTML, etc.) and sets the build command. Click Deploy.
4. 4
   In 30 seconds you have a live URL: your-project.vercel.app. Share it. Every future push to main triggers a new deploy automatically.

Environment variables — keeping secrets secret

# .env.local
ANTHROPIC_API_KEY=sk-ant-api03-...
FIREBASE_API_KEY=AIzaSy...
DATABASE_URL=postgres://user:password@host/db

// In a Next.js API route or Vercel serverless function
const apiKey = process.env.ANTHROPIC_API_KEY;

// In client-side React (Vite), prefix with VITE_
// Note: client-side env vars are public — only use for non-secret values
const publicKey = import.meta.env.VITE_PUBLIC_KEY;

Serverless functions

// This file lives at /api/chat.js
// Vercel automatically makes it available at /api/chat
// The API key stays on the server — never exposed to browsers

export default async function handler(req, res) {
  const { message } = req.body;

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.ANTHROPIC_API_KEY, // secret, server-only
      'content-type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-opus-4-6',
      max_tokens: 1024,
      messages: [{ role: 'user', content: message }]
    })
  });

  const data = await response.json();
  res.json({ reply: data.content[0].text });
}