Cloudflare Astro Example
This example shows how to deploy an Astro site to Cloudflare with local development support.Features
- Astro: Modern static site generator with islands architecture
- Edge Rendering: SSR at the edge with Cloudflare Workers
- Local Development: Integrated dev server
Project Setup
import alchemy from "alchemy";
import { Astro } from "alchemy/cloudflare";
const app = await alchemy("cloudflare-astro");
export const website = await Astro("website", {
name: `${app.name}-${app.stage}-website`,
dev: {
command: "astro dev --port 5000",
},
});
console.log({
url: website.url,
});
await app.finalize();
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
export default defineConfig({
output: 'server',
adapter: cloudflare(),
});
---
const title = "Astro on Cloudflare";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>Your Astro site is running on Cloudflare Workers!</p>
</body>
</html>
Key Features Explained
Local Development
Thedev configuration integrates with Astro’s dev server: