Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/alchemy-run/alchemy/llms.txt

Use this file to discover all available pages before exploring further.

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

1
Install Dependencies
2
npm install alchemy
npm install astro @astrojs/cloudflare
3
Create alchemy.run.ts
4
Create your infrastructure configuration:
5
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();
6
Configure Astro
7
Create astro.config.mjs:
8
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
});
9
Create Pages
10
Create src/pages/index.astro:
11
---
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>
12
Deploy
13
Deploy to Cloudflare:
14
npm exec tsx alchemy.run.ts
15
For local development:
16
npm exec tsx alchemy.run.ts --local

Key Features Explained

Local Development

The dev configuration integrates with Astro’s dev server:
dev: {
  command: "astro dev --port 5000",
}

Named Resources

Resources use a naming convention based on app name and stage:
name: `${app.name}-${app.stage}-website`

Source Code

View the complete source code: examples/cloudflare-astro

Build docs developers (and LLMs) love