Complete Guide: Deploy Your Lovable Project to Cloudflare (Pages and Workers)

If you've built a website with Lovable's AI platform and want to host it on Cloudflare's blazing-fast global network, you're in the right place. This comprehensive guide covers everything you need to know about deploying Lovable projects to Cloudflare—whether you choose the simplicity of Cloudflare Pages or the power of Cloudflare Workers.

Why Choose Cloudflare for Your Lovable Project?

Cloudflare offers two excellent hosting solutions, both with generous free tiers:

Cloudflare Pages (Recommended for most users):

• Unlimited sites and requests
• Automatic Git integration and deployments
• 500 builds per month (free tier)
• Global CDN with 300+ locations
• Free SSL certificates
• Simple, zero-configuration deployment

Cloudflare Workers (For advanced use cases):

• 100,000 requests per day (free tier)
• Edge computing capabilities
• Run code closer to your users
• Built-in KV storage (1GB free)
• More control over caching and routing

Both options deliver sub-50ms response times globally and cost absolutely nothing for most personal and small business sites.

Can You Move a Lovable Project to Cloudflare?

Yes! Lovable projects export as standard React/TypeScript applications that deploy perfectly to Cloudflare. You can use either Cloudflare Pages (easier) or Cloudflare Workers (more powerful), and both include:

• Free hosting with no credit card required
• Custom domain support
• Automatic SSL certificates
• Global CDN delivery
• No vendor lock-in—your code, your infrastructure

This guide covers both methods with complete step-by-step instructions.

Method 1: Cloudflare Pages (Recommended)

Cloudflare Pages is the easiest way to deploy your Lovable project. It automatically builds and deploys your site every time you push to Git.

Step 1: Export Your Lovable Project

First, you need to get your code out of Lovable:

1. Open your Lovable project
2. Click the menu icon (usually three dots or hamburger menu)
3. Select "Export" or "Download"
4. Choose "Download as ZIP"
5. Save the ZIP file to your computer
6. Extract the ZIP file to a folder

Step 2: Set Up a Git Repository

Cloudflare Pages deploys from Git repositories, so you need to push your code to GitHub, GitLab, or Bitbucket.

# Navigate to your extracted project folder
cd path/to/your-lovable-project

# Initialize a Git repository
git init

# Add all files to Git
git add .

# Create your first commit
git commit -m "Initial commit: Lovable project export"

Now create a repository on GitHub (or your preferred Git platform):

1. Go to GitHub and log in
2. Click the "+" icon in the top right
3. Select "New repository"
4. Name it (e.g., "my-lovable-site")
5. Keep it Public or Private (both work with Cloudflare)
6. Don't initialize with README, .gitignore, or license
7. Click "Create repository"

Connect your local repository to GitHub:

# Add your GitHub repository as the remote origin
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git

# Push your code to GitHub
git branch -M main
git push -u origin main

Step 3: Create a Cloudflare Account

If you don't have one already:

1. Go to Cloudflare
2. Sign up with your email
3. Verify your email address
4. Log in to the Cloudflare dashboard

Step 4: Deploy to Cloudflare Pages

Now for the magic—deploying your Lovable project:

1. In the Cloudflare dashboard, click "Workers & Pages" in the left sidebar
2. Click "Create application"
3. Select the "Pages" tab
4. Click "Connect to Git"
5. Choose your Git provider (GitHub, GitLab, or Bitbucket)
6. Authorize Cloudflare to access your repositories
7. Select the repository you just created
8. Click "Begin setup"

Step 5: Configure Build Settings

Cloudflare will try to auto-detect your framework. For most Lovable projects (typically React/Vite):

Framework preset: Vite (or select "None" if not detected)

Build command:

npm run build

Build output directory:

dist

Root directory: Leave blank (unless your code is in a subdirectory)

Environment variables: Add any required variables (like API keys)

• Click "Add variable"
• Enter VITE_API_URL or whatever your project needs
• Add the value

Note: Lovable projects typically use dist as the output directory. If your build fails, check your package.json to confirm the output directory name.

Step 6: Deploy!

Click "Save and Deploy"

Cloudflare will:

