Astro

Deploy Astro applications to Cloudflare Workers with Alchemy

Deploy Astro applications to Cloudflare Workers with automatic adapter configuration.

Installation

Install the required dependencies:

npm install alchemy astro @astrojs/cloudflare

Configuration

Configuration Options

Properties

• output (optional): Astro output mode
  • "server" - Server-side rendering (default if adapter is used)
  • "static" - Static site generation
  • Auto-detected from astro.config.mjs
• bindings: Cloudflare bindings (KV, R2, D1, etc.)
• build: Build command override
  • Default: astro build
• dev: Dev command override
  • Default: astro dev
• entrypoint: Worker entrypoint path
  • Default: dist/_worker.js/index.js (server mode)
• assets: Static assets directory
  • Default: dist

Static vs Server Mode

Static Site

For static sites, set output: "static" in your Astro config:

import { defineConfig } from "astro/config";

export default defineConfig({
  output: "static",
});

const website = await Astro("website", {
  output: "static",
});

Server-Side Rendering

For SSR, set output: "server" and use the adapter:

import alchemy from "alchemy/cloudflare/astro";
import { defineConfig } from "astro/config";

export default defineConfig({
  output: "server",
  adapter: alchemy(),
});

Accessing Bindings

Access Cloudflare bindings in your Astro pages:

---
const db = Astro.locals.runtime.env.DB;
const result = await db.prepare("SELECT * FROM users").all();
---

<h1>Users: {result.results.length}</h1>

Local Development

The Alchemy adapter automatically:

• Configures platform proxy for local bindings
• Ignores .alchemy directory from file watching
• Provides development environment access

Start the dev server:

npm run dev

Related Resources

• Website - Base resource for web applications
• D1 Database - SQL database
• KV Namespace - Key-value storage