Create Cloudflare (C3) - Cloudflare Workers SDK

Create Cloudflare (C3) is an interactive CLI tool for quickly scaffolding new applications on Cloudflare’s developer platform. It provides templates for Workers, Pages, and popular web frameworks with built-in Cloudflare integration.

Current Version: 2.64.4C3 requires Node.js 18.14.1 or higher and supports npm, pnpm, yarn, and bun.

Quick Start

Create a new project with one command:

npm create cloudflare@latest

Or specify a project name:

npm create cloudflare@latest my-app

With pnpm:

pnpm create cloudflare@latest my-app

With yarn:

yarn create cloudflare my-app

With bun:

bun create cloudflare my-app

Interactive Setup

C3 guides you through project creation with an interactive wizard:

Project name - Choose your application name
Template selection - Pick from Workers, Pages, or framework templates
TypeScript/JavaScript - Select your preferred language
Git initialization - Optionally initialize a Git repository
Deployment - Choose to deploy immediately or later

Template Categories

Workers Templates

Hello World

Basic Worker with fetch handler - perfect starting point

Hello World with Assets

Worker with static file serving capabilities

Durable Objects

Worker with Durable Objects for stateful applications

Scheduled Worker

Cron-triggered Worker for background tasks

Queue Consumer

Worker that processes Queue messages

Workflows

Worker with Cloudflare Workflows for orchestration

OpenAPI

OpenAPI-compliant API with validation

Hono

Fast web framework built for edge computing

Framework Templates

C3 supports popular web frameworks with Cloudflare integration:

React Ecosystem

npm create cloudflare@latest my-app -- --framework react

Available React-based frameworks:

React - Create React App with Cloudflare Pages
Next.js - React framework with SSR and SSG
Remix - Full-stack React framework
React Router - Single-page applications with routing
Gatsby - Static site generator
Redwood - Full-stack framework for Jamstack
TanStack Start - Modern React framework

Vue Ecosystem

npm create cloudflare@latest my-app -- --framework vue

Available Vue-based frameworks:

Vue - Progressive JavaScript framework
Nuxt - Vue framework with SSR and SSG
Vike - Vue + Vite framework

Other Frameworks

npm create cloudflare@latest my-app -- --framework astro

Supported frameworks:

Astro - Content-focused web framework
SvelteKit - Svelte application framework
Solid.js - Reactive JavaScript library
Qwik - Resumable framework for instant apps
Angular - Platform for web applications
Analog - Full-stack Angular meta-framework
Docusaurus - Documentation website generator
Waku - Minimalist React framework

Command-Line Options

Non-Interactive Mode

Skip prompts and use defaults:

npm create cloudflare@latest my-app -- --yes

Specify Template

npm create cloudflare@latest my-app -- --template hello-world

Choose Language

npm create cloudflare@latest my-app -- --lang typescript
# or
npm create cloudflare@latest my-app -- --lang javascript

Framework Selection

npm create cloudflare@latest my-app -- --framework next

Deployment Options

# Deploy immediately after creation
npm create cloudflare@latest my-app -- --deploy

# Skip deployment
npm create cloudflare@latest my-app -- --no-deploy

Git Initialization

# Initialize Git repository
npm create cloudflare@latest my-app -- --git

# Skip Git initialization
npm create cloudflare@latest my-app -- --no-git

Complete Example

npm create cloudflare@latest my-worker -- \
  --template hello-world \
  --lang typescript \
  --git \
  --deploy

Project Templates

Workers - Hello World

Basic Worker with TypeScript:

npm create cloudflare@latest my-worker -- --template hello-world --lang ts

Generated structure:

my-worker/
├── src/
│   └── index.ts
├── test/
│   └── index.spec.ts
├── wrangler.jsonc
├── package.json
├── tsconfig.json
└── vitest.config.ts

Example Worker code:

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    return new Response('Hello World!');
  },
};

Workers - Durable Objects

npm create cloudflare@latest my-do -- --template hello-world-durable-object

Includes:

Durable Object class definition
Worker with DO binding
Storage API examples
Testing setup

Workers - Scheduled

Cron-triggered Worker:

npm create cloudflare@latest my-cron -- --template scheduled

Example code:

export default {
  async scheduled(event: ScheduledEvent, env: Env): Promise<void> {
    // Runs on schedule defined in wrangler.jsonc
    console.log('Cron job executed at', new Date(event.scheduledTime));
  },
};

Workers - Queue Consumer

npm create cloudflare@latest my-queue -- --template queues

Includes:

Queue producer setup
Queue consumer handler
Batch processing example

Workers with Hono

Fast web framework:

npm create cloudflare@latest my-api -- --template hono

Example:

import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.text('Hello Hono!'));
app.get('/api/users/:id', (c) => {
  const id = c.req.param('id');
  return c.json({ id, name: 'User' });
});

export default app;

Framework Integration

Next.js

npm create cloudflare@latest my-next-app -- --framework next

C3 configures:

Next.js with Cloudflare Pages adapter
Edge runtime for API routes
Static asset optimization
Environment variables

Astro

npm create cloudflare@latest my-astro -- --framework astro

Includes:

Astro with Cloudflare adapter
SSR configuration
Image optimization
Edge middleware

Remix

npm create cloudflare@latest my-remix -- --framework react-router

Configured with:

Cloudflare Workers adapter
KV/D1 integration
Session storage
Asset handling

SvelteKit

npm create cloudflare@latest my-svelte -- --framework svelte

Setup includes:

Cloudflare adapter
Platform-specific types
Edge functions

Pre-existing Projects

Add Cloudflare configuration to existing projects:

cd my-existing-project
npm create cloudflare@latest . -- --template pre-existing

C3 will:

Detect your framework
Add wrangler.jsonc configuration
Install necessary dependencies
Configure deployment scripts

Generated Project Structure

Typical generated structure for a Worker:

my-worker/
├── src/
│   ├── index.ts              # Main Worker code
│   └── index.test.ts         # Unit tests
├── wrangler.jsonc            # Wrangler configuration
├── package.json              # Dependencies and scripts
├── tsconfig.json             # TypeScript configuration
├── vitest.config.ts          # Vitest testing setup
├── .gitignore               # Git ignore rules
└── README.md                # Project documentation

Framework projects include framework-specific structure plus:

wrangler.jsonc - Cloudflare configuration
Modified package.json with deploy scripts
Platform types and adapters

Post-Creation Steps

After C3 creates your project:

1. Install Dependencies (if not auto-installed)

cd my-app
npm install

2. Start Development Server

npm run dev

For Workers:

npm run dev  # Runs wrangler dev

For Pages:

npm run pages:dev  # Framework dev + Cloudflare Pages

3. Deploy to Cloudflare

npm run deploy

For first deployment, you’ll be prompted to:

Login to Cloudflare
Select your account
Confirm deployment

Configuration

Wrangler Configuration

C3 generates a wrangler.jsonc file:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-worker",
  "main": "src/index.ts",
  "compatibility_date": "2024-03-01",
  "compatibility_flags": ["nodejs_compat"]
}

Package Scripts

Generated package.json includes:

{
  "scripts": {
    "dev": "wrangler dev",
    "deploy": "wrangler deploy",
    "test": "vitest",
    "cf-typegen": "wrangler types"
  }
}

For Pages projects:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "wrangler pages dev",
    "deploy": "wrangler pages deploy"
  }
}

Advanced Features

Custom Templates

Use a custom template from a Git repository:

npm create cloudflare@latest my-app -- --template https://github.com/user/template

AGENTS.md File

C3 can add an AGENTS.md file to help AI coding assistants:

npm create cloudflare@latest my-worker -- --agents

This file includes:

Project structure documentation
Cloudflare-specific guidance
API usage patterns
Best practices

Experimental Features

Try experimental autoconfig:

npm create cloudflare@latest my-app -- --experimental

Uses wrangler setup for automatic configuration.

Deployment

Automatic Deployment

C3 can deploy immediately after creation:

npm create cloudflare@latest my-worker -- --deploy

Deployment process:

Authenticates with Cloudflare (if needed)
Builds the project
Uploads to Cloudflare
Provides deployment URL

Manual Deployment

Deploy later with:

npm run deploy

Pages Deployment

For Pages projects:

npm run build      # Build static assets
npm run deploy     # Deploy to Cloudflare Pages

Testing

C3 sets up testing with Vitest:

npm test

Example test:

import { describe, it, expect } from 'vitest';
import worker from '../src/index';

describe('Worker', () => {
  it('responds with Hello World', async () => {
    const request = new Request('http://localhost/');
    const env = {};
    const ctx = { waitUntil: () => {}, passThroughOnException: () => {} };
    
    const response = await worker.fetch(request, env, ctx);
    expect(await response.text()).toBe('Hello World!');
  });
});

Telemetry

C3 collects anonymous usage data to improve the tool.

Disable Telemetry

npm create cloudflare@latest -- telemetry disable

Enable Telemetry

npm create cloudflare@latest -- telemetry enable

Check Telemetry Status

npm create cloudflare@latest -- telemetry status

Common Workflows

Create and Deploy a Worker

# Create project
npm create cloudflare@latest my-worker -- \
  --template hello-world \
  --lang typescript \
  --git

# Navigate to project
cd my-worker

# Test locally
npm run dev

# Deploy to production
npm run deploy

Create a Full-Stack App

# Create Next.js app with Cloudflare
npm create cloudflare@latest my-app -- --framework next

cd my-app

# Develop locally
npm run dev

