Deploy Claude AI Code & Unblock Apps on Cloudflare Edge - Full Guide

Last tested: November 2025 | Node.js: v18.x/v20.x | Cloudflare Dashboard: Current version | Wrangler CLI: v3.x

Building apps with Claude Code or OpenAI Codex is powerful, but deploying them shouldn't be a headache. Whether you've generated a React frontend with Claude Code, built an API with Codex, or created a full-stack app using AI-assisted development, Cloudflare Pages and Cloudflare Workers offer an excellent hosting platform—fast, free (generous tier), and globally distributed.

This guide walks you through deploying AI-generated projects to Cloudflare's edge network, from static sites to dynamic APIs. You'll learn how to set up Cloudflare Pages for frontend hosting, use Cloudflare Workers for backend logic, secure your API keys, and troubleshoot common deployment issues.

Who This Guide Is For

This guide is for you if:

• You've built something with Claude Code, Codex, or Copilot and need to deploy it
• You want free, fast hosting with a generous free tier
• You're looking for an alternative to Vercel/Netlify with better performance
• You need to deploy both frontend and API endpoints

You'll need:

• A project built with any AI coding tool (React, Vue, vanilla JS, etc.)
• Basic Git knowledge
• A Cloudflare account (free)
• Node.js installed locally

What you'll learn:

• Deploy static sites to Cloudflare Pages in under 10 minutes
• Set up edge functions with Workers for API endpoints
• Properly secure API keys and environment variables
• Fix common deployment errors that AI code generators create

Why Deploy AI-Generated Projects on Cloudflare

Cloudflare isn't just another hosting platform—it's a global edge network that runs your code in 300+ cities worldwide. For AI-generated projects, this matters.

Edge Performance and Global Routing for AI Apps

When you deploy to Cloudflare Pages or Cloudflare Workers, your application runs on Cloudflare's edge network, which means:

• Sub-50ms response times globally (your code runs close to users)
• Automatic DDoS protection and security (built into every deployment)
• Zero cold starts for Pages (instant responses)
• Minimal cold starts for Workers (typically <10ms)

Performance metrics from my production deployments:

• TTFB (Time to First Byte): AWS us-east: 180ms → Cloudflare: 35ms (5x faster)
• Global latency: 95th percentile under 50ms from any continent
• Build times: Vercel: 2-3 minutes → Cloudflare: 45 seconds
• Monthly costs: AWS: $47/month → Cloudflare: $0 (free tier handles 500K requests/day)

For AI-powered apps that might call Claude, OpenAI, or other APIs, reducing latency on the hosting side means your users spend less time waiting overall.

Free Tier Limits and Scalability for Claude/Codex Projects

Both Cloudflare Pages and Workers offer generous free tiers:

Cloudflare Pages (Free):

• Unlimited sites and requests
• 500 builds per month
• 25 MiB file size limit per deployment
• 20,000 files per deployment
• Automatic HTTPS and CDN
• Unlimited bandwidth

Cloudflare Workers (Free):

• 100,000 requests per day
• 10ms CPU time per request
• 128MB memory
• 1GB KV storage (key-value store)
• Automatic HTTPS

For most personal projects and MVPs, you'll never hit these limits. Even production apps can run for free.

Comparison: Cloudflare vs Vercel vs Netlify

Verdict: For static sites built with Claude Code or Codex, Cloudflare Pages is unbeatable (unlimited requests/bandwidth). For AI APIs or backend logic, Cloudflare Workers offers better performance than Vercel/Netlify edge functions.

Want more hosting comparisons? Check out our guides on deploying to Vercel, Firebase, and more.

Preparing Your Claude or Codex Project

Before deploying, you need to organize your AI-generated code for Cloudflare.

Exporting Code Safely from Claude or Codex

From Claude Code:

1. If using Claude.ai's code generation, copy your code into local files
2. Organize into a standard project structure:

   my-project/
   ├── src/
   ├── public/
   ├── package.json
   ├── vite.config.js (or equivalent)
   └── README.md

3. Ensure you have a package.json with build scripts

From OpenAI Codex (via GitHub Copilot, ChatGPT, or API):

1. Save generated code to your local development environment
2. Verify all dependencies are in package.json
3. Test locally before deploying:

   npm install
   npm run dev

From ChatGPT Code Interpreter:

1. Download generated files as a ZIP
2. Extract and organize into a proper project structure
3. Add missing config files (package.json, build configs)

Organizing Your Repo for Cloudflare Pages

Cloudflare Pages expects a standard build output. Common frameworks and their outputs:

Make sure your AI-generated project follows one of these patterns. If Claude or Codex generated custom build scripts, verify they work:

# Test your build locally
npm run build

# Verify output directory exists
ls -la dist/  # or build/, out/, etc.

Adding Environment Variables for API Keys and Secrets

AI apps often need API keys (for Claude, OpenAI, databases, etc.). Never commit these to Git.

Create a .env.local file (gitignored):

# .env.local
VITE_CLAUDE_API_KEY=sk-ant-...
VITE_OPENAI_API_KEY=sk-...
VITE_SUPABASE_URL=https://...
VITE_SUPABASE_ANON_KEY=eyJ...

For Vite projects, use VITE_ prefix. For Next.js, use NEXT_PUBLIC_ prefix.

In your code:

// Access environment variables
const apiKey = import.meta.env.VITE_CLAUDE_API_KEY // Vite
// or
const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY // Next.js

Add .env.local to .gitignore:

echo ".env.local" >> .gitignore

You'll add these as Cloudflare environment variables later.

Deploying to Cloudflare Pages

Cloudflare Pages is the easiest way to deploy static sites and frameworks. It's ideal for frontends generated by Claude Code or Codex.

Connect Your GitHub Repository

First, push your code to GitHub:

# Initialize Git if not already done
git init

# Add all files
git add .

# Commit
git commit -m "Initial commit: Claude Code generated project"

# Create a new repository on GitHub, then:
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git
git branch -M main
git push -u origin main

Now connect to Cloudflare:

1. Log in to Cloudflare Dashboard
2. Click "Workers & Pages" in the left sidebar
3. Click "Create application"
4. Select the "Pages" tab
5. Click "Connect to Git"
6. Authorize Cloudflare to access your GitHub account
7. Select your repository
8. Click "Begin setup"

Configure Build Settings for Static or Framework Projects

Cloudflare will try to auto-detect your framework. Verify or manually set:

For Vite projects (common with Claude Code):

• Framework preset: Vite
• Build command: npm run build
• Build output directory: dist

For React (Create React App):

• Framework preset: Create React App
• Build command: npm run build
• Build output directory: build

For Next.js (static export):

• Framework preset: Next.js (Static HTML Export)
• Build command: npx next build && npx next export
• Build output directory: out

For plain HTML/CSS/JS:

• Framework preset: None
• Build command: Leave blank
• Build output directory: . (or the folder containing index.html)

Environment variables: Add your API keys here (these replace .env.local):

1. Scroll to "Environment variables"
2. Click "Add variable"
3. Add each variable:
   • Variable name: VITE_CLAUDE_API_KEY
   • Value: sk-ant-...
4. Set for both "Production" and "Preview" environments

Click "Save and Deploy".

Common Issues: Missing Build Output or Wrong Path

Build fails with "No index.html found":

• Verify your build output directory is correct
• Check the build logs: does npm run build succeed?
• Common mistakes:
  • Set dist when it should be build
  • Set build when it should be out

Solution: Check your build config file:

# For Vite, check vite.config.js
# Look for:
build: {
  outDir: 'dist'  // <-- This is your output directory
}

Build succeeds but site shows blank page:

• Check browser console for errors (F12)
• Common issue: Base URL mismatch

For Vite, if deploying to a subdirectory, set base in vite.config.js:

export default {
  base: '/',  // Use '/' for root domain or subdomain
}

Environment variables not working:

• Verify variable names match exactly (case-sensitive)
• For Vite: Must start with VITE_
• For Next.js: Must start with NEXT_PUBLIC_
• Redeploy after adding variables (Cloudflare requires rebuild)

Preview Deployments & Continuous Updates

Every time you push to your main branch, Cloudflare automatically rebuilds and deploys.

For feature branches (e.g., dev, staging):

1. Push to a non-main branch:

   git checkout -b new-feature
   git push origin new-feature

2. Cloudflare creates a preview deployment
3. Get a unique URL like abc123.your-project.pages.dev
4. Test before merging to main

Disable automatic deployments: In Pages settings > Builds & deployments > Disable "Automatic git deployments" if you want manual control.

Adding Logic with Cloudflare Workers

For AI apps that need backend APIs, authentication, or server-side logic, Cloudflare Workers run JavaScript/TypeScript at the edge.

Using Wrangler CLI for Local Testing and Deploys

Install Wrangler (Cloudflare's CLI):

# Install globally
npm install -g wrangler

# Verify installation
wrangler --version

# Log in to Cloudflare
wrangler login

Create a new Worker:

# Create a new Worker project
wrangler init my-ai-api

# Choose options:
# - Would you like to use TypeScript? Yes
# - Would you like to create a Worker? Yes
# - Would you like to install dependencies? Yes

This creates:

my-ai-api/
├── src/
│   └── index.ts
├── wrangler.toml
└── package.json

Running AI APIs at the Edge (Claude, Codex, or GPT Endpoints)

Here's how to build an AI API endpoint using Cloudflare Workers:

Example: Claude API proxy (src/index.ts):

export interface Env {
  CLAUDE_API_KEY: string
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // CORS headers
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    }

    // Handle CORS preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders })
    }

    // Only allow POST
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405 })
    }

    try {
      const { prompt } = await request.json()

      // Call Claude API
      const response = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': env.CLAUDE_API_KEY,
          'anthropic-version': '2023-06-01',
        },
        body: JSON.stringify({
          model: 'claude-3-5-sonnet-20241022',
          max_tokens: 1024,
          messages: [{ role: 'user', content: prompt }],
        }),
      })

      const data = await response.json()

      return new Response(JSON.stringify(data), {
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      })
    } catch (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 500,
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      })
    }
  },
}

Add your API key to Wrangler:

# Set a secret (never commit this)
wrangler secret put CLAUDE_API_KEY
# Paste your Claude API key when prompted

Test locally:

wrangler dev

This starts a local server at http://localhost:8787. Test with curl:

curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Hello Claude!"}'

Deploy to Cloudflare:

wrangler deploy

Your Worker is now live at https://my-ai-api.YOUR-SUBDOMAIN.workers.dev.

Combining Pages + Workers for Hybrid Apps

You can use Cloudflare Pages for your frontend and Workers for your backend API.

Architecture:

Frontend (Pages): your-app.pages.dev
Backend (Worker): api.your-app.workers.dev

In your frontend code:

// Call your Worker from Pages
const response = await fetch('https://api.your-app.workers.dev', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: userInput }),
})

const data = await response.json()

Better: Use Pages Functions (Workers built into Pages):

Cloudflare Pages can run Workers functions directly:

1. Create a functions directory in your Pages project:

   my-project/
   ├── src/
   ├── public/
   ├── functions/
   │   └── api/
   │       └── chat.ts
   └── package.json

2. Add your function (functions/api/chat.ts):

   export async function onRequestPost(context) {
     const { request, env } = context
     const { prompt } = await request.json()
   
     const response = await fetch('https://api.anthropic.com/v1/messages', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'x-api-key': env.CLAUDE_API_KEY,
         'anthropic-version': '2023-06-01',
       },
       body: JSON.stringify({
         model: 'claude-3-5-sonnet-20241022',
         max_tokens: 1024,
         messages: [{ role: 'user', content: prompt }],
       }),
     })
   
     return response
   }

3. Call from your frontend:

   // No CORS issues - same domain
   const response = await fetch('/api/chat', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ prompt: userInput }),
   })

Pages Functions run on the same domain, so no CORS issues.

Using KV / D1 for Caching or Persistent Storage

Cloudflare KV (Key-Value store) is excellent for caching AI responses:

export interface Env {
  CACHE: KVNamespace
  CLAUDE_API_KEY: string
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const { prompt } = await request.json()

    // Check cache first
    const cached = await env.CACHE.get(prompt)
    if (cached) {
      return new Response(cached, {
        headers: { 'Content-Type': 'application/json' },
      })
    }

    // Call Claude API
    const response = await fetch('https://api.anthropic.com/v1/messages', {
      // ... Claude API call
    })
    const data = await response.json()

    // Cache for 1 hour (3600 seconds)
    await env.CACHE.put(prompt, JSON.stringify(data), { expirationTtl: 3600 })

    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' },
    })
  },
}

Create a KV namespace:

# Create KV namespace
wrangler kv:namespace create CACHE

# Add to wrangler.toml
[[kv_namespaces]]
binding = "CACHE"
id = "your-namespace-id"

Cloudflare D1 (SQL database) for persistent data:

# Create D1 database
wrangler d1 create my-database

# Add to wrangler.toml
[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-database-id"

Use in your Worker:

// Query D1
const results = await env.DB.prepare(
  'SELECT * FROM conversations WHERE user_id = ?'
).bind(userId).all()

Custom Domains, SSL, and Security with Cloudflare

Mapping Your Domain to Cloudflare Pages

If your domain is on Cloudflare DNS:

1. In your Pages project, click "Custom domains"
2. Click "Set up a custom domain"
3. Enter your domain (e.g., myapp.com or www.myapp.com)
4. Cloudflare automatically creates DNS records
5. SSL is enabled immediately

If your domain is NOT on Cloudflare:

1. Add custom domain in Pages settings
2. Cloudflare shows you DNS records to add:
   • CNAME: www → your-project.pages.dev
3. Go to your domain registrar (GoDaddy, Namecheap, etc.)
4. Add the CNAME record
5. Wait for DNS propagation (5 minutes to 24 hours)

Pro tip: Transfer your domain to Cloudflare Registrar for at-cost pricing (no markup) and instant DNS updates.

Enforcing HTTPS and Zero-Trust Edge Rules

Cloudflare Pages automatically enforces HTTPS. For Workers, add:

export default {
  async fetch(request: Request): Promise<Response> {
    // Redirect HTTP to HTTPS
    const url = new URL(request.url)
    if (url.protocol !== 'https:') {
      return Response.redirect(`https://${url.host}${url.pathname}`, 301)
    }

    // Your Worker logic
    return new Response('Hello World')
  },
}

Add security headers:

const securityHeaders = {
  'X-Frame-Options': 'DENY',
  'X-Content-Type-Options': 'nosniff',
  'Referrer-Policy': 'strict-origin-when-cross-origin',
  'Permissions-Policy': 'geolocation=(), microphone=(), camera=()',
  'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline'",
}

return new Response(body, { headers: securityHeaders })

Protecting Claude / Codex API Keys and Tokens

Never expose API keys in frontend code:

// ❌ BAD - Exposed to users
const apiKey = 'sk-ant-...'

// ✅ GOOD - Use Workers as a proxy
const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ prompt }),
})

Use Cloudflare secrets for sensitive data:

# For Workers
wrangler secret put CLAUDE_API_KEY

# For Pages Functions
# Add in Cloudflare Dashboard: Pages > Settings > Environment variables
# Check "Encrypt" for sensitive values

Rate limiting to prevent API abuse:

// Simple rate limiting with KV
const clientIP = request.headers.get('CF-Connecting-IP')
const rateLimitKey = `ratelimit:${clientIP}`

const requests = await env.CACHE.get(rateLimitKey)
if (requests && parseInt(requests) > 10) {
  return new Response('Rate limit exceeded', { status: 429 })
}

await env.CACHE.put(rateLimitKey, (parseInt(requests || '0') + 1).toString(), {
  expirationTtl: 60, // 10 requests per minute
})

Troubleshooting Common Deployment Issues with Cloudflare

Build Logs Show "Missing Build Command"

Error: Build failed: No build command specified

Cause: Cloudflare doesn't know how to build your project

Solutions:

1. Verify package.json has a build script:

   {
     "scripts": {
       "build": "vite build"
     }
   }

2. In Pages settings, explicitly set build command: npm run build
3. If using a different package manager:
   • Yarn: yarn build
   • pnpm: pnpm build

Wrangler Publish Fails with Authentication Error

Error: Error: Not authenticated. Please run 'wrangler login'

Solution:

# Log out and log back in
wrangler logout
wrangler login

# Verify authentication
wrangler whoami

For CI/CD (GitHub Actions), use API tokens:

1. Create API token: Cloudflare Dashboard > My Profile > API Tokens
2. Use "Edit Cloudflare Workers" template
3. Add to GitHub secrets as CLOUDFLARE_API_TOKEN

Environment Variables Not Applied in Production

Problem: Code works locally but fails in production

Common mistakes:

1. Forgot to redeploy after adding variables: Cloudflare requires a rebuild

   • Solution: Make a dummy commit and push, or click "Retry deployment"

2. Variable name mismatch:

   • Local: VITE_API_KEY
   • Cloudflare: API_KEY
   • Solution: Names must match exactly (case-sensitive)

3. Wrong environment (Production vs Preview):

   • Solution: Add variables to both environments in Pages settings

4. Accessing in wrong way:

   // ❌ Wrong - Won't work in Workers
   const key = process.env.API_KEY
   
   // ✅ Correct - Use env binding
   export default {
     async fetch(request, env) {
       const key = env.API_KEY
     }
   }

CORS Errors Between Pages and Workers

Error: Access to fetch at 'https://api.workers.dev' from origin 'https://pages.dev' has been blocked by CORS policy

Solution: Add CORS headers to your Worker:

const corsHeaders = {
  'Access-Control-Allow-Origin': '*', // Or specify your Pages domain
  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
}

export default {
  async fetch(request: Request): Promise<Response> {
    // Handle preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders })
    }

    const response = new Response('Hello')

    // Add CORS headers to all responses
    Object.entries(corsHeaders).forEach(([key, value]) => {
      response.headers.set(key, value)
    })

    return response
  },
}

Better solution: Use Pages Functions (same domain, no CORS issues).

Automating Your Workflow with Cloudflare

GitHub Actions CI/CD with Wrangler

Automatically deploy your Worker on every push:

Create .github/workflows/deploy.yml:

name: Deploy to Cloudflare Workers

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

Setup:

1. Create Cloudflare API token (Dashboard > My Profile > API Tokens)
2. Add to GitHub repo: Settings > Secrets > New repository secret
3. Name it CLOUDFLARE_API_TOKEN
4. Push to main branch → auto-deploy

Automating Claude → Cloudflare Pipeline

Full automation from code generation to deployment:

name: AI-Generated Code Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-ai-project
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

Scheduling Worker Cron Triggers

Run Workers on a schedule (great for AI-powered tasks):

In wrangler.toml:

[triggers]
crons = ["0 */6 * * *"]  # Every 6 hours

In your Worker:

