jedarden/ai-code-battle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ai-code-battle/web/CLOUDFLARE_DEPLOYMENT.md
jedarden a23c94ad1f 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>
2026-04-08 16:53:09 -04:00

2.6 KiB
Raw Permalink Blame History

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

    npm install -g wrangler

  2. Authenticate with Cloudflare:

    wrangler login

  3. Build the site:

    cd web
npm install
npm run build

  4. Deploy to Pages:

    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:

  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