Cloudflare Deployment Skill

When to Activate

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

Quick Commands

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 Overview

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

Workers Setup

wrangler init my-worker --type javascript cd my-worker wrangler dev wrangler deploy

Basic Worker

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 });
},

};

KV Storage

Create namespace

wrangler kv namespace create MY_KV

Add to wrangler.toml

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

// 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);
},

};

R2 Storage

wrangler r2 bucket create my-bucket

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

// In Worker await env.MY_BUCKET.put("file.txt", "content"); const object = await env.MY_BUCKET.get("file.txt"); const text = await object.text();

D1 Database

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 = "..." }]

// In Worker const { results } = await env.DB.prepare("SELECT * FROM users WHERE id = ?").bind(1).all();

return Response.json(results);

Infra SDK Abstraction Layer

Grove uses portable infrastructure interfaces from @autumnsgrove/infra instead of raw Cloudflare APIs. This enables backend portability and consistent patterns across all services.

Raw Cloudflare Infra SDK Interface Import

env.DB (D1Database) GroveDatabase

@autumnsgrove/infra

env.STORAGE (R2Bucket) GroveStorage

@autumnsgrove/infra

env.CACHE_KV (KVNamespace) GroveKV

@autumnsgrove/infra

Service bindings (Fetcher) GroveServiceBus

@autumnsgrove/infra

Creating a Grove Context

Create a GroveContext via createCloudflareContext() in your Worker entry point:

import { createCloudflareContext } from "@autumnsgrove/infra/cloudflare";

const ctx = createCloudflareContext({ db: env.DB, storage: env.STORAGE, kv: env.CACHE_KV, });

// Use portable interfaces const files = await ctx.storage.list("prefix"); const cached = await ctx.kv.get("key");

Storage Management with Amber SDK

For file/storage management, use Amber SDK (@autumnsgrove/lattice/amber ) which provides FileManager , QuotaManager , ExportManager , and AddonManager on top of GroveStorage :

import { FileManager, QuotaManager } from "@autumnsgrove/lattice/amber";

const fileManager = new FileManager(ctx.storage); const quotaManager = new QuotaManager(ctx.storage);

// Type-safe file operations const metadata = await fileManager.upload("user-123/photo.jpg", stream); const quota = await quotaManager.getUsage("user-123");

Type-Safe Data Access

Use Rootwork utilities from @autumnsgrove/lattice/server for boundary type safety:

import { safeJsonParse, parseFormData } from "@autumnsgrove/lattice/server"; import { z } from "zod";

// Parse KV reads safely const cached = await ctx.kv.get("config"); const config = safeJsonParse(cached, ConfigSchema);

// Parse form data with validation const formData = await request.formData(); const data = parseFormData(formData, UploadSchema);

Pages Deployment

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

wrangler.toml Configuration

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" }]

Development Modes

Local (simulated resources)

wrangler dev

Remote (real Cloudflare resources)

wrangler dev --remote

Worker Secrets

Set secret

wrangler secret put API_KEY --name my-worker

Access in code

const apiKey = env.API_KEY;

Best Practices

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

Common Patterns

KV + R2 Caching

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);
},

};

Related Resources

See AgentUsage/cloudflare_guide.md for complete documentation including:

• MCP server configuration

• Advanced D1 patterns

• Production deployment strategies

• Troubleshooting guide