export default {
  async scheduled(event: ScheduledEvent, env: Env): Promise<void> {
    // Run AI task every 6 hours
    const prompt = "Summarize the day's news"

    const response = await fetch('https://api.anthropic.com/v1/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': env.CLAUDE_API_KEY,
        'anthropic-version': '2023-06-01',
      },
      body: JSON.stringify({
        model: 'claude-3-5-sonnet-20241022',
        max_tokens: 1024,
        messages: [{ role: 'user', content: prompt }],
      }),
    })

    const data = await response.json()

    // Store result in KV
    await env.CACHE.put('daily-summary', JSON.stringify(data))
  },
}

FAQs

Can I host Claude Code projects for free on Cloudflare?

Yes! Cloudflare Pages offers unlimited sites and requests for free. The free tier includes 500 builds per month, which is more than enough for personal projects and MVPs. Most Claude Code-generated frontends fit well within the free tier.

Is Cloudflare Pages good for dynamic Codex-generated apps?

Cloudflare Pages works well for static sites and frameworks with static builds (React, Vue, Svelte, etc.). For dynamic apps with server-side logic, combine Pages (frontend) with Workers (backend API). Workers run JavaScript/TypeScript at the edge and can handle API calls, database queries, and authentication.

How do I connect my Claude Code backend API to Cloudflare Workers?

If Claude generated a backend API (Node.js/Express), you have two options:

1. Rewrite for Workers: Adapt your API to Cloudflare Workers (use fetch handlers instead of Express routes)
2. Deploy elsewhere: Keep your backend on a traditional platform (Railway, Render) and use Workers as a proxy or for edge functions only

For most use cases, option 1 gives better performance (edge deployment).

How to fix Wrangler CLI authentication errors?

# Log out and back in
wrangler logout
wrangler login

# If still failing, manually set API token
wrangler login --api-token YOUR_API_TOKEN

# Verify it works
wrangler whoami

For CI/CD, use API tokens (not OAuth) in environment variables.

Can Cloudflare host Python or Node AI apps?

Python: Not directly. Cloudflare Workers run JavaScript/TypeScript/Rust/C/C++ (compiled to WebAssembly). For Python AI apps, deploy to Railway, Render, or Fly.io instead.

Node.js: Yes, but Workers use a subset of Node.js APIs. Standard Node modules won't work. Use Workers-compatible libraries or rewrite for the Workers runtime. See Cloudflare Workers runtime docs.

Conclusion

Deploying AI-generated projects to Cloudflare gives you enterprise-grade performance for free. Whether you built with Claude Code, OpenAI Codex, or GitHub Copilot, Cloudflare Pages and Workers offer:

• Lightning-fast edge deployment (300+ global locations)
• Generous free tiers (unlimited requests for Pages, 100k/day for Workers)
• Automatic HTTPS and security
• Easy Git integration (push to deploy)
• Advanced features (KV storage, D1 databases, cron triggers)

Quick recommendations:

• Frontend only? Use Cloudflare Pages
• Need backend APIs? Add Cloudflare Workers or use Pages Functions
• Caching AI responses? Use KV storage
• Database needed? Use D1 (SQL) or connect to external databases

For more deployment guides, check out:

• Complete Guide: Deploying Lovable Projects to Cloudflare
• 3 Ways to Move Your Website to Free Hosting
• 7 More Free Hosting Options

Have questions about deploying your specific AI project? Drop a comment below!

Article Updates

• November 2025: SEO optimization and updated keywords for Claude AI and Cloudflare edge deployment
• October 2025: Updated for Wrangler v3 and latest Cloudflare Dashboard UI
• October 2025: Added performance metrics from production deployments
• October 2025: Added "Who This Is For" section and clearer prerequisites
• October 2025: Verified all code examples with Node.js 18.x and 20.x

Further reading:

• Cloudflare Pages Documentation
• Cloudflare Workers Documentation
• Anthropic Claude API Docs
• OpenAI API Documentation