RedwoodSDK Cloudflare Workers Development

Expert guidance for working with RedwoodSDK applications built on Cloudflare Workers infrastructure.

What This Skill Does

This skill provides comprehensive development patterns for full-stack applications using:

Project Architecture Understanding

When working with RedwoodSDK projects, understand these core architectural patterns:

Application Entry Points

Component Organization

Data Layer

Configuration Files

Development Workflow Instructions

1. Starting Development Server

```bash

pnpm dev

```

This starts the Vite dev server with Cloudflare Workers compatibility. Hot module reloading is enabled for both server and client code.

2. Database Schema Management

**For local development (uses local SQLite):**

```bash

Make changes to src/db/schema.ts, then:

npm run local:db:generate # Generate migration files

npm run local:db:migrate # Apply migrations

OR use the combined command:

npm run migrate:dev # Generate + migrate in one step

To directly push schema without migrations:

npm run local:db:push

To visually inspect data:

npm run local:db:studio # Opens Drizzle Studio on localhost

```

**For production (uses Cloudflare D1):**

```bash

Make changes to src/db/schema.ts, then:

npm run db:generate # Generate migration files

npm run db:migrate # Apply to D1 via Cloudflare API

OR:

npm run db:push # Direct schema push

To inspect production data:

npm run db:studio

```

**Authentication schema updates:**

```bash

npm run auth:db:migrate # Regenerates auth schema and migrates

```

3. React Component Development

**Server Components (default behavior):**

```typescript

// src/app/components/MyComponent.tsx

import { db } from '~/db'

export default async function MyComponent({ ctx }) {

// Can directly await database queries

const users = await db.select().from(schema.users)

return (

<div>

{users.map(user => <div key={user.id}>{user.name}</div>)}

</div>

)

}

```

**Client Components (for interactivity):**

```typescript

// src/app/components/Counter.tsx

"use client";

import { useState } from 'react'

export default function Counter() {

const [count, setCount] = useState(0)

return (

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

)

}

```

**Key rules:**

4. Data Fetching Patterns

**In Server Components:**

```typescript

// Async component - no useEffect needed

export default async function UserList({ ctx }) {

const users = await db.query.users.findMany({

with: { posts: true }

})

return <ul>{users.map(u => <li>{u.name}</li>)}</ul>

}

```

**In Client Components:**

```typescript

"use client";

import { useEffect, useState } from 'react'

export default function ClientData() {

const [data, setData] = useState(null)

useEffect(() => {

fetch('/api/data').then(r => r.json()).then(setData)

}, [])

return <div>{data && JSON.stringify(data)}</div>

}

```

5. Session Management with Durable Objects

Access session via the context object:

```typescript

// In a route handler or server component

export default async function ProtectedPage({ ctx }) {

const session = await ctx.session.get()

if (!session.user) {

return <Redirect to="/login" />

}

return <div>Welcome {session.user.name}</div>

}

```

Session operations:

6. Type Generation and Checking

```bash

pnpm types # Run TypeScript type checker

pnpm check # Generate types + type check

```

Run `pnpm check` after schema changes to regenerate database types.

7. Building and Deploying

```bash

pnpm build # Build for production (outputs to dist/)

npm run release # Full release: clean + generate + build + deploy

```

The `release` script:

1. Cleans previous build artifacts

2. Generates latest migrations

3. Builds optimized Worker bundle

4. Deploys to Cloudflare via Wrangler

Common Patterns and Solutions

Adding a New Database Table

1. Edit `src/db/schema.ts`:

```typescript

export const posts = sqliteTable('posts', {

id: integer('id').primaryKey({ autoIncrement: true }),

title: text('title').notNull(),

authorId: integer('author_id').references(() => users.id),

createdAt: integer('created_at', { mode: 'timestamp' })

})

```

2. Generate and apply migration:

```bash

npm run migrate:dev # For local

npm run db:migrate # For production

```

3. Regenerate types:

```bash

pnpm check

```

Adding Authentication Route

1. Define route in `src/worker.tsx`:

```typescript

app.get('/api/auth/status', async (ctx) => {

const session = await ctx.session.get()

return ctx.json({ user: session.user || null })

})

```

2. Use Better Auth helpers from `src/app/lib/auth.client.ts` and `auth.ts`

Environment Variables

Configure in `wrangler.jsonc`:

```jsonc

{

"vars": {

"ENVIRONMENT": "development"

},

"d1_databases": [

{

"binding": "DB",

"database_name": "my-app-db",

"database_id": "..."

}

]

}

```

Access in code: `ctx.env.ENVIRONMENT`

Styling with Tailwind v4

Constraints

When to Use This Skill

Use this skill when: