SvelteKit + Cloudflare Starter

A production-ready monorepo starter with SvelteKit, Hono, oRPC, D1 database, and type-safe everything.

Features

• 🚀 SvelteKit 5 with Svelte 5 runes
• ⚡ Hono as HTTP layer (middleware, routing)
• 🔷 oRPC for type-safe RPC with OpenAPI generation
• 🗄️ Drizzle ORM with D1 database
• 🔐 Session-based auth (no external deps)
• 📦 Bun workspaces monorepo
• ☁️ Cloudflare Workers deployment ready
• 🎯 Zod for validation (single source of truth)
• 🔧 Interface-based DB (swap D1 for MySQL/Postgres later)

Project Structure

├── packages/
│   ├── shared/              # Zod schemas, types, utilities
│   │   └── src/schemas/     # Source of truth for all types
│   │
│   └── db/                  # Database layer
│       └── src/
│           ├── schema/      # Drizzle table definitions
│           ├── repositories/# Data access interfaces
│           ├── services/    # Business logic
│           └── adapters/    # D1 implementation
│
└── apps/web/                # SvelteKit app
    └── src/
        ├── lib/
        │   ├── rpc.ts               # Type-safe client
        │   └── server/rpc/          # Hono + oRPC
        │       ├── context.ts       # Request context
        │       ├── procedures.ts    # Base procedures
        │       ├── router.ts        # Main router
        │       ├── handler.ts       # Hono app + oRPC
        │       └── routers/         # Domain routers
        │           ├── auth.ts
        │           └── posts.ts
        └── routes/
            └── api/[...paths]/      # All API requests

Quick Start

# Install dependencies
bun install

# Create D1 database
bunx wrangler d1 create starter-db
# Copy the database_id to apps/web/wrangler.toml

# Generate migrations
bun run db:generate

# Apply migrations locally
cd apps/web
bunx wrangler d1 migrations apply starter-db --local

# Start development server (with D1 bindings)
bun run preview

# Or start without bindings (for UI work)
bun run dev

Architecture

┌────────────────────────────────────────────────────────┐
│                    SvelteKit Pages                      │
├────────────────────────────────────────────────────────┤
│                         Hono                            │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │  Middleware  │  │   /api/rpc   │  │  /api/health │  │
│  │  (cors,log)  │  │    (oRPC)    │  │  (REST)      │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
├────────────────────────────────────────────────────────┤
│                      Services                           │
│              (Business logic layer)                     │
├────────────────────────────────────────────────────────┤
│                    Repositories                         │
│               (Data access layer)                       │
├────────────────────────────────────────────────────────┤
│                   D1 / MySQL / Postgres                 │
└────────────────────────────────────────────────────────┘

Key insight: Hono is the HTTP layer, oRPC is mounted on it. This gives you:

• Hono's middleware (cors, logging, rate limiting)
• oRPC's type-safe procedures
• Freedom to add REST endpoints alongside RPC

Usage

Defining Procedures

// lib/server/rpc/routers/posts.ts
import { publicProcedure, protectedProcedure } from '../procedures';

export const postsRouter = {
  // Public - anyone can call
  list: publicProcedure
    .input(paginationSchema)
    .output(postsResponseSchema)
    .handler(async ({ input, context }) => {
      const postService = new PostService(context.db);
      return postService.getPublishedPosts(input);
    }),

  // Protected - requires authentication
  create: protectedProcedure
    .input(createPostSchema)
    .output(postSchema)
    .handler(async ({ input, context }) => {
      // context.user is guaranteed non-null
      const postService = new PostService(context.db);
      return postService.createPost(context.user.id, input);
    }),
};

Using the Client

// In +page.server.ts (SSR)
import { createClient } from '$lib/rpc';

export const load = async ({ fetch }) => {
  const rpc = createClient(fetch);
  const result = await rpc.posts.list({ limit: 10 });
  return { posts: result.items };  // Fully typed!
};

<!-- In +page.svelte (client-side) -->
<script lang="ts">
  import { rpc } from '$lib/rpc';

  async function createPost() {
    const post = await rpc.posts.create({
      title: 'Hello',
      content: 'World',
    });
    // post is fully typed as Post
  }
</script>

Adding Hono Routes

Need a webhook or REST endpoint? Add it directly to the Hono app:

// lib/server/rpc/handler.ts
export function createApp(locals: App.Locals) {
  const app = new Hono<Env>().basePath('/api');
  
  // ... existing setup ...

  // Add REST endpoints alongside oRPC
  app.post('/webhooks/stripe', async (c) => {
    const payload = await c.req.text();
    // Handle webhook...
    return c.json({ received: true });
  });

  // oRPC is mounted here
  app.all('/rpc/*', async (c) => { ... });

  return app;
}

API Endpoints

Middleware Chain

// lib/server/rpc/procedures.ts

// Base procedure with context
const o = os.$context<Context>();

// Public - anyone can call
export const publicProcedure = o;

// Protected - requires authenticated user
export const protectedProcedure = o.use(async ({ context, next }) => {
  if (!context.user) {
    throw new Error('UNAUTHORIZED');
  }
  return next({ context });  // context.user now guaranteed
});

// Admin - requires admin role  
export const adminProcedure = protectedProcedure.use(async ({ context, next }) => {
  if (context.user.role !== 'admin') {
    throw new Error('FORBIDDEN');
  }
  return next({ context });
});

Commands

# Development
bun run dev              # Start dev server
bun run check            # Type check all packages

# Database
bun run db:generate      # Generate migrations from schema
bun run db:migrate       # Apply migrations

# Production
bun run build            # Build for production
bun run preview          # Build + run with wrangler dev

# Deploy to Cloudflare Workers
cd apps/web && bun run deploy

Adding a New Entity

1. Schema → packages/shared/src/schemas/product.ts
2. Table → packages/db/src/schema/products.ts
3. Repository interface → packages/db/src/repositories/interfaces.ts
4. Repository implementation → packages/db/src/adapters/d1.ts
5. Service → packages/db/src/services/product.service.ts
6. Router → apps/web/src/lib/server/rpc/routers/products.ts
7. Register → apps/web/src/lib/server/rpc/router.ts
8. Migrate → bun run db:generate

License

MIT