Cloudflare Pages Deployment

1. Overview

The website is deployed as a static site to Cloudflare Pages. The Astro build produces static HTML, CSS, and JavaScript files. A Cloudflare Pages Function (functions/api/contact.ts) handles contact form submissions at the edge.

2. Prerequisites

A Cloudflare account
The website source code pushed to a GitHub repository
Node.js 22.x installed locally (for testing builds)

3. Deployment Methods

3.1. Method 1: Git Integration (Recommended)

This method automatically builds and deploys the site whenever you push to the configured branch.

Log in to the Cloudflare Dashboard
Navigate to Workers & Pages > Create application > Pages
Select Connect to Git and authorise access to your GitHub repository
Configure the build settings:

Setting Value

Production branch

main

Build command

npm run build

Build output directory

dist
Add the required environment variable:

Variable Value Purpose

NODE_VERSION

22

Ensures the build uses Node.js 22 (required by Astro 5.8+)
Click Save and Deploy

Setting	Value
Production branch	`main`
Build command	`npm run build`
Build output directory	`dist`

Variable	Value	Purpose
`NODE_VERSION`	`22`	Ensures the build uses Node.js 22 (required by Astro 5.8+)

3.2. Method 2: Direct Upload via Wrangler CLI

Use this method for manual deployments or CI/CD pipelines.

Install Wrangler globally:
```
npm install -g wrangler
```
Authenticate with Cloudflare:
```
wrangler login
```
Build the site locally:
```
npm ci
npm run build
```

Deploy:

wrangler pages deploy dist --project-name=myriad-events

4. Custom Domain Configuration

In the Cloudflare Dashboard, go to your Pages project
Navigate to Custom domains
Click Set up a custom domain
Enter www.myriadevents.co.za
Cloudflare will automatically configure the DNS records if the domain is managed by Cloudflare

The site property in astro.config.mjs is set to https://www.myriadevents.co.za — update this if using a different domain.

5. Environment Variables

5.1. Build Variables

Variable Value Description

Variable	Value	Description
`NODE_VERSION`	`22`	Node.js version for the build environment

NODE_VERSION

22

Node.js version for the build environment

5.2. Contact Form Variables

These are configured as production secrets in the Cloudflare Pages project settings (not committed to source control).

See Contact Form Mail Setup for the full list of environment variables for each mail delivery option.

6. Project Configuration

The Astro configuration is defined in astro.config.mjs:

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  site: 'https://www.myriadevents.co.za',
  output: 'static',
  adapter: cloudflare(),
  vite: {
    plugins: [tailwindcss()]
  }
});

Key points:

output: 'static' — generates a fully static site
adapter: cloudflare() — enables Cloudflare Pages Functions (e.g., the contact form handler)
The @astrojs/cloudflare adapter is required even for static output when using Pages Functions

7. Pages Function

The contact form handler lives at functions/api/contact.ts. Cloudflare Pages automatically detects files in the functions/ directory and deploys them as edge functions.

The function is accessible at /api/contact on the deployed site — no additional routing configuration is needed.

8. Troubleshooting

Build fails with Node.js version error: Ensure NODE_VERSION=22 is set in the Cloudflare Pages environment variables. Astro 5.8+ requires Node.js 20.3+ or 22+.
Contact form returns 500 error: Check that all required environment variables are configured in the Cloudflare Pages project settings. See Contact Form Mail Setup.
Site deploys but Pages Function does not work: Ensure the @astrojs/cloudflare adapter is installed and configured in astro.config.mjs. The functions/ directory must be at the project root (not inside src/).