In this guide
Cloudflare Pages is a strong home for AI-generated frontends: fast global edge hosting, a generous free tier, automatic SSL, and simple git-based deploys. This guide takes a Vite + React app from local code to a live, custom-domain deployment.
The steps assume a standard Vite build that outputs static files to a dist folder, which is the default for Vite + React projects and what most AI builders generate.
Why Cloudflare Pages
Pages serves your static frontend from Cloudflare's global edge network, which means low latency for users worldwide. It deploys directly from a connected git repository, rebuilds automatically on each push, and issues SSL certificates for custom domains without manual configuration. For a static Vite frontend, it is one of the simplest and cheapest production hosts available.
Step 1: Push your project to GitHub
Cloudflare Pages deploys from a connected repository, so your code needs to live on GitHub (or another supported provider). If your project is not yet a git repository, initialise it, commit, and push to a new repo.
git init
git add -A
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/you/your-repo.git
git push -u origin mainStep 2: Create a Pages project
In the Cloudflare dashboard, create a new Pages project and connect your GitHub repository. When prompted for build settings, use the standard Vite configuration.
- 1
Framework preset
Choose Vite (or 'None' and set the fields manually).
- 2
Build command
npm run build
- 3
Build output directory
dist
Step 3: Handle client-side routing
If your app uses client-side routing (for example React Router), direct visits to sub-routes can 404 unless every path is served the app's index.html. On Cloudflare Pages, add a redirects rule so the SPA handles routing itself.
# public/_redirects
/* /index.html 200Tip
Put the _redirects file in your public/ folder so Vite copies it into dist on build. Without it, refreshing a deep link like /reviews/lovable can return a 404.
Step 4: Set environment variables
Add any keys your app needs — such as a Supabase URL and anon key, or a Stripe publishable key — as environment variables in the Pages project settings rather than committing them to your repo. For Vite, client-exposed variables must be prefixed with VITE_ to be included in the build.
Watch out
Only ever expose publishable/anon keys to the client. Secret keys (Stripe secret key, Supabase service_role key) must never be set as client-side variables or committed to the repo.
Step 5: Connect your custom domain
Once the first deploy succeeds, open the project's Custom Domains tab and add your domain. If your domain's DNS is managed by Cloudflare, this is largely automatic; otherwise follow the DNS records Cloudflare provides. SSL is issued automatically, so your site is served over HTTPS without extra setup.
Key takeaways
- Cloudflare Pages gives static Vite frontends fast edge hosting with automatic SSL.
- Deploys come from a connected GitHub repo and rebuild on every push.
- Use build command npm run build and output directory dist.
- Add a _redirects rule for client-side routing to avoid 404s on deep links.
- Set keys as environment variables; expose only publishable keys to the client.
Frequently asked questions
Set the build command to npm run build and the build output directory to dist. These are the defaults for a standard Vite + React project and what most AI builders generate.