SvelteKit + Cloudflare Workers Template

A modern template for building full-stack web applications using SvelteKit and Cloudflare Workers, with integrated backend API routes and Cloudflare services.

Features

• SvelteKit Frontend: File-based routing, reactive components, built-in stores
• Cloudflare Workers Backend: API routes integrated in the same project
• Single Deployment: Both frontend and backend deploy as one unit
• Cloudflare Services: Ready for D1 (database), R2 (storage), KV (cache)
• TypeScript Support: Optional but included for better DX
• Fast Development: Hot reload with Vite, instant preview URLs
• Latest Wrangler: Uses Wrangler v4.29.1+ for optimal performance

Project Structure

src/
├── lib/
│   ├── components/     # Reusable Svelte components
│   ├── stores/         # Svelte stores for state management
│   └── server/         # Server-only utilities
├── routes/
│   ├── api/           # API endpoints (+server.ts files)
│   └── */             # Page routes (+page.svelte files)
└── hooks.server.ts    # Server middleware

Quick Start

1. Install dependencies:

   npm install
   

2. Start development server:

   ./build.sh --dev-start
   

   Visit http://localhost:5173

3. Build for production:

   ./build.sh
   

4. Deploy to Cloudflare:

   ./build.sh --deploy-dev   # Development
   ./build.sh --deploy-prod  # Production
   

Creating Pages

Create a +page.svelte file in src/routes/:

<!-- src/routes/about/+page.svelte -->
<h1>About Page</h1>
<p>This page is available at /about</p>

Creating API Endpoints

Create a +server.ts file in src/routes/api/:

// src/routes/api/users/+server.ts
import { json } from '@sveltejs/kit';

export async function GET({ platform }) {
  const db = platform?.env?.DB;
  // Use Cloudflare services here
  return json({ users: [] });
}

Using Cloudflare Services

Access Cloudflare bindings in API routes via platform.env:

// D1 Database
const db = platform.env.DB;
const result = await db.prepare("SELECT * FROM users").all();

// R2 Storage
const bucket = platform.env.BUCKET;
await bucket.put('file.txt', data);

// KV Storage
const kv = platform.env.KV;
await kv.put('key', 'value');

Configuration

wrangler.toml

Configure your Cloudflare services:

# D1 Database
[[d1_databases]]
binding = "DB"
database_name = "your-db"
database_id = "your-id"

# R2 Bucket
[[r2_buckets]]
binding = "BUCKET"
bucket_name = "your-bucket"

# KV Namespace
[[kv_namespaces]]
binding = "KV"
id = "your-kv-id"

Commands Overview

Development Server

./build.sh --dev-start    # Start dev server
./build.sh --dev-stop     # Stop dev server
./build.sh --dev-restart  # Restart dev server
./build.sh --dev-logs     # View server logs
./build.sh --dev-status   # Check server status

Build & Deployment

./build.sh                   # Build the application
./build.sh --update-changelog # Update changelog from GitHub
./build.sh --deploy-dev      # Build and deploy to development
./build.sh --deploy-prod     # Build and deploy to production

Key Concepts

• Pages: Create +page.svelte files for routes
• API Routes: Create +server.ts files with HTTP method exports
• Layouts: Use +layout.svelte for shared UI
• Stores: Use Svelte stores for state management
• Platform Access: Use platform.env to access Cloudflare services

Tips

1. Use file-based routing for automatic route generation
2. API routes and pages can coexist in the same project
3. Cloudflare bindings are typed in app.d.ts
4. Deploy frequently to get preview URLs for testing
5. Use Svelte stores for reactive state management

Resources

• SvelteKit Documentation
• Cloudflare Workers
• Svelte Tutorial