Deploy guides

Deploy a Lovable app to Cloudflare Pages

Cheapest at scale: free unlimited static bandwidth, commercial use fine.

Specific to Lovable + Cloudflare Pages
  • Lovable's external hosting guide lists Cloudflare as auto-detected for TanStack Start; build command npm run build, output dist.
  • Older Vite SPA projects: Cloudflare Pages serves index.html for unknown paths when there's no 404.html, so client routes work out of the box.
Need an always-on server?

Cloudflare Pages doesn't run always-on servers. If your project has a long-running backend (websockets, bots, background jobs), use Railway or Render for that part.

Step by step

  1. Check your project type

    • TanStack Start (new projects): package.json lists @tanstack/react-start or @lovable.dev/vite-tanstack-config; there are files under src/routes/.
    • React + Vite (older projects): vite.config.ts and index.html at the repo root, no src/routes/ folder, build output is dist/.

  2. Get the code onto GitHub

    • Connect GitHub (available on all plans): Project → Settings/Connectors → GitHub → Connect project. Lovable creates a repo and keeps it in two-way sync.
    • Downloading the codebase as a file and editing code in Lovable require a paid plan.

  3. Create the project on Cloudflare Pages

    Dashboard → Workers & Pages → Create → Pages → Connect to Git, choose the repository, pick the framework preset.

  4. Check the build settings

    React (Vite) preset: build command npm run build, build directory dist.

    For Lovable: build command npm run build, output dist (Netlify / Cloudflare / static). On Vercel leave Output Directory empty for TanStack projects.

  5. Add environment variables before the first build

    In Cloudflare Pages: Workers & Pages → your project → Settings → Environment variables. Copy these from Lovable:

    • VITE_SUPABASE_URL
    • VITE_SUPABASE_PUBLISHABLE_KEY
    • VITE_SUPABASE_PROJECT_ID
    • SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY (server-side, TanStack Start projects)

    Changed a value later? Rebuild. Vite bakes variables in at build time. Troubleshoot missing env vars

  6. Make page refreshes work (Usually nothing to do)

    (none) 
    # No config needed: if there is no top-level 404.html,
# Cloudflare Pages serves index.html for unknown routes.
# If you DO ship a 404.html, add public/_redirects with:
/*  /index.html  200

    Server-rendered projects (TanStack Start, Next.js) don't need this. Cloudflare Pages docs (opens in a new tab)

  7. Update login redirect URLs

    Add your new Cloudflare Pages URL (and later your custom domain) to your auth provider's allowed URLs. In Supabase: Authentication → URL Configuration. Redirect troubleshooting · Check RLS before going live

  8. Add your domain

    Your project → Custom domains → Set up a custom domain. Easiest if the domain's DNS is on Cloudflare (Cloudflare Registrar sells domains at cost).

What it will cost

Free tier Free: unlimited sites, seats, requests and bandwidth for static assets. Paid from $5/mo: Workers Paid: $5/month minimum per account — 10M requests/month included, then $0.30 per extra million. Static asset requests stay free.. Checked 17 Oct 2026 on Cloudflare Pages's pricing page (opens in a new tab).

  • If your project has no top-level 404.html, Pages treats it as a single-page app and serves / for unknown paths automatically.

Other options for Lovable