From a23c94ad1f560f72e81131d6708a33689b275dff Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Wed, 8 Apr 2026 16:53:09 -0400
Subject: [PATCH] feat(ci): add Cloudflare Pages deployment configuration

Add wrangler.toml, deployment script, and documentation for deploying
the AI Code Battle SPA to Cloudflare Pages.

- wrangler.toml: Cloudflare Pages project configuration
- scripts/deploy-pages.sh: Manual deployment script using wrangler CLI
- web/CLOUDFLARE_DEPLOYMENT.md: Deployment guide with GitHub Actions setup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 scripts/deploy-pages.sh      |  59 +++++++++++++++++++++
 web/CLOUDFLARE_DEPLOYMENT.md | 100 +++++++++++++++++++++++++++++++++++
 wrangler.toml                |   5 ++
 3 files changed, 164 insertions(+)
 create mode 100644 scripts/deploy-pages.sh
 create mode 100644 web/CLOUDFLARE_DEPLOYMENT.md
 create mode 100644 wrangler.toml

diff --git a/scripts/deploy-pages.sh b/scripts/deploy-pages.sh
new file mode 100644
index 0000000..ebb91d8
--- /dev/null
+++ b/scripts/deploy-pages.sh
@@ -0,0 +1,59 @@
+#!/bin/bash
+# Cloudflare Pages Deployment Script
+# Deploys the AI Code Battle SPA to Cloudflare Pages
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}=== AI Code Battle - Cloudflare Pages Deployment ===${NC}"
+echo ""
+
+# Check if wrangler is installed
+if ! command -v wrangler &> /dev/null; then
+    echo -e "${RED}ERROR: wrangler is not installed${NC}"
+    echo "Install with: npm install -g wrangler"
+    exit 1
+fi
+
+# Check if authenticated
+echo -e "${BLUE}Checking authentication...${NC}"
+if ! wrangler whoami &> /dev/null; then
+    echo -e "${YELLOW}Not authenticated with Cloudflare${NC}"
+    echo "Please run: wrangler login"
+    echo ""
+    echo "Or set environment variables:"
+    echo "  export CLOUDFLARE_API_TOKEN=your_token"
+    echo "  export CLOUDFLARE_ACCOUNT_ID=your_account_id"
+    exit 1
+fi
+
+echo -e "${GREEN}Authenticated as:${NC}"
+wrangler whoami
+echo ""
+
+# Build the site
+echo -e "${BLUE}Building the site...${NC}"
+cd web
+npm install
+npm run build
+cd ..
+echo -e "${GREEN}✓ Build complete${NC}"
+echo ""
+
+# Deploy to Pages
+echo -e "${BLUE}Deploying to Cloudflare Pages...${NC}"
+wrangler pages deploy web/dist --project-name=ai-code-battle --commit-dirty=true
+echo ""
+
+echo -e "${GREEN}=== Deployment Complete! ===${NC}"
+echo ""
+echo "Site URLs:"
+echo "  - Pages URL: https://ai-code-battle.pages.dev"
+echo "  - Custom domain: https://aicodebattle.com (if configured)"
+echo ""
diff --git a/web/CLOUDFLARE_DEPLOYMENT.md b/web/CLOUDFLARE_DEPLOYMENT.md
new file mode 100644
index 0000000..8031971
--- /dev/null
+++ b/web/CLOUDFLARE_DEPLOYMENT.md
@@ -0,0 +1,100 @@
+# Cloudflare Pages Deployment Guide
+
+This guide explains how to deploy the AI Code Battle SPA to Cloudflare Pages.
+
+## Quick Start
+
+### Option 1: GitHub Integration (Recommended)
+
+1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/)
+2. Navigate to **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
+3. Select the `ai-code-battle` repository
+4. Configure the build settings:
+   - **Project name**: `ai-code-battle`
+   - **Production branch**: `master`
+   - **Build command**: `cd web && npm run build`
+   - **Build output directory**: `web/dist`
+5. Click **Save and Deploy**
+
+The site will now automatically deploy whenever you push to the `master` branch.
+
+### Option 2: Manual Deployment with Wrangler
+
+1. Install wrangler:
+   ```bash
+   npm install -g wrangler
+   ```
+
+2. Authenticate with Cloudflare:
+   ```bash
+   wrangler login
+   ```
+
+3. Build the site:
+   ```bash
+   cd web
+   npm install
+   npm run build
+   ```
+
+4. Deploy to Pages:
+   ```bash
+   wrangler pages deploy dist --project-name=ai-code-battle
+   ```
+
+## Environment Variables
+
+For the GitHub Actions workflow to work, you need to set these secrets in your GitHub repository:
+
+- `CLOUDFLARE_API_TOKEN`: Your Cloudflare API token
+- `CLOUDFLARE_ACCOUNT_ID`: Your Cloudflare account ID
+
+### Getting Your Credentials
+
+1. **API Token**:
+   - Go to [Cloudflare API Tokens](https://dash.cloudflare.com/profile/api-tokens)
+   - Create a token with **Edit Cloudflare Workers** permissions
+   - Copy the token
+
+2. **Account ID**:
+   - Go to any Cloudflare page
+   - Find your Account ID in the right sidebar
+   - Or run: `wrangler whoami` after logging in
+
+3. **Add to GitHub**:
+   - Go to your repository **Settings** > **Secrets and variables** > **Actions**
+   - Click **New repository secret**
+   - Add `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID`
+
+## Custom Domain
+
+To use a custom domain (e.g., `aicodebattle.com`):
+
+1. Go to your Pages project in the Cloudflare Dashboard
+2. Navigate to **Custom domains**
+3. Add your domain
+4. Cloudflare will automatically configure the DNS
+
+## Verification
+
+After deployment, verify the site is accessible:
+
+- **Pages URL**: `https://ai-code-battle.pages.dev`
+- **Custom domain**: `https://aicodebattle.com` (if configured)
+
+## Troubleshooting
+
+### Build fails
+
+- Make sure all dependencies are installed: `cd web && npm install`
+- Check the build logs in the Cloudflare Dashboard
+
+### Authentication fails
+
+- Make sure your API token has the correct permissions
+- Verify your account ID is correct
+
+### Custom domain not working
+
+- Check DNS propagation: `dig aicodebattle.com`
+- Verify the custom domain status in the Cloudflare Dashboard
diff --git a/wrangler.toml b/wrangler.toml
new file mode 100644
index 0000000..ac68db9
--- /dev/null
+++ b/wrangler.toml
@@ -0,0 +1,5 @@
+# Cloudflare Pages Configuration
+# For manual deployment use: wrangler pages deploy web/dist --project-name=ai-code-battle
+
+name = "ai-code-battle"
+compatibility_date = "2024-01-01"