# Build and deploy
npm run build
npm run deploy

Add to Existing Project

cd my-existing-project

# Add Cloudflare configuration
npm create cloudflare@latest . -- --template pre-existing

# Deploy
npm run deploy

Best Practices

Choose the Right Template

Workers: For APIs, middleware, and edge logic
Pages: For static sites and full-stack frameworks
Durable Objects: For stateful applications
Scheduled: For cron jobs and background tasks

Use TypeScript

TypeScript provides better IDE support and catches errors:

npm create cloudflare@latest my-app -- --lang typescript

Test Locally First

Always test with wrangler dev before deploying:

npm run dev  # Test locally
npm run deploy  # Deploy when ready

Version Control

Initialize Git to track changes:

npm create cloudflare@latest my-app -- --git

Troubleshooting

Node Version Issues

Ensure you’re using Node.js 18.14.1 or higher:

node --version

Package Manager Detection

C3 auto-detects your package manager. To force a specific one:

# Use npm explicitly
npm create cloudflare@latest my-app

# Use pnpm
pnpm create cloudflare@latest my-app

Permission Errors

If you encounter permission errors during deployment:

# Login to Cloudflare
npx wrangler login

# Then deploy
npm run deploy

Template Not Found

List available templates:

npm create cloudflare@latest my-app
# Interactive menu shows all templates

Comparison with Other Tools

Feature	C3	Wrangler Init	Manual Setup
Interactive	✅ Yes	✅ Yes	❌ No
Framework Support	✅ 20+ frameworks	❌ Workers only	⚠️ Manual
Auto-deployment	✅ Optional	❌ No	❌ No
Git Setup	✅ Optional	❌ No	⚠️ Manual
Testing Setup	✅ Included	✅ Included	⚠️ Manual
Best For	New projects	Workers only	Custom setups

Use C3 for new projects and framework integrations. Use Wrangler for ongoing development.

Get Started

Core Tools

Development

Deployment

Platform Features

Advanced

​Quick Start

​Interactive Setup

​Template Categories

​Workers Templates

Hello World

Hello World with Assets

Durable Objects

Scheduled Worker

Queue Consumer

Workflows

OpenAPI

Hono

​Framework Templates

​React Ecosystem

​Vue Ecosystem

​Other Frameworks

​Command-Line Options

​Non-Interactive Mode

​Specify Template

​Choose Language

​Framework Selection

​Deployment Options

​Git Initialization

​Complete Example

​Project Templates

​Workers - Hello World

​Workers - Durable Objects

​Workers - Scheduled

​Workers - Queue Consumer

​Workers with Hono

​Framework Integration

​Next.js

​Astro

​Remix

​SvelteKit

​Pre-existing Projects

​Generated Project Structure

​Post-Creation Steps

​1. Install Dependencies (if not auto-installed)

​2. Start Development Server

​3. Deploy to Cloudflare

​Configuration

​Wrangler Configuration

​Package Scripts

​Advanced Features

​Custom Templates

​AGENTS.md File

​Experimental Features

​Deployment

​Automatic Deployment

​Manual Deployment

​Pages Deployment

​Testing

​Telemetry

​Disable Telemetry

​Enable Telemetry

​Check Telemetry Status

​Common Workflows

​Create and Deploy a Worker

​Create a Full-Stack App

​Add to Existing Project

​Best Practices

​Troubleshooting

​Node Version Issues

​Package Manager Detection

​Permission Errors

​Template Not Found

​Comparison with Other Tools

​Additional Resources

​Related Tools

Wrangler

Miniflare

Build docs developers (and LLMs) love

Quick Start

Interactive Setup

Template Categories

Workers Templates

Framework Templates

React Ecosystem

Vue Ecosystem

Other Frameworks

Command-Line Options

Non-Interactive Mode

Specify Template

Choose Language

Framework Selection

Deployment Options

Git Initialization

Complete Example

Project Templates

Workers - Hello World

Workers - Durable Objects

Workers - Scheduled

Workers - Queue Consumer

Workers with Hono

Framework Integration

Next.js

Astro

Remix

SvelteKit

Pre-existing Projects

Generated Project Structure

Post-Creation Steps

1. Install Dependencies (if not auto-installed)

2. Start Development Server

3. Deploy to Cloudflare

Configuration

Wrangler Configuration

Package Scripts

Advanced Features

Custom Templates

AGENTS.md File

Experimental Features

Deployment

Automatic Deployment

Manual Deployment

Pages Deployment

Testing

Telemetry

Disable Telemetry

Enable Telemetry

Check Telemetry Status

Common Workflows

Create and Deploy a Worker

Create a Full-Stack App

Add to Existing Project

Best Practices

Troubleshooting

Node Version Issues

Package Manager Detection

Permission Errors

Template Not Found

Comparison with Other Tools

Additional Resources

Related Tools