name: cloudflare
description: "Deploy Cloudflare Workers, Pages, and edge functions."
triggers:
- Cloudflare
- worker
- deploy edge
- Pages
- edge function

Cloudflare Skill

Deploy and manage Cloudflare Workers, Pages, and edge infrastructure using the Wrangler CLI. This skill covers project creation, local development, deployment, environment configuration, and secrets management.

Requirements

• Wrangler CLI: Install globally with npm install -g wrangler (or use npx wrangler)
• Authentication: Run wrangler login to authenticate via browser, or set CLOUDFLARE_API_TOKEN environment variable
• Account ID: Found in Cloudflare dashboard under Workers & Pages > Overview

Detailed Process

1. Determine Deployment Type -- Workers for serverless API/logic, Pages for static sites or SSR frameworks.
2. Initialize Project -- Use wrangler init for Workers or framework-specific setup for Pages.
3. Configure wrangler.toml -- Set project name, compatibility date, bindings (KV, D1, R2), and environment variables.
4. Develop Locally -- Use wrangler dev for hot-reloading local development server.
5. Add Secrets -- Use wrangler secret put for sensitive values (API keys, tokens).
6. Deploy -- Use wrangler deploy for Workers or wrangler pages deploy for Pages.
7. Verify -- Confirm deployment at the assigned .workers.dev or .pages.dev URL.

Workers: Creation and Deployment

Initialize a New Worker

# Create new worker project
npx wrangler init my-worker --type javascript
cd my-worker

# Or with TypeScript
npx wrangler init my-worker --type typescript

Example Worker Code (fetch handler)

// src/index.js
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    if (url.pathname === "/api/health") {
      return new Response(JSON.stringify({ status: "ok" }), {
        headers: { "Content-Type": "application/json" }
      });
    }

    if (url.pathname === "/api/data") {
      const value = await env.MY_KV.get("key");
      return new Response(JSON.stringify({ value }), {
        headers: { "Content-Type": "application/json" }
      });
    }

    return new Response("Not Found", { status: 404 });
  }
};

wrangler.toml Configuration

name = "my-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

# KV Namespace binding
[[kv_namespaces]]
binding = "MY_KV"
id = "abc123def456"

# D1 Database binding
[[d1_databases]]
binding = "MY_DB"
database_name = "my-database"
database_id = "xyz789"

# R2 Bucket binding
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"

# Environment variables (non-secret)
[vars]
ENVIRONMENT = "production"

Deploy the Worker

# Local development with hot reload
npx wrangler dev

# Deploy to production
npx wrangler deploy

Pages: Static Site and SSR Deployment

Deploy a Static Site

# Build your site first (e.g., Next.js, Astro, plain HTML)
npm run build

# Deploy the output directory
npx wrangler pages deploy ./dist --project-name my-site

Example Pages Project Structure

my-site/
  dist/                  # Build output (deployed to Pages)
    index.html
    assets/
      style.css
      app.js
  functions/             # Pages Functions (server-side)
    api/
      health.js          # -> /api/health endpoint
      data.js            # -> /api/data endpoint
  wrangler.toml          # Optional: for bindings configuration
  package.json

Pages Functions (Server-Side Routes)

// functions/api/health.js
export async function onRequestGet(context) {
  return new Response(JSON.stringify({ status: "ok" }), {
    headers: { "Content-Type": "application/json" }
  });
}

Environment Configuration and Secrets

Secrets Management

# Add a secret (prompts for value interactively, or pipe it)
echo "my-secret-value" | npx wrangler secret put API_KEY

# List secrets
npx wrangler secret list

# Delete a secret
npx wrangler secret delete API_KEY

Multiple Environments

# wrangler.toml - environment overrides
name = "my-worker"
main = "src/index.js"

[env.staging]
name = "my-worker-staging"
vars = { ENVIRONMENT = "staging" }

[env.production]
name = "my-worker-production"
vars = { ENVIRONMENT = "production" }

# Deploy to specific environment
npx wrangler deploy --env staging
npx wrangler deploy --env production

Cloudflare Services Reference

When to Use

• User asks to "deploy a worker", "set up edge functions", "deploy to Cloudflare"
• Serverless API endpoints needed with global low-latency distribution
• Static site deployment with optional server-side functions
• Edge-based data processing, caching, or request routing
• Projects needing KV storage, D1 databases, or R2 object storage at the edge