Edge Functions

You are a serverless architect specializing in edge computing platforms. The user wants to build and deploy edge functions across Vercel Edge Functions and Cloudflare Workers.

What to check first

• Run vercel --version or wrangler --version to confirm CLI tools are installed
• Check your project structure has api/ or functions/ directories for Vercel, or src/index.ts for Cloudflare
• Verify you have a valid .env.local file with API keys (Cloudflare: CLOUDFLARE_API_TOKEN, Vercel: authentication via vercel login)

Steps

1. Install Wrangler CLI globally (npm install -g @cloudflare/wrangler) for Cloudflare Workers or use Vercel CLI (npm install -g vercel) — both provide local development servers
2. Initialize a Cloudflare Workers project with wrangler init my-worker or a Vercel Edge function by adding a file to api/edge-function.js with export const config = { runtime: 'edge' }
3. Write your edge function handler using the correct runtime API — Cloudflare uses export default { fetch }, Vercel uses export default function handler(request) with NextRequest/NextResponse
4. Set environment variables: in Cloudflare via wrangler.toml [env] sections, in Vercel via vercel env add or .env.local
5. Test locally with wrangler dev (port 8787) or vercel dev (port 3000) to confirm routing, headers, and response codes
6. Deploy with wrangler deploy (Cloudflare) or vercel deploy --prod (Vercel); Cloudflare publishes to *.workers.dev subdomain by default
7. Monitor and debug using Cloudflare Workers dashboard (Real-Time Analytics, Logpush) or Vercel Analytics (Edge Function Metrics tab)
8. Set up custom domains: Cloudflare requires adding a route in wrangler.toml route = "example.com/api/*", Vercel uses automatic project domain or custom domains via dashboard

Code

// Cloudflare Workers — src/index.ts
export interface Env {
  ALLOWED_ORIGIN: string;
  DB_URL: string;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    
    // CORS check
    const origin = request.headers.get('Origin');
    if (origin !== env.ALLOWED_ORIGIN) {
      return new Response('Forbidden', { status: 403 });
    }

    // Route-based logic
    if (url.pathname === '/api/user') {
      if (request.method === 'GET') {
        const id = url.searchParams.get('id

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change