Astro Joins Cloudflare: The Future of Edge-First Web Development

1// src/live.config.ts
2import { defineCollection, defineLiveCollection } from 'astro:content';
3import { z } from 'zod';
4
5export const collections = {
6  products: defineLiveCollection({
7    loader: customInventoryLoader(),
8    schema: z.object({
9      id: z.string(),
10      stock: z.number(),
11      price: z.number(),
12      lastUpdated: z.date()
13    })
14  })
15};

1// astro.config.mjs
2export default defineConfig({
3  security: {
4    csp: {
5      directives: {
6        'default-src': ["'self'"],
7        'script-src': ["'self'", "'unsafe-inline'"],
8        'style-src': ["'self'", "'unsafe-inline'"]
9      }
10    }
11  }
12});

1// astro.config.mjs
2import { defineConfig } from 'astro/config';
3import cloudflare from '@astrojs/cloudflare';
4
5export default defineConfig({
6  output: 'server',
7  adapter: cloudflare({
8    imageService: 'cloudflare',
9    platformProxy: {
10      enabled: true,
11      persist: './.wrangler/state/v3'
12    }
13  }),
14  site: 'https://your-domain.com'
15});

1---
2// src/pages/posts.astro
3import { drizzle } from 'drizzle-orm/d1';
4import { posts } from '../schema';
5
6const db = drizzle(Astro.locals.runtime.env.DB);
7const allPosts = await db.select().from(posts);
8---
9
10<ul>
11  {allPosts.map(post => <li>{post.title}</li>)}
12</ul>

1---
2// src/pages/api/cache.ts
3const kv = Astro.locals.runtime.env.CACHE;
4
5// Read
6const cached = await kv.get('user:123', { type: 'json' });
7
8// Write
9await kv.put('user:123', JSON.stringify(userData));
10---

1---
2const bucket = Astro.locals.runtime.env.BUCKET;
3
4// Upload
5await bucket.put('images/photo.jpg', imageBuffer);
6
7// Download
8const object = await bucket.get('images/photo.jpg');
9const data = await object.arrayBuffer();
10---

1# wrangler.toml
2name = "my-astro-app"
3main = "./dist/_worker.js/index.js"
4compatibility_date = "2025-01-01"
5compatibility_flags = ["nodejs_compat"]
6
7[[d1_databases]]
8binding = "DB"
9database_name = "my-database"
10database_id = "xxx-xxx-xxx"
11
12[[kv_namespaces]]
13binding = "CACHE"
14id = "xxx"
15
16[[r2_buckets]]
17binding = "BUCKET"
18bucket_name = "my-bucket"

1// src/server.ts
2import { Hono } from 'hono';
3import { cors } from 'hono/cors';
4import { zValidator } from '@hono/zod-validator';
5import { z } from 'zod';
6
7type Bindings = {
8  DB: D1Database;
9  KV: KVNamespace;
10};
11
12const app = new Hono<{ Bindings: Bindings }>();
13
14// Middleware
15app.use('*', cors());
16
17// Routes
18app.get('/api/posts', async (c) => {
19  const db = c.env.DB;
20  const posts = await db.prepare('SELECT * FROM posts').all();
21  return c.json(posts.results);
22});
23
24app.post('/api/posts',
25  zValidator('json', z.object({
26    title: z.string().min(1),
27    content: z.string()
28  })),
29  async (c) => {
30    const { title, content } = c.req.valid('json');
31    const db = c.env.DB;
32    await db.prepare('INSERT INTO posts (title, content) VALUES (?, ?)')
33      .bind(title, content)
34      .run();
35    return c.json({ success: true }, 201);
36  }
37);
38
39export default app;

1// src/pages/api/[...path].ts
2import app from '../../server';
3import type { APIRoute } from 'astro';
4
5export const prerender = false;
6
7export const ALL: APIRoute = (context) => {
8  return app.fetch(
9    context.request,
10    context.locals.runtime.env,
11    context.locals.runtime.ctx
12  );
13};

1---
2// src/pages/profile.astro
3import UserAvatar from '../components/UserAvatar.astro';
4import GenericAvatar from '../components/GenericAvatar.astro';
5---
6
7<h1>User Profile</h1>
8
9<!-- Static content renders immediately -->
10<section class="bio">
11  <p>Welcome to your profile page.</p>
12</section>
13
14<!-- Dynamic island loads asynchronously -->
15<UserAvatar server:defer>
16  <GenericAvatar slot="fallback" />
17</UserAvatar>

1---
2// src/components/UserAvatar.astro
3Astro.response.headers.set('Cache-Control', 'public, max-age=300');
4---
5
6<img src={user.avatar} alt={user.name} />

1// .claude/settings.json
2{
3  "mcpServers": {
4    "astro-docs": {
5      "command": "npx",
6      "args": ["-y", "@anthropic-ai/astro-docs-mcp"]
7    }
8  }
9}

1<!-- Example CLAUDE.md for Astro projects -->
2# Astro Project Guidelines
3
4## Stack
5- Astro 6 with Cloudflare adapter
6- Hono for API routes
7- Drizzle ORM with D1
8- TypeScript strict mode
9
10## Patterns
11- Use Content Layer for all content
12- Server Islands for user-specific content
13- Pre-render static pages where possible
14
15## Commands
16- `npm run dev` - Start development server
17- `npm run build` - Build for production
18- `wrangler deploy` - Deploy to Cloudflare