What Is This?

A comprehensive website development template designed for building modern web applications that deploy to Cloudflare's global edge network.

🚀

Deploy Globally in Minutes

Push to GitHub and deploy automatically to 300+ cities worldwide. Zero server configuration required.

🤖

AI-Powered Development

Built-in slash commands for Claude Code accelerate feature development with intelligent assistance.

⚡

Zero-Latency Edge Computing

Run your backend at the edge with <5ms database queries and instant API responses.

Who Is This For?

✅ Perfect For

  • Portfolio & personal sites - free global hosting, looks professional, room to add features later
  • Side projects & MVPs - ship in hours, not days. Database and auth patterns included
  • Learning Cloudflare Workers - well-documented, beginner-friendly, with working examples
  • Keeping costs at zero - generous free tiers: 100K requests/day, 5GB database, unlimited deploys
  • AI-powered apps - Claude API and Workers AI examples ready to copy

⚠️ Consider Alternatives For

  • SEO-focused content sites - use React Router v7 or TanStack Start for faster indexing, working social media previews, and better performance scores
  • Persistent Node.js server - try Railway, Render, or a VPS (Workers are stateless edge functions)
  • WordPress/CMS content - use Cloudflare Pages with a headless CMS

💡 Simple static sites work great here! You get free global CDN, instant deploys, and room to add APIs/databases when you need them.

🔧 Technical: How this compares to React Router v7

This template uses client-side rendering - your React app runs entirely in the browser. React Router v7 and TanStack Start use server-side rendering - the server generates HTML before sending it to the browser.

This Template React Router v7 / TanStack Start
Browser renders the UI Server renders the UI
Simpler architecture, fewer concepts More features, more framework conventions
You choose your routing library Routing built into the framework
You control data fetching Framework controls data loading

Choose this template if: You're building dashboards, admin panels, internal tools, or apps behind a login.

Choose React Router v7 if: SEO is a priority - you'll get faster indexing, working social media previews, and better Core Web Vitals scores.

💰 Free Tier Highlights

Everything in this template runs on Cloudflare's generous free tier. No credit card required.

Resource Free Allowance That's Enough For
Requests 100,000/day ~3 million/month
D1 Database 5GB storage, 5M reads/day Most small-to-medium apps
KV Storage 1GB storage, 100K reads/day Sessions, caching, config
R2 Storage 10GB/month, zero egress fees User uploads, file storage
Deploys Unlimited Push as often as you want
Custom domains Unlimited Your brand, free SSL

No credit card required to start.

Real-World Use Cases

Here's how developers are using this template to build production applications

🌐

Personal Portfolio Website

Build a blazing-fast portfolio with a contact form, blog, and project showcase. Deploy globally in minutes with automatic CI/CD.

D1 Database Contact Forms Edge Performance
🤖

AI-Powered SaaS App

Create an AI assistant, content generator, or analysis tool with Claude API integration and serverless database storage.

Claude API Streaming AI Gateway
📊

Analytics Dashboard

Build real-time dashboards with live data processing at the edge. Perfect for monitoring, metrics, and business intelligence.

Real-time APIs KV Storage Fast Queries
📱

API Backend Service

Build RESTful APIs for mobile apps or third-party integrations with zero-latency database queries and instant deployment.

REST API Authentication Edge Compute

Traditional Workflow vs This Template

See how much faster you can go from idea to production

❌ Traditional Workflow

1

Set Up Infrastructure

Configure servers, databases, load balancers, SSL certificates, DNS settings...

⏱️ 2-3 days
2

Configure Build Pipeline

Set up CI/CD, deployment scripts, environment variables, staging environments...

⏱️ 1-2 days
3

Integrate Services

Connect database, set up authentication, configure email, add monitoring...

⏱️ 2-3 days
4

Start Building Features

Finally ready to write application code!

⏱️ After 5-8 days
Total Setup Time: 5-8 days

✅ With This Template

1

Click "Use Template"

Create your repository from this template on GitHub

⏱️ 30 seconds
2

Run /start

One command handles everything - config, credentials, and deployment

⏱️ 5 minutes
3

Push to Deploy

Automatic deployment to 300+ cities worldwide!

⏱️ 2 minutes
4

Start Building Features

Use slash commands to add databases, AI, and more

⏱️ Immediately!
Total Setup Time: 5 minutes
🚀

Save 5-8 days of setup work

Focus on building features, not configuring infrastructure

Key Features

⚛️

React 19 + TypeScript + Vite

Modern frontend stack with ultra-fast development and type-safe code.

☁️

Cloudflare Workers

Serverless edge compute with zero cold starts and instant global deployment.

🧠

AI Integration Ready