1. Clone your repository
2. Install dependencies (npm install)
3. Run your build command
4. Deploy to their global CDN
5. Give you a .pages.dev URL

The first deployment typically takes 1-3 minutes. You can watch the build logs in real-time.

Step 7: Set Up a Custom Domain (Optional)

Once deployed, you'll get a URL like your-project.pages.dev. To use your own domain:

1. In your Pages project, click "Custom domains"
2. Click "Set up a custom domain"
3. Enter your domain (e.g., example.com or www.example.com)
4. Click "Continue"

If your domain is already on Cloudflare:

• Cloudflare automatically adds the DNS records
• Your domain will be live in seconds
• SSL is automatically enabled

If your domain is NOT on Cloudflare:

• Cloudflare will show you the DNS records to add
• Go to your domain registrar (GoDaddy, Namecheap, etc.)
• Add the CNAME record Cloudflare specifies
• Wait for DNS propagation (can take up to 24 hours, usually much faster)

Automatic Deployments

The best part? Every time you push to your Git repository, Cloudflare automatically rebuilds and deploys your site:

# Make changes to your code
# Then commit and push
git add .
git commit -m "Updated homepage"
git push origin main

# Cloudflare automatically detects the push and rebuilds

You can also set up preview deployments for branches—ideal for testing before going live.

Method 2: Cloudflare Workers

For those who want more control or need edge computing capabilities, Cloudflare Workers is the way to go.

When to Use Workers Instead of Pages:

• You need to run server-side code at the edge
• You want fine-grained control over caching
• You're building an API or need request/response manipulation
• You need more than 500 builds per month
• You want to use KV storage or Durable Objects

Step 1: Install Wrangler CLI

Wrangler is Cloudflare's command-line tool for Workers:

# Install Wrangler globally
npm install -g wrangler

# Verify installation
wrangler --version

# Log in to Cloudflare
wrangler login

This opens your browser to authorize Wrangler with your Cloudflare account.

Step 2: Export and Build Your Lovable Project

# Export from Lovable (same as before)
# Extract the ZIP
# Navigate to the project folder
cd your-lovable-project

# Install dependencies
npm install

# Build your project
npm run build

This creates your production files in the dist folder (or build, depending on your setup).

Step 3: Create Wrangler Configuration

Create a wrangler.toml file in your project root:

name = "my-lovable-site"
main = "workers-site/index.js"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

Explanation:

• name: Your Worker's name (will be part of your .workers.dev URL)
• main: Path to your Worker script
• bucket: Where your built static files are located

Step 4: Create the Worker Script

Create a folder and file: workers-site/index.js

mkdir workers-site

Create workers-site/index.js with this content:

import { getAssetFromKV } from '@cloudflare/kv-asset-handler'

export default {
  async fetch(request, env, ctx) {
    try {
      // Try to serve the static asset
      return await getAssetFromKV(
        {
          request,
          waitUntil: ctx.waitUntil.bind(ctx),
        },
        {
          ASSET_NAMESPACE: env.__STATIC_CONTENT,
          ASSET_MANIFEST: __STATIC_CONTENT_MANIFEST,
        }
      )
    } catch (e) {
      // If asset not found, return 404
      // For SPAs, you might want to return index.html instead
      if (e.status === 404) {
        try {
          // Try to serve index.html for client-side routing
          const notFoundRequest = new Request(`${new URL(request.url).origin}/index.html`, request)
          return await getAssetFromKV(
            {
              request: notFoundRequest,
              waitUntil: ctx.waitUntil.bind(ctx),
            },
            {
              ASSET_NAMESPACE: env.__STATIC_CONTENT,
              ASSET_MANIFEST: __STATIC_CONTENT_MANIFEST,
            }
          )
        } catch (e) {}
      }

      return new Response('Not Found', { status: 404 })
    }
  },
}

Step 5: Install Dependencies

# Install the KV asset handler
npm install @cloudflare/kv-asset-handler

Step 6: Deploy to Cloudflare Workers

# Deploy your Worker
wrangler deploy

Wrangler will:

1. Upload your static files
2. Deploy your Worker script
3. Give you a .workers.dev URL

