From release
Set up Cloudflare Workers deployment for web applications with GitHub Actions CI/CD. Use when adding Workers deployment to an existing project, setting up auto-deploy on push/PR, configuring Durable Objects for stateful apps, or creating a dual-deployment pattern (keep Replit/Vercel while adding Workers). Supports Hono framework, static assets, and nodejs_compat.
npx claudepluginhub fairchild/dotclaude --plugin skill-creatorThis skill uses the workspace's default tool permissions.
Deploy web applications to Cloudflare Workers with GitHub Actions automation.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Deploy web applications to Cloudflare Workers with GitHub Actions automation.
wrangler.jsonc at project rootworkers/ directory with Hono entry pointwrangler secret put{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "app-name",
"main": "workers/index.ts",
"compatibility_date": "2025-01-01",
"compatibility_flags": ["nodejs_compat"],
"assets": {
"directory": "./dist/public/",
"binding": "ASSETS",
"not_found_handling": "single-page-application" // SPA routing: serve index.html for unknown paths
},
"vars": { "ENVIRONMENT": "development" },
"env": {
"preview": {
"name": "app-name-preview",
"vars": { "ENVIRONMENT": "preview" }
},
"production": {
"name": "app-name",
"vars": { "ENVIRONMENT": "production" }
}
}
}
Do NOT hardcode account_id - use CLOUDFLARE_ACCOUNT_ID env var in CI.
import { Hono } from "hono";
import type { Env } from "./env";
const app = new Hono<{ Bindings: Env }>();
app.get("/healthz", (c) => c.json({ status: "ok", env: c.env.ENVIRONMENT }));
// API routes here
app.get("/api/example", (c) => c.json({ message: "Hello" }));
// Fall through to static assets
app.all("*", async (c) => c.env.ASSETS.fetch(c.req.raw));
export default app;
export interface Env {
ENVIRONMENT: string;
ASSETS: Fetcher;
// Add secrets and DO bindings here
}
Add scripts:
"dev:workers": "npm run build && wrangler dev",
"deploy:preview": "npm run build && wrangler deploy --env preview",
"deploy:production": "npm run build && wrangler deploy --env production"
Add devDependencies:
"@cloudflare/workers-types": "^4.20250620.0",
"wrangler": "^4.42.0"
Update tsconfig.json:
{
"include": ["...", "workers/**/*"],
"compilerOptions": { "types": ["...", "@cloudflare/workers-types"] }
}
See references/github-actions.md for workflow templates:
For stateful apps (sessions, scheduled tasks, real-time), see references/durable-objects.md.
Key pattern: Use DO alarms instead of setInterval.
npm installnpx wrangler loginnpm run deploy:production (initial deploy)npx wrangler secret put SECRET_NAME --env productionCLOUDFLARE_API_TOKEN, CLOUDFLARE_ACCOUNT_IDKeep existing backend while adding Workers:
project/
├── server/ # Express/existing backend
├── workers/ # Hono/Workers backend
└── shared/ # Common code both import
├── schema.ts
├── data/
└── handlers/