Scaffold and deploy Cloudflare Workers with Hono routing, Vite plugin, and Static Assets. Workflow: describe project, scaffold structure, configure bindings, deploy. Use when creating Workers projects, setting up Hono/Vite, configuring D1/R2/KV bindings, or troubleshooting export syntax errors, API route conflicts, HMR issues, or deployment failures.
Resources
3Install
npx skillscat add jezweb/claude-skills/cloudflare-worker-builder Install via the SkillsCat registry.
This skill scaffolds and deploys Cloudflare Workers projects using Hono routing, Vite plugin integration, and Static Assets support. It automates project setup, binding configuration for D1/R2/KV resources, and deployment workflows, solving common issues like export syntax errors and API route conflicts. Use it when creating new Workers projects, configuring Hono/Vite setups, or troubleshooting deployment failures.
Cloudflare Worker Builder
Scaffold a working Cloudflare Worker project from a brief description. Produces a deployable project with Hono routing, Vite dev server, and Static Assets.
Workflow
Step 1: Understand the Project
Ask about the project to choose the right bindings and structure:
- What does the app do? (API only, SPA + API, landing page)
- What data storage? (D1 database, R2 files, KV cache, none)
- Auth needed? (Clerk, better-auth, none)
- Custom domain or workers.dev subdomain?
A brief like "todo app with database" is enough to proceed.
Step 2: Scaffold the Project
npm create cloudflare@latest my-worker -- --type hello-world --ts --git --deploy false --framework none
cd my-worker
npm install hono
npm install -D @cloudflare/vite-plugin viteCopy and customise the asset files from this skill's assets/ directory:
wrangler.jsonc— Worker configurationvite.config.ts— Vite + Cloudflare pluginsrc/index.ts— Hono app with Static Assets fallbackpackage.json— Scripts and dependenciestsconfig.json— TypeScript configpublic/index.html— SPA entry point
Step 3: Configure Bindings
Add bindings to wrangler.jsonc based on project needs. Wrangler 4.45+ auto-provisions resources on first deploy — always specify explicit names:
{
"name": "my-worker",
"main": "src/index.ts",
"compatibility_date": "2025-11-11",
"assets": {
"directory": "./public/",
"binding": "ASSETS",
"not_found_handling": "single-page-application",
"run_worker_first": ["/api/*"]
},
// Add as needed:
"d1_databases": [{ "binding": "DB", "database_name": "my-app-db" }],
"r2_buckets": [{ "binding": "STORAGE", "bucket_name": "my-app-files" }],
"kv_namespaces": [{ "binding": "CACHE", "title": "my-app-cache" }]
}Step 4: Deploy
npm run dev # Local dev at http://localhost:8787
wrangler deploy # Production deployCritical Patterns
Export Syntax
// CORRECT — use this pattern
export default app
// WRONG — causes "Cannot read properties of undefined"
export default { fetch: app.fetch }Source: honojs/hono #3955
Static Assets + API Routes
Without run_worker_first, SPA fallback intercepts API routes and returns index.html instead of JSON:
"assets": {
"not_found_handling": "single-page-application",
"run_worker_first": ["/api/*"] // CRITICAL
}Source: workers-sdk #8879
Vite Config
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
export default defineConfig({ plugins: [cloudflare()] })Always set the main field in wrangler.jsonc — the Vite plugin needs it.
Scheduled/Cron Handlers
When adding cron triggers, switch to explicit export:
export default {
fetch: app.fetch,
scheduled: async (event, env, ctx) => { /* ... */ }
}Reference Files
Read these for detailed troubleshooting:
references/common-issues.md— 10 documented issues with sources and fixesreferences/architecture.md— Route priority, caching, Workers RPCreferences/deployment.md— CI/CD, auto-provisioning, gradual rollouts