cloudflare-workers
Cloudflare Workers
Overview
Cloudflare Workers is a serverless execution environment that runs JavaScript, TypeScript, Python, and Rust code on Cloudflare's global network. Workers execute in milliseconds, scale automatically, and integrate with Cloudflare's storage and compute products through bindings.
Key Benefits:
- Zero cold starts - Workers run in V8 isolates, not containers
- Global deployment - Code runs in 300+ cities worldwide
- Rich ecosystem - Bindings to D1, KV, R2, Durable Objects, Queues, Containers, Workflows, and more
- Full-stack capable - Build APIs and serve static assets in one project
- Standards-based - Uses Web APIs (fetch, crypto, streams, WebSockets)
When to Use This Skill
Use Cloudflare Workers for:
- APIs and backends - RESTful APIs, GraphQL, tRPC, WebSocket servers
- Full-stack applications - React, Next.js, Remix, Astro, Vue, Svelte with static assets
- Edge middleware - Authentication, rate limiting, A/B testing, routing
- Background processing - Scheduled jobs (cron), queue consumers, webhooks
- Data transformation - ETL pipelines, real-time data processing
- AI applications - RAG systems, chatbots, image generation with Workers AI
- Durable workflows - Multi-step long-running tasks with automatic retries (Workflows)
- Container workloads - Run Docker containers alongside Workers (Containers)
- MCP servers - Host remote Model Context Protocol servers
- Proxy and gateway - API gateways, content transformation, protocol translation
Quick Start Workflow
1. Install Wrangler CLI
npm install -g wrangler
# Login to Cloudflare
wrangler login
2. Create a New Worker
# Using C3 (create-cloudflare) - recommended
npm create cloudflare@latest my-worker
# Or create manually
wrangler init my-worker
cd my-worker
3. Write Your Worker
Basic HTTP API (TypeScript):
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const url = new URL(request.url);
if (url.pathname === "/api/hello") {
return Response.json({ message: "Hello from Workers!" });
}
return new Response("Not found", { status: 404 });
},
};
With environment variables and KV:
interface Env {
MY_VAR: string;
MY_KV: KVNamespace;
}
export default {
async fetch(request: Request, env: Env): Promise<Response> {
// Access environment variable
const greeting = env.MY_VAR;
// Read from KV
const value = await env.MY_KV.get("my-key");
return Response.json({ greeting, value });
},
};
4. Develop Locally
# Start local development server with hot reload
wrangler dev
# Access at http://localhost:8787
5. Deploy to Production
# Deploy to workers.dev subdomain
wrangler deploy
# Deploy to custom domain (configure in wrangler.toml)
wrangler deploy
Core Concepts
Workers Runtime
Workers use the V8 JavaScript engine with Web Standard APIs:
- Execution model: Isolates (not containers) - instant cold starts
- CPU time limit: 10ms (Free), 30s (Paid) per request
- Memory limit: 128 MB per isolate
- Languages: JavaScript, TypeScript, Python, Rust
- APIs: fetch, crypto, streams, WebSockets, WebAssembly
Supported APIs:
- Fetch API (HTTP requests)
- URL API (URL parsing)
- Web Crypto (encryption, hashing)
- Streams API (data streaming)
- WebSockets (real-time communication)
- Cache API (edge caching)
- HTML Rewriter (HTML transformation)
Handlers
Workers respond to events through handlers:
Fetch Handler (HTTP requests):
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext) {
return new Response("Hello!");
},
};
Scheduled Handler (cron jobs):
export default {
async scheduled(event: ScheduledEvent, env: Env, ctx: ExecutionContext) {
// Runs on schedule defined in wrangler.toml
await env.MY_KV.put("last-run", new Date().toISOString());
},
};
Queue Handler (message processing):
export default {
async queue(batch: MessageBatch<any>, env: Env, ctx: ExecutionContext) {
for (const message of batch.messages) {
await processMessage(message.body);
message.ack();
}
},
};
Bindings
Bindings connect your Worker to Cloudflare resources. Configure in wrangler.toml:
KV (Key-Value Storage):
[[kv_namespaces]]
binding = "MY_KV"
id = "your-kv-namespace-id"
// Usage
await env.MY_KV.put("key", "value");
const value = await env.MY_KV.get("key");
D1 (SQL Database):
[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-database-id"
// Usage
const result = await env.DB.prepare(
"SELECT * FROM users WHERE id = ?"
).bind(userId).all();
R2 (Object Storage):
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"
// Usage
await env.MY_BUCKET.put("file.txt", "contents");
const object = await env.MY_BUCKET.get("file.txt");
const text = await object?.text();
Environment Variables:
[vars]
API_KEY = "development-key" # pragma: allowlist secret
Secrets (sensitive data):
# Set via CLI (not in wrangler.toml)
wrangler secret put API_KEY
Context (ctx)
The ctx parameter provides control over request lifecycle:
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext) {
// Run tasks after response is sent
ctx.waitUntil(
env.MY_KV.put("request-count", String(Date.now()))
);
// Pass through to origin on exception
ctx.passThroughOnException();
return new Response("OK");
},
};
Top-level Environment Access
Since March 2025, you can import env at the module level instead of passing it through handlers:
import { env } from "cloudflare:workers";
// Access bindings outside of handlers
const apiClient = new ApiClient({ apiKey: env.API_KEY });
export default {
async fetch(request: Request): Promise<Response> {
// env is also available here without the parameter
const data = await env.MY_KV.get("config");
return Response.json({ data });
},
};
This eliminates prop-drilling env through function signatures and enables module-level initialization.
Rapid Development Patterns
Wrangler Configuration
Essential wrangler.toml:
name = "my-worker"
main = "src/index.ts"
compatibility_date = "2025-09-01"
# Custom domain
routes = [
{ pattern = "api.example.com/*", zone_name = "example.com" }
]
# Or workers.dev subdomain
workers_dev = true
# Environment variables
[vars]
ENVIRONMENT = "production"
# Bindings
[[kv_namespaces]]
binding = "CACHE"
id = "your-kv-id"
[[d1_databases]]
binding = "DB"
database_name = "production-db"
database_id = "your-db-id"
[[r2_buckets]]
binding = "ASSETS"
bucket_name = "my-assets"
# Cron triggers
[triggers]
crons = ["0 0 * * *"] # Daily at midnight
Environment Management
Use environments for staging/production:
[env.staging]
vars = { ENVIRONMENT = "staging" }
[env.staging.d1_databases]
binding = "DB"
database_name = "staging-db"
database_id = "staging-db-id"
[env.production]
vars = { ENVIRONMENT = "production" }
[env.production.d1_databases]
binding = "DB"
database_name = "production-db"
database_id = "production-db-id"
# Deploy to staging
wrangler deploy --env staging
# Deploy to production
wrangler deploy --env production
Common Patterns
JSON API with Error Handling:
export default {
async fetch(request: Request, env: Env): Promise<Response> {
try {
const url = new URL(request.url);
if (url.pathname === "/api/users" && request.method === "GET") {
const users = await env.DB.prepare("SELECT * FROM users").all();
return Response.json(users.results);
}
if (url.pathname === "/api/users" && request.method === "POST") {
const body = await request.json();
await env.DB.prepare(
"INSERT INTO users (name, email) VALUES (?, ?)"
).bind(body.name, body.email).run();
return Response.json({ success: true }, { status: 201 });
}
return Response.json({ error: "Not found" }, { status: 404 });
} catch (error) {
return Response.json(
{ error: error.message },
{ status: 500 }
);
}
},
};
Authentication Middleware:
async function authenticate(request: Request, env: Env): Promise<string | null> {
const authHeader = request.headers.get("Authorization");
if (!authHeader?.startsWith("Bearer ")) {
return null;
}
const token = authHeader.substring(7);
const userId = await env.SESSIONS.get(token);
return userId;
}
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const userId = await authenticate(request, env);
if (!userId) {
return Response.json({ error: "Unauthorized" }, { status: 401 });
}
// Proceed with authenticated request
return Response.json({ userId });
},
};
CORS Headers:
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
};
export default {
async fetch(request: Request): Promise<Response> {
if (request.method === "OPTIONS") {
return new Response(null, { headers: corsHeaders });
}
const response = await handleRequest(request);
// Add CORS headers to response
Object.entries(corsHeaders).forEach(([key, value]) => {
response.headers.set(key, value);
});
return response;
},
};
Static Assets (Full-Stack Apps)
Serve static files alongside your Worker code:
[assets]
directory = "./public"
binding = "ASSETS"
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const url = new URL(request.url);
// API routes
if (url.pathname.startsWith("/api/")) {
return handleAPI(request, env);
}
// Serve static assets via the ASSETS binding
return env.ASSETS.fetch(request);
},
};
Testing
Using Vitest:
import { env, createExecutionContext } from "cloudflare:test";
import { describe, it, expect } from "vitest";
import worker from "./index";
describe("Worker", () => {
it("responds with JSON", async () => {
const request = new Request("http://example.com/api/hello");
const ctx = createExecutionContext();
const response = await worker.fetch(request, env, ctx);
expect(response.status).toBe(200);
expect(await response.json()).toEqual({ message: "Hello!" });
});
});
Framework Integration
Workers supports major frameworks with adapters:
- Next.js - Full App Router and Pages Router support
- Remix / React Router - Native Cloudflare adapter
- Astro - Server-side rendering on Workers
- SvelteKit - Cloudflare adapter available
- Hono - Lightweight web framework built for Workers
- tRPC - Type-safe APIs with full Workers support
Example with Hono:
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => c.text("Hello!"));
app.get("/api/users/:id", async (c) => {
const id = c.req.param("id");
const user = await c.env.DB.prepare(
"SELECT * FROM users WHERE id = ?"
).bind(id).first();
return c.json(user);
});
export default app;
Advanced Topics
For detailed information on advanced features, see the reference files:
- Complete Bindings Guide:
references/bindings-complete-guide.md- All binding types (D1, KV, R2, Durable Objects, Queues, Workers AI, Vectorize, Workflows, Containers, Secrets Store, Pipelines, AutoRAG) - Deployment & CI/CD:
references/wrangler-and-deployment.md- Wrangler v4 migration, commands, GitHub Actions, GitLab CI/CD, gradual rollouts, remote bindings - Development Best Practices:
references/development-patterns.md- Testing, debugging, error handling, performance, top-level env access patterns - Advanced Features:
references/advanced-features.md- Containers, Workflows, MCP servers, Workers for Platforms, WebSockets, Node.js compat, streaming - Observability:
references/observability.md- Logging (tail, Logpush, Workers Logs), metrics, traces, debugging
Resources
Official Documentation:
-
Wrangler CLI: https://developers.cloudflare.com/workers/wrangler/
-
Runtime APIs: https://developers.cloudflare.com/workers/runtime-apis/
-
Examples: https://developers.cloudflare.com/workers/examples/
-
Workflows: https://developers.cloudflare.com/workflows/
-
Containers: https://developers.cloudflare.com/containers/
Templates & Quick Starts:
- Templates: https://developers.cloudflare.com/workers/get-started/quickstarts/
- Framework guides: https://developers.cloudflare.com/workers/framework-guides/
Community:
- Discord: https://discord.cloudflare.com
- GitHub: https://github.com/cloudflare/workers-sdk
More from tenequm/skills
swift-macos
Comprehensive macOS app development with Swift 6.2, SwiftUI, SwiftData, Swift Concurrency, Foundation Models, Swift Testing, ScreenCaptureKit, and app distribution. Use when building native Mac apps, implementing windows/scenes/navigation/menus/toolbars, SwiftData models and queries, modern concurrency, on-device AI, testing, screen/audio capture, menu bar apps, AppKit bridges, login items, process monitoring, or App Store and Developer ID distribution. Triggers on macOS app, SwiftUI macOS, SwiftData, Swift concurrency, Foundation Models, Swift Testing, ScreenCaptureKit, screen capture, screen recording, AVFoundation, MenuBarExtra, NSViewRepresentable, notarize, login item, and process monitoring.
56react-typescript
Build React 19 applications with TypeScript. Covers Actions, Activity, use() hook, React Compiler, ref-as-prop, useEffectEvent, and strict TypeScript patterns. Use when creating components, managing state, typing props, handling events, using hooks, or working with React 19 features. Triggers on react, typescript, tsx, component types, hook types, react 19, react compiler, actions, use hook, useEffectEvent, activity, import defer.
46shadcn-tailwind
Build UIs with Tailwind CSS v4 and shadcn/ui. Covers CSS variables with OKLCH colors, component variants with CVA, responsive design, dark mode, and Tailwind v4.2 features. Supports Radix UI and Base UI primitives, CLI 3.0, and visual styles. Use when building interfaces with Tailwind, styling shadcn/ui components, implementing themes, or working with utility-first CSS. Triggers on tailwind, shadcn, utility classes, CSS variables, OKLCH, component styling, theming, dark mode, radix ui.
39python-dev
Opinionated Python development setup with uv + ty + ruff + pytest + just. Use when creating new Python projects, setting up pyproject.toml, configuring linting, type checking, testing, or build tooling. Triggers on "python project", "uv init", "pyproject.toml", "ruff config", "ty check", "pytest setup", "justfile", "python linting", "python formatting", "type checking python".
39privy-integration
Integrates Privy authentication, embedded wallets, and agent payment protocols into web and agentic apps. Covers React SDK (PrivyProvider, hooks, wagmi), Node.js SDK, smart wallets (ERC-4337), x402 and MPP machine payments, Tempo chain, and agentic wallets with policies. Use when setting up Privy auth, creating embedded or agentic wallets, adding x402 or MPP payments, integrating with Tempo, configuring wallet policies, or connecting Privy to MCP/Agent Auth flows.
36biome
Lint and format frontend code with Biome 2.4. Covers type-aware linting, GritQL custom rules, domains, import organizer, and migration from ESLint/Prettier. Use when configuring linting rules, formatting code, writing custom lint rules, or setting up CI checks. Triggers on biome, biome config, biome lint, biome format, biome check, biome ci, gritql, migrate from eslint, migrate from prettier, import sorting, code formatting, lint rules, type-aware linting, noFloatingPromises.
34