cloudflare-full-stack-integration

Name: cloudflare-full-stack-integration
Author: jackspace

15stars7forks

How to install cloudflare-full-stack-integration?

jackspace/claudeskillz/cloudflare-full-stack-integration

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-full-stack-integration

Installs into the current project.

Summary

Production-tested integration patterns for connecting React frontends to Cloudflare Worker backends with Hono, Clerk authentication, and D1 databases. Prevents common frontend-backend connection issues, CORS errors, auth token failures, and race conditions. Use when: connecting f

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Full-Stack Integration Patterns
2
3	Production-tested patterns for React + Cloudflare Workers + Hono + Clerk authentication.
4
5	## When to Use This Skill
6
7	Use this skill when you need to:
8
9	- Connect a React frontend to a Cloudflare Worker backend
10	- Implement authentication with Clerk in a full-stack app
11	- Set up API calls that automatically include auth tokens
12	- Fix CORS errors between frontend and backend
13	- Prevent race conditions with auth loading
14	- Configure environment variables correctly
15	- Set up D1 database access from API routes
16	- Create protected routes that require authentication
17
18	## What This Skill Provides
19
20	### Templates
21
22	Frontend (`templates/frontend/`):
23	- `lib/api-client.ts` - Fetch wrapper with automatic token attachment
24	- `components/ProtectedRoute.tsx` - Auth gate pattern with loading states
25
26	Backend (`templates/backend/`):
27	- `middleware/cors.ts` - CORS configuration for dev and production
28	- `middleware/auth.ts` - JWT verification with Clerk
29	- `routes/api.ts` - Example API routes with all patterns integrated
30
31	Config (`templates/config/`):
32	- `wrangler.jsonc` - Complete Workers configuration with bindings
33	- `.dev.vars.example` - Environment variables setup
34	- `vite.config.ts` - Cloudflare Vite plugin configuration
35
36	References (`references/`):
37	- `common-race-conditions.md` - Complete guide to auth loading issues
38
39	## Critical Architectural Insights
40
41	### 1. @cloudflare/vite-plugin Runs on SAME Port
42
43	Key Insight: The Worker and frontend run on the SAME port during development.
44
45	```typescript
46	// ✅ CORRECT: Use relative URLs
47	fetch('/api/data')
48
49	// ❌ WRONG: Don't use absolute URLs or proxy
50	fetch('http://localhost:8787/api/data')
51	```
52
53	Why: The Vite plugin runs your Worker using workerd directly in the dev server. No proxy needed!
54
55	### 2. CORS Must Be Applied BEFORE Routes
56
57	```typescript
58	// ✅ CORRECT ORDER
59	app.use('/api/*', cors())
60	app.post('/api/data', handler)
61
62	// ❌ WRONG ORDER - Will cause CORS errors
63	app.post('/api/data', handler)
64	app.use('/api/*', cors())
65	```
66
67	### 3. Auth Loading is NOT a Race Condition
68
69	Most "race conditions" are actually missing `isLoaded` checks:
70
71	```typescript
72	// ❌ WRONG: Calls API before token ready
73	useEffect(() => {
74	fetch('/api/data') // 401 error!
75	}, [])
76
77	// ✅ CORRECT: Wait for auth to load
78	const { isLoaded, isSignedIn } = useSession()
79	useEffect(() => {
80	if (!isLoaded \|\| !isSignedIn) return
81	fetch('/api/data') // Now token is ready
82	}, [isLoaded, isSignedIn])
83	```
84
85	### 4. Environment Variables Have Different Rules
86
87	Frontend (Vite):
88	- MUST start with `VITE_` prefix
89	- Defined in `.env` file
90	- Access: `import.meta.env.VITE_VARIABLE_NAME`
91
92	Backend (Workers):
93	- NO prefix required
94	- Defined in `.dev.vars` file (dev) or wrangler secrets (prod)
95	- Access: `env.VARIABLE_NAME`
96
97	### 5. D1 Bindings Are Always Available
98
99	D1 is accessed via bindings - no connection management needed:
100
101	```typescript
102	// ✅ CORRECT: Direct access via binding
103	const { results } = await env.DB.prepare('SELECT * FROM users').run()
104
105	// ❌ WRONG: No need to "connect" first
106	const connection = await env.DB.connect() // This doesn't exist!
107	```
108
109	## Step-by-Step Integration Guide
110
111	### Step 1: Project Setup
112
113	```bash
114	# Create project with Cloudflare Workers + React
115	npm create cloudflare@latest my-app
116	cd my-app
117
118	# Install dependencies
119	npm install hono @clerk/clerk-react @clerk/backend
120	npm install -D @cloudflare/vite-plugin @tailwindcss/vite
121	```
122
123	### Step 2: Configure Vite
124
125	Copy

