> ## 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

> Deploy an Astro site to Cloudflare with edge rendering

# 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

<Steps>
  ### Install Dependencies

  ```bash theme={null}
  npm install alchemy
  npm install astro @astrojs/cloudflare
  ```

  ### Create alchemy.run.ts

  Create your infrastructure configuration:

  ```ts theme={null}
  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();
  ```

  ### Configure Astro

  Create `astro.config.mjs`:

  ```js theme={null}
  import { defineConfig } from 'astro/config';
  import cloudflare from '@astrojs/cloudflare';

  export default defineConfig({
    output: 'server',
    adapter: cloudflare(),
  });
  ```

  ### Create Pages

  Create `src/pages/index.astro`:

  ```astro theme={null}
  ---
  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>
  ```

  ### Deploy

  Deploy to Cloudflare:

  ```bash theme={null}
  npm exec tsx alchemy.run.ts
  ```

  For local development:

  ```bash theme={null}
  npm exec tsx alchemy.run.ts --local
  ```
</Steps>

## Key Features Explained

### Local Development

The `dev` configuration integrates with Astro's dev server:

```ts theme={null}
dev: {
  command: "astro dev --port 5000",
}
```

### Named Resources

Resources use a naming convention based on app name and stage:

```ts theme={null}
name: `${app.name}-${app.stage}-website`
```

## Source Code

View the complete source code: [examples/cloudflare-astro](https://github.com/sam-goodwin/alchemy/tree/main/examples/cloudflare-astro)
