I’ve been building a lot of applications on Cloudflare Workers lately, and the developer experience is phenomenal when you get the stack right. Today I’m open-sourcing claude-start-cf — a production-ready template that pairs TanStack Start (React SSR) with Cloudflare’s edge infrastructure.

This isn’t a minimal starter. It’s a fully-configured, battle-tested template with working demos for every major pattern you’ll need: server functions, D1 databases, R2 storage, environment variables, markdown processing, SEO optimization, and LLM-friendly pages.

Why This Stack?

TanStack Start is React’s best SSR framework right now. It has:

• File-based routing (like Next.js)
• Server functions that compile to RPC (write once, works on client & server)
• Built-in streaming, code splitting, and hydration
• First-class TypeScript support
• No Node.js lock-in

Cloudflare Workers is where I want to run everything:

• Global edge deployment (200+ regions)
• Instant cold start
• No containers, no servers to manage
• Pay-per-request pricing
• Access to D1 (serverless SQLite), R2 (S3-compatible storage), KV, and more

Combined, you get a development experience where:

1. You write React components with server functions
2. TypeScript types flow end-to-end
3. You deploy once and it runs globally
4. Your database and storage are colocated with your code

No local dev server. No build complexity. Deploy early, deploy often.

What’s Included

The template comes with live demo pages for every major pattern:

• Execution Model — Understanding SSR, client rendering, server functions, and hydration
• Environment Variables — Client vars, server-only secrets, wrangler secrets, .dev.vars
• Server Functions — RPC pattern, input validation, error handling, when to use them
• API Routes — Traditional GET/POST handlers, dynamic params, splat routes
• D1 Database — CRUD operations, parameterized queries, migrations, schema introspection
• R2 Storage — File uploads, image gallery, object listing, metadata
• Markdown — Static (build-time) and dynamic rendering, TOC extraction
• SEO — Meta tags, Open Graph, JSON-LD structured data, sitemaps
• LLMO — LLM optimization, llms.txt, schema.org, AI discoverability
• Deploy — Full deployment workflow with Wrangler

Each demo page includes working code examples you can copy and adapt.

Quick Start

# Clone the template
npx degit morrisonak/claude-start-cf my-app
cd my-app

# Install
npm install

# Create Cloudflare resources (free tier works)
wrangler d1 create my-db
wrangler r2 bucket create my-bucket

# Update wrangler.jsonc with your database_id and bucket name

# Deploy
npm run deploy

That’s it. Your app is live on the edge.

Key Patterns

Server Functions (RPC)

Write a function once, works everywhere:

import { createServerFn } from '@tanstack/react-start'
import { getDB } from '~/lib/env'

const listPosts = createServerFn({ method: 'GET' })
  .handler(async () => {
    const db = getDB()
    const { results } = await db
      .prepare('SELECT * FROM posts ORDER BY created_at DESC')
      .all()
    return results
  })

// Call from React components:
const { data: posts } = useQuery(() => listPosts())

On the client, this becomes a fetch() request. During SSR, it calls the handler directly — no network hop. Types flow end-to-end.

D1 Database

Serverless SQLite at the edge. Access it from any server function:

const db = getDB()
await db
  .prepare('INSERT INTO posts (title, body) VALUES (?, ?)')
  .bind(title, body)
  .run()

Migrations, schema introspection, full SQL support. Your database runs in the same Cloudflare region as your code.

R2 Object Storage

S3-compatible storage with zero egress fees:

const bucket = getBucket()
await bucket.put('uploads/photo.png', bytes, {
  httpMetadata: { contentType: 'image/png' },
})
const obj = await bucket.get('uploads/photo.png')

Perfect for user uploads, images, backups, or any file storage.

Environment Variables

Three layers, clearly separated:

Markdown + Content Collections

Build-time markdown processing with YAML frontmatter:

---
title: My Post
published: 2026-02-19
author: Justin
---

# This is my post content
...

Renders to static HTML at build time. Useful for blogs, docs, changelogs.

Real-World Example

I built MetaV Advisors (consulting + SaaS) on this exact template. It handles:

• Marketing pages (static HTML)
• Authentication (Better Auth)
• Database (D1 for clients, pricing, bookings)
• File uploads (R2 for case studies, contracts)
• Email (sending via server functions)
• Analytics (custom tracking)

Everything deployed to the edge. No Node.js server. No ops.

Deployment

npm run deploy  # Build + deploy to Cloudflare Workers

That’s the workflow. Build once, deploy once, runs globally. No environment variables to juggle between prod/staging. No container orchestration. Just Wrangler.

Tech Stack

When to Use This

Perfect for:

• Full-stack apps (marketing + SaaS)
• Real-time content (blogs, docs, APIs)
• High-traffic sites (edge deployment)
• Global teams (instant deploy, no coordination)
• Startups (low ops overhead, predictable costs)
• AI applications (fast LLM endpoints, optimized for Claude)

Not for:

• Apps requiring Node.js-specific libraries
• Streaming large files (use a CDN instead)
• WebSockets (use Durable Objects separately)

Getting Started

1. Clone: npx degit morrisonak/claude-start-cf my-app
2. Explore the demo pages to understand the patterns
3. Read CLAUDE.md for workflow notes
4. Deploy: npm run deploy
5. Start building

The template is opinionated about edge deployment, but flexible about your app. Use it for a blog, a SaaS product, an API, or anything in between.

Live demo: https://claude-start-cf.jmorrison.workers.dev
Repository: https://github.com/morrisonak/claude-start-cf

Go build something on the edge.