People who liked this also viewed

6 picks

Type

cloudflare-full-stack-integration

15stars7forks

View on GitHub

How to install cloudflare-full-stack-integration?

jackspace/claudeskillz/cloudflare-full-stack-integration

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-full-stack-integration

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Full-Stack Integration Patterns
2
3	Production-tested patterns for React + Cloudflare Workers + Hono + Clerk authentication.
4
5	## When to Use This Skill
6
7	Use this skill when you need to:
8
9	- Connect a React frontend to a Cloudflare Worker backend
10	- Implement authentication with Clerk in a full-stack app
11	- Set up API calls that automatically include auth tokens
12	- Fix CORS errors between frontend and backend
13	- Prevent race conditions with auth loading
14	- Configure environment variables correctly
15	- Set up D1 database access from API routes
16	- Create protected routes that require authentication
17
18	## What This Skill Provides
19
20	### Templates
21
22	Frontend (`templates/frontend/`):
23	- `lib/api-client.ts` - Fetch wrapper with automatic token attachment
24	- `components/ProtectedRoute.tsx` - Auth gate pattern with loading states
25
26	Backend (`templates/backend/`):
27	- `middleware/cors.ts` - CORS configuration for dev and production
28	- `middleware/auth.ts` - JWT verification with Clerk
29	- `routes/api.ts` - Example API routes with all patterns integrated
30
31	Config (`templates/config/`):
32	- `wrangler.jsonc` - Complete Workers configuration with bindings
33	- `.dev.vars.example` - Environment variables setup
34	- `vite.config.ts` - Cloudflare Vite plugin configuration
35
36	References (`references/`):
37	- `common-race-conditions.md` - Complete guide to auth loading issues
38
39	## Critical Architectural Insights
40
41	### 1. @cloudflare/vite-plugin Runs on SAME Port
42
43	Key Insight: The Worker and frontend run on the SAME port during development.
44
45	```typescript
46	// ✅ CORRECT: Use relative URLs
47	fetch('/api/data')
48
49	// ❌ WRONG: Don't use absolute URLs or proxy
50	fetch('http://localhost:8787/api/data')
51	```
52
53	Why: The Vite plugin runs your Worker using workerd directly in the dev server. No proxy needed!
54
55	### 2. CORS Must Be Applied BEFORE Routes
56
57	```typescript
58	// ✅ CORRECT ORDER
59	app.use('/api/*', cors())
60	app.post('/api/data', handler)
61
62	// ❌ WRONG ORDER - Will cause CORS errors
63	app.post('/api/data', handler)
64	app.use('/api/*', cors())
65	```
66
67	### 3. Auth Loading is NOT a Race Condition
68
69	Most "race conditions" are actually missing `isLoaded` checks:
70
71	```typescript
72	// ❌ WRONG: Calls API before token ready
73	useEffect(() => {
74	fetch('/api/data') // 401 error!
75	}, [])
76
77	// ✅ CORRECT: Wait for auth to load
78	const { isLoaded, isSignedIn } = useSession()
79	useEffect(() => {
80	if (!isLoaded \|\| !isSignedIn) return
81	fetch('/api/data') // Now token is ready
82	}, [isLoaded, isSignedIn])
83	```
84
85	### 4. Environment Variables Have Different Rules
86
87	Frontend (Vite):
88	- MUST start with `VITE_` prefix
89	- Defined in `.env` file
90	- Access: `import.meta.env.VITE_VARIABLE_NAME`
91
92	Backend (Workers):
93	- NO prefix required
94	- Defined in `.dev.vars` file (dev) or wrangler secrets (prod)
95	- Access: `env.VARIABLE_NAME`
96
97	### 5. D1 Bindings Are Always Available
98
99	D1 is accessed via bindings - no connection management needed:
100
101	```typescript
102	// ✅ CORRECT: Direct access via binding
103	const { results } = await env.DB.prepare('SELECT * FROM users').run()
104
105	// ❌ WRONG: No need to "connect" first
106	const connection = await env.DB.connect() // This doesn't exist!
107	```
108
109	## Step-by-Step Integration Guide
110
111	### Step 1: Project Setup
112
113	```bash
114	# Create project with Cloudflare Workers + React
115	npm create cloudflare@latest my-app
116	cd my-app
117
118	# Install dependencies
119	npm install hono @clerk/clerk-react @clerk/backend
120	npm install -D @cloudflare/vite-plugin @tailwindcss/vite
121	```
122
123	### Step 2: Configure Vite
124
125	Copy

People who liked this also viewed

6 picks

Type