cloudflare-deployment

Activate this skill when:

• Setting up Cloudflare Workers or Pages
• Working with KV, R2, or D1 storage
• Deploying applications to Cloudflare
• Configuring wrangler.toml
• Managing Cloudflare resources

```bash

# Install wrangler

pnpm add -g wrangler

# Login

wrangler login

# Initialize new Worker

wrangler init my-worker

# Local development

wrangler dev

# Deploy to Cloudflare

wrangler deploy

# View logs

wrangler tail my-worker

```

| Service | Purpose | Use Case |

|---------|---------|----------|

| Workers | Serverless functions | API endpoints, middleware |

| Pages | Static sites + functions | SvelteKit, Next.js |

| KV | Key-value storage | Caching, session data |

| R2 | Object storage | Files, images, backups |

| D1 | SQLite database | Structured data |

```bash

wrangler init my-worker --type javascript

cd my-worker

wrangler dev

wrangler deploy

```

Basic Worker

```javascript

export default {

async fetch(request, env) {

const url = new URL(request.url);

if (url.pathname === '/api/hello') {

return new Response(JSON.stringify({ message: 'Hello!' }), {

headers: { 'Content-Type': 'application/json' }

});

}

return new Response('Not found', { status: 404 });

}

}

```

```bash

# Create namespace

wrangler kv namespace create MY_KV

# Add to wrangler.toml

# kv_namespaces = [{ binding = "MY_KV", id = "abc123" }]

```

```javascript

// In Worker

export default {

async fetch(request, env) {

// Write

await env.MY_KV.put("key", "value");

// Read

const value = await env.MY_KV.get("key");

return new Response(value);

}

}

```

```bash

wrangler r2 bucket create my-bucket

# Add: r2_buckets = [{ binding = "MY_BUCKET", bucket_name = "my-bucket" }]

```

```javascript

// In Worker

await env.MY_BUCKET.put("file.txt", "content");

const object = await env.MY_BUCKET.get("file.txt");

const text = await object.text();

```

```bash

wrangler d1 create my-database

wrangler d1 execute my-database --command="CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)"

# Add: d1_databases = [{ binding = "DB", database_name = "my-database", database_id = "..." }]

```

```javascript

// In Worker

const { results } = await env.DB.prepare(

"SELECT * FROM users WHERE id = ?"

).bind(1).all();

return Response.json(results);

```

```bash

# Deploy static site

wrangler pages deploy ./build --project-name=my-site

# With SvelteKit

pnpm add -D @sveltejs/adapter-cloudflare

pnpm build

wrangler pages deploy .svelte-kit/cloudflare

```

```toml

name = "my-worker"

main = "src/index.js"

compatibility_date = "2024-01-01"

# Automatic resource provisioning (v4.45.0+)

kv_namespaces = [{ binding = "MY_KV" }]

r2_buckets = [{ binding = "MY_BUCKET" }]

d1_databases = [{ binding = "DB" }]

```

```bash

# Local (simulated resources)

wrangler dev

# Remote (real Cloudflare resources)

wrangler dev --remote

```

```bash

# Set secret

wrangler secret put API_KEY --name my-worker

# Access in code

const apiKey = env.API_KEY;

```

DO ✅

• Use wrangler dev for local testing first
• Use environment-specific configs
• Monitor logs with wrangler tail
• Use automatic resource provisioning

DON'T ❌

• Hardcode account IDs
• Skip local testing
• Commit wrangler.toml with production IDs
• Ignore rate limits

KV + R2 Caching

```javascript

export default {

async fetch(request, env) {

const url = new URL(request.url);

const cacheKey = url.pathname;

// Check KV cache

let content = await env.MY_KV.get(cacheKey);

if (content) return new Response(content);

// Fetch from R2

const object = await env.MY_BUCKET.get(cacheKey.slice(1));

if (!object) return new Response("Not found", { status: 404 });

content = await object.text();

// Cache in KV

await env.MY_KV.put(cacheKey, content, { expirationTtl: 3600 });

return new Response(content);

}

}

```

See AgentUsage/cloudflare_guide.md for complete documentation including:

• MCP server configuration
• Advanced D1 patterns
• Production deployment strategies
• Troubleshooting guide