Menu
Deploy to Cloudflare edge platform. Use when deploying static sites to Pages, serverless functions to Workers, or configuring CDN/DNS. Covers Wrangler CLI.
Based on SOC occupation classification
Biome 2.x linting and formatting patterns. Use when configuring code quality tools, setting up linting rules, formatting code, or integrating with CI/CD. Covers migration from ESLint/Prettier.
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Radix UI primitive patterns. Use when building accessible, unstyled UI components like dialogs, dropdowns, tooltips, tabs, and selects. Covers Tailwind styling, keyboard navigation, animations, and portal management.
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
| name | deploy-cloudflare |
| description | Deploy to Cloudflare edge platform. Use when deploying static sites to Pages, serverless functions to Workers, or configuring CDN/DNS. Covers Wrangler CLI. |
# Install Wrangler
npm install -g wrangler
# Login
wrangler login
# Deploy Pages
wrangler pages deploy ./dist
# Deploy Worker
wrangler deploy
# One-time deploy
wrangler pages deploy ./dist --project-name=my-app
# Connect Git repo (auto-deploy)
wrangler pages project create my-app --production-branch=main
# wrangler.toml (Pages Functions)
name = "my-app"
compatibility_date = "2025-01-01"
[build]
command = "npm run build"
# wrangler.toml
name = "my-worker"
main = "src/index.ts"
compatibility_date = "2025-01-01"
[vars]
ENVIRONMENT = "production"
[[kv_namespaces]]
binding = "MY_KV"
id = "abc123"
export default {
async fetch(request, env, ctx) {
return new Response('Hello from the edge!', {
headers: { 'Content-Type': 'text/plain' }
});
}
};
# Set secret (encrypted)
wrangler secret put API_KEY
# Set variable (plain text)
wrangler pages secret put API_URL
# Bulk upload
echo "SECRET_KEY" | wrangler secret put SECRET_KEY
# List DNS records
wrangler dns list example.com
# Add A record
wrangler dns create example.com --type A --name www --content 1.2.3.4
# Update record
wrangler dns update example.com --type A --name www --content 5.6.7.8
wrangler init my-project
cd my-project
wrangler dev
# Production
wrangler deploy
# Preview
wrangler deploy --env staging
# View logs (tail)
wrangler tail
# List deployments
wrangler deployments list
# Rollback
wrangler rollback --message "Revert breaking change"
# KV operations
wrangler kv:key put --binding=MY_KV "key" "value"
wrangler kv:key get --binding=MY_KV "key"
wrangler secret)wrangler dev)