Your site is now live on Cloudflare's edge network!

Step 7: Custom Domain with Workers

To add a custom domain to your Worker:

1. Go to the Cloudflare dashboard
2. Click "Workers & Pages"
3. Select your Worker
4. Click "Settings" > "Domains & Routes"
5. Click "Add Custom Domain"
6. Enter your domain
7. Follow the DNS configuration instructions

If your domain is already on Cloudflare, it's automatic. Otherwise, you'll need to add DNS records at your registrar.

Need help with DNS? Check out our Managing DNS Records with the Cloudflare API guide for advanced DNS management and automation.

Troubleshooting Common Issues

Build Fails: "Command not found: npm"

Problem: Cloudflare can't find npm

Solution: Make sure your project has a package.json. Cloudflare automatically installs dependencies if it finds one.

Build Fails: "dist directory not found"

Problem: Your build output directory doesn't match what you specified

Solutions:

1. Check your vite.config.js or build config for the output directory name
2. Common alternatives: build, out, public, .output
3. Update your Cloudflare Pages build settings or wrangler.toml to match

404 Errors on Routes (SPA Routing)

Problem: Direct navigation to routes like /about returns 404

For Cloudflare Pages: Create a public/_redirects file:

/*    /index.html   200

Or create a _redirects file in your dist folder after building.

For Cloudflare Workers: The script above (in Step 4) already handles this by serving index.html for 404s.

Environment Variables Not Working

For Cloudflare Pages:

1. Go to your Pages project settings
2. Click "Environment variables"
3. Add your variables for Production and Preview environments
4. Redeploy (or push a new commit)

For Cloudflare Workers: Add to wrangler.toml:

[vars]
API_URL = "https://api.example.com"

For secrets (like API keys):

wrangler secret put API_KEY

Build Exceeds Free Tier Limit (Pages)

Problem: More than 500 builds per month

Solutions:

1. Switch to Cloudflare Workers (unlimited deploys)
2. Upgrade to Pages paid plan ($5/month for 5,000 builds)
3. Reduce commit frequency (batch changes)
4. Disable automatic deployments for non-main branches

Worker Exceeds 100,000 Requests/Day

Problem: Free tier only includes 100,000 requests per day

Solutions:

1. Switch to Cloudflare Pages (unlimited requests)
2. Upgrade to Workers paid plan ($5/month for 10 million requests)
3. Optimize caching to reduce Worker invocations

Cloudflare Shows Old Version After Deploy

Problem: Your changes aren't visible

Solutions:

1. Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
2. Check deployment status in dashboard—it might still be building
3. For Workers, purge the cache:

   wrangler deploy

4. Check if you're viewing the correct URL (.pages.dev vs custom domain)

Custom Domain Not Working

Problem: Domain doesn't resolve or shows errors

Solutions:

1. Check DNS propagation: Use whatsmydns.net
2. Verify DNS records are correct (CNAME pointing to your Pages/Workers URL)
3. For Workers, ensure your route is configured correctly
4. Wait—DNS can take up to 24 hours (usually much faster)
5. If using Cloudflare for DNS, ensure the record is "Proxied" (orange cloud)

API Calls Failing After Deployment

Problem: APIs that worked in Lovable now fail

Common causes:

1. CORS issues: Your API might not allow requests from your new domain
2. Environment variables missing: Add them in Cloudflare dashboard
3. HTTPS/HTTP mismatch: Cloudflare forces HTTPS; ensure API supports it
4. Relative URLs: Hardcoded localhost URLs need to be updated

Solution for environment variables:

// In your Lovable project, use environment variables
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000'

fetch(`${API_URL}/api/data`)

Then set VITE_API_URL in Cloudflare's environment variables.

Comparing Pages vs Workers for Lovable Projects

Recommendation: Start with Cloudflare Pages. It's simpler, has unlimited requests, and handles 99% of Lovable projects well. Only use Workers if you specifically need edge computing or have exhausted the free Pages builds.

Optimizing Your Lovable Site on Cloudflare

Enable Compression

Cloudflare automatically enables Brotli and Gzip compression, but verify:

1. Go to "Speed" > "Optimization"
2. Ensure Brotli is enabled
3. Enable "Auto Minify" for HTML, CSS, and JS

Configure Caching

For Workers, customize caching:

// In workers-site/index.js
const cacheControl = {
  browserTTL: 60 * 60 * 24, // 1 day
  edgeTTL: 60 * 60 * 24 * 30, // 30 days
  bypassCache: false,
}

return await getAssetFromKV(request, {
  cacheControl,
})

Add Security Headers

For enhanced security, add headers in your Worker:

const response = await getAssetFromKV(request)

// Clone and add headers
const newHeaders = new Headers(response.headers)
newHeaders.set('X-Frame-Options', 'DENY')
newHeaders.set('X-Content-Type-Options', 'nosniff')
newHeaders.set('Referrer-Policy', 'strict-origin-when-cross-origin')

return new Response(response.body, {
  status: response.status,
  headers: newHeaders,
})

Next Steps After Deployment

1. Set up analytics: Cloudflare provides free Web Analytics
2. Configure a firewall: Protect against bots and attacks (free tier includes basic WAF)
3. Add monitoring: Set up uptime monitoring with Cloudflare's "Health Checks"
4. Optimize images: Use Cloudflare Images or Polish for automatic image optimization
5. Consider a CDN plan: Free tier is generous, but paid plans add more features

Migrating from Lovable Hosting

If your site is currently hosted on Lovable and you want to move to Cloudflare:

1. Export your project (as described above)
2. Deploy to Cloudflare using either method
3. Test thoroughly at your .pages.dev or .workers.dev URL
4. Update DNS to point to Cloudflare (if using custom domain)
5. Monitor for any issues in the first 24 hours
6. Cancel Lovable hosting once confirmed working

Conclusion

Deploying your Lovable project to Cloudflare gives you enterprise-grade hosting for free, with global performance that rivals paid platforms. Whether you choose Cloudflare Pages for simplicity or Cloudflare Workers for power, you're getting:

• Sub-50ms response times globally
• Unlimited bandwidth (Pages) or generous free tier (Workers)
• Automatic HTTPS and SSL
• DDoS protection
• 99.99%+ uptime

For most Lovable projects, I recommend Cloudflare Pages—it's simpler, has unlimited requests, and deploys automatically from Git. Save Workers for when you truly need edge computing or advanced control.

Want to learn more about Cloudflare Workers? Our Complete Guide to Deploying Static Sites on Cloudflare Workers covers advanced patterns, performance optimization, and production best practices beyond the basics.

Have questions about deploying your specific Lovable project to Cloudflare? Drop a comment below and I'll help troubleshoot!

Frequently Asked Questions

Is migrating from Lovable to Cloudflare free? Yes, migrating from Lovable to Cloudflare is completely free. Lovable allows free project exports, and Cloudflare offers generous free hosting tiers. Cloudflare Pages provides unlimited sites and requests, while Cloudflare Workers offers 100,000 requests/day. Both include free SSL and custom domains.

How do I transfer my Lovable site to Cloudflare? Export your Lovable project as a ZIP file, extract it, push the code to GitHub, then connect your GitHub repository to Cloudflare Pages. The entire process takes about 15 minutes and is fully automated after the initial setup.

Can I use my own domain with Cloudflare hosting? Yes! Both Cloudflare Pages and Workers support custom domains with free SSL certificates. If your domain uses Cloudflare for DNS, setup is automatic. Otherwise, you'll need to add a CNAME record at your domain registrar.

What happens to my Lovable hosting after I migrate? Your original Lovable-hosted site continues to work. You can keep both running or unpublish the Lovable version once migration is complete. There's no automatic cancellation—you have full control.

Does Cloudflare work with Lovable's React/Vite projects? Absolutely. Lovable generates standard React applications using Vite, which Cloudflare fully supports. Pages auto-detects Vite projects, and Workers can serve any static build output.

Related guides:

• 3 Ways to Move Your Lovable Website and Keep Free Hosting
• 7 More Ways to Move Your Lovable Website to Free Hosting
• Lovable: From Hero to Zero with 2.0