Built-in support for Claude API, Workers AI, and AI Gateway with working examples.

💾

Serverless Database

Native Cloudflare D1 (SQL) and KV (key-value) storage with zero configuration.

🎯

Claude Code Slash Commands

Interactive wizards for rapid development: /start for complete setup, /generate-prp for feature planning, and more.

🔄

Automated CI/CD

GitHub Actions pipeline deploys automatically on every push to main branch.

📚

Cloudflare Docs MCP Server

Claude Code has direct access to official Cloudflare documentation - just ask about Workers, D1, KV, R2, or any product.

Opinionated VS Code Defaults

Sensible configuration out-of-the-box, optimised for Claude Code development. Just open the project and start coding.

📦 Recommended Extensions

  • ESLint + Prettier - Code linting and formatting
  • Vitest - Visual test explorer
  • Error Lens - Inline error display
  • Auto Rename Tag - JSX tag renaming
  • Path + npm Intellisense - Smart autocomplete
  • DotENV - Syntax highlighting for secrets

⚙️ Workspace Settings

  • Format on save - Automatic Prettier formatting
  • Terminal on right - More vertical space for code
  • Activity bar at top - Compact, modern layout
  • Minimap enabled - Code overview on the right
  • Smart search excludes - No node_modules noise
  • JSONC for wrangler.json - Comments allowed

These defaults work great with Claude Code's terminal-focused workflow. Override any setting in your user preferences.

Get Started in 3 Steps

🤖 Direct Claude Code (Easiest)

1

Use Template

Click "Use this Template" on GitHub to create your own copy.

2

Open Claude Code

Use claude.ai (web) or Claude Desktop (app) → Connect your GitHub repo.

3

Run /start

Type /start and answer a few questions. Your site goes live!

or

💻 VS Code with Claude Code

1

Use Template

Click "Use this Template" on GitHub to create your own copy.

2

Clone & Open

Clone your repo in VS Code, open terminal, run claude "/start".

git clone your-repo
cd your-repo
claude "/start"
3

Run /start

Type /start and answer a few questions. Your site goes live!

Either way, /start handles everything - credentials, deployment, and more!

Working Examples Included

Copy-paste production-ready code directly into your project. All examples include frontend components, API endpoints, and full documentation.

🤖 AI Integration

  • Simple Claude Chat - Basic chat interface with Claude API
  • Streaming Chat - Real-time responses with Server-Sent Events
  • Workers AI Chat - Edge AI with Llama/Mistral models
  • AI Gateway Integration - Production caching & cost optimisation

💾 Database & Storage

  • D1 Contact Form - Complete CRUD with SQL database
  • KV Sessions - Secure session management with key-value storage
Browse All Examples →

Optimised for Claude Code

This template includes interactive slash commands that accelerate your development workflow with AI assistance.

🚀 Start Here
⚡

/start - Complete Project Setup

One command. Zero confusion. Production-ready in minutes.

After creating your repo, run /start and it handles everything:

🎯
Choose Your Path

Quick Setup (5 min) for beginners, or Guided Setup for full control

💬
Plain English Questions

"What are you building?" - portfolio, app with forms, user accounts, etc.

🆓
Account Setup Help

No Cloudflare account? We'll walk you through creating one (free)

🚀
Deploy & Go

Your website goes live, then start building features

1 Fork template
→
2 Run /start
→
3 Plan features
→
✅ Ship to production!
📚 Built-in Documentation
☁️

Cloudflare Documentation MCP Server

Ask Claude Code about any Cloudflare product - it has direct access to official docs.

This template includes the official Cloudflare Documentation MCP Server pre-configured. Just ask Claude Code questions like:

  • "How do I set up a D1 database?"
  • "What are Workers KV limits?"
  • "Show me R2 bucket examples"
  • "How does Durable Objects pricing work?"

Claude Code will search the official Cloudflare documentation and give you accurate, up-to-date answers.

All Available Commands

/start

Complete project setup - configuration, credentials, domain, and first deployment in one command

🚀 Run First
/generate-prp

Create comprehensive Product Requirement Plan for features

⭐ Recommended
/execute-prp

Implement features from generated PRPs automatically

⭐ Recommended
/add-ai-feature

Add AI capabilities (Claude API, Workers AI, AI Gateway)

/setup-database

Set up D1 (SQL) or KV (key-value) storage with migrations

/add-binding

Add Cloudflare bindings (D1, KV, R2, Queues, Durable Objects, etc.)

/setup-sandbox

Set up Sandbox SDK for secure, isolated code execution (AI agents, REPLs)

Ready to Build at the Edge?

Start building production-ready web applications with React, Cloudflare Workers, and AI integration in minutes.

Use this Template