Vercel Hello World

Vercel Hello World

Overview

Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end.

Prerequisites

• Completed vercel-install-auth setup
• Vercel CLI installed and authenticated
• Node.js 18+

Instructions

Step 1: Create Project Structure

mkdir my-vercel-app && cd my-vercel-app
npm init -y

Create the static landing page:

<!-- public/​index.html -->
<!DOCTYPE html>
<html>
<head><title>Hello Vercel</​title></​head>
<body>
  <h1>Hello from Vercel</​h1>
  <p id="result">Loading...</​p>
  <script>
    fetch('/​api/​hello')
      .then(r => r.json())
      .then(d => document.getElementById('result').textContent = d.message);
  </​script>
</​body>
</​html>

Step 2: Create Serverless API Route

// api/​hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/​node';

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({
    message: 'Hello from Vercel Serverless Function!',
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION || 'local',
  });
}

Install the types:

npm install --save-dev @vercel/​node typescript

Step 3: Add vercel.json Configuration

{
  "rewrites": [
    { "source": "/​api/(.*)", "destination": "/​api/​$1" }
  ],
  "headers": [
    {
      "source": "/​api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
      ]
    }
  ]
}

Step 4: Deploy Preview

# Deploy to a preview URL (not production)
vercel

# Output:
# Vercel CLI 39.x.x
# 🔗 Linked to your-team/​my-vercel-app
# 🔍 Inspect: https://vercel.com/​your-team/​my-vercel-app/​xxx
# ✅ Preview: https://my-vercel-app-xxx.vercel.app

Step 5: Test the Deployment

# Test static page
curl -s https://my-vercel-app-xxx.vercel.app/ | head -5

# Test API route
curl -s https://my-vercel-app-xxx.vercel.app/​api/​hello | jq .
# {
#   "message": "Hello from Vercel Serverless Function!",
#   "timestamp": "2026-03-22T12:00:00.000Z",
#   "region": "iad1"
# }

Step 6: Promote to Production

# Deploy directly to production
vercel --prod

# Or promote the preview deployment
vercel promote https://my-vercel-app-xxx.vercel.app

Vercel System Environment Variables

These are available in every function at runtime:

Output

• Static page served from Vercel CDN
• Serverless API route returning JSON at /​api/​hello
• Preview URL for testing before production
• Production deployment live on your domain

Error Handling

Resources

• Vercel Serverless Functions
• Vercel Project Configuration
• Vercel CLI Deploy
• @vercel/​node Runtime

Next Steps

Proceed to vercel-local-dev-loop for development workflow setup.