DEV Community

2x lazymac
2x lazymac

Posted on

7 Cloudflare Workers Patterns Every API Developer Should Know

Cloudflare Workers is the best edge compute platform for side projects. Here are 7 patterns I use across 30+ production APIs.

1. Request Routing with URL Patterns

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const routes = {
      '/health': () => Response.json({ status: 'ok' }),
      '/v1/': () => handleV1(request, env),
      '/v2/': () => handleV2(request, env),
    };

    for (const [pattern, handler] of Object.entries(routes)) {
      if (url.pathname.startsWith(pattern)) return handler();
    }
    return Response.json({ error: 'Not found' }, { status: 404 });
  }
};
Enter fullscreen mode Exit fullscreen mode

2. API Key Auth with KV

async function authenticate(request, env) {
  const key = request.headers.get('X-API-Key');
  if (!key) return false;
  const valid = await env.API_KEYS.get(key);
  return valid !== null;
}
Enter fullscreen mode Exit fullscreen mode

3. Rate Limiting per IP

async function rateLimit(request, env) {
  const ip = request.headers.get('CF-Connecting-IP');
  const key = `rl:${ip}:${Math.floor(Date.now() / 60000)}`; // per minute
  const count = parseInt(await env.KV.get(key) || '0');
  if (count >= 60) return new Response('Rate limited', { status: 429 });
  await env.KV.put(key, String(count + 1), { expirationTtl: 120 });
}
Enter fullscreen mode Exit fullscreen mode

4. CORS Headers (One-Liner)

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, X-API-Key',
};
Enter fullscreen mode Exit fullscreen mode

5. Upstream API Proxy with Caching

const cache = caches.default;
const cached = await cache.match(request);
if (cached) return cached;

const upstream = await fetch('https://upstream-api.com/data');
const response = new Response(upstream.body, {
  headers: { ...upstream.headers, 'Cache-Control': 'max-age=300' }
});
await cache.put(request, response.clone());
return response;
Enter fullscreen mode Exit fullscreen mode

6. Structured Error Responses

function apiError(message, status = 400, code = 'BAD_REQUEST') {
  return Response.json({ error: { code, message } }, { status });
}
Enter fullscreen mode Exit fullscreen mode

7. Environment-Based Configuration

// wrangler.toml
// [vars]
// ENVIRONMENT = "production"
// API_VERSION = "v2"

const config = {
  debug: env.ENVIRONMENT !== 'production',
  version: env.API_VERSION || 'v1',
};
Enter fullscreen mode Exit fullscreen mode

All 30+ of my production APIs use some combination of these. Browse the live catalog | Gumroad store

Top comments (0)