How to deploy a React app for free

Filed under Guide

By Gerald · 17 June 2026

Code editor with React component code visible on screen

You have built a React app. Now you need to put it online. This guide covers three platforms that will host it for free: Vercel, Netlify, and Cloudflare Pages. Each takes under ten minutes to set up. The steps work for apps built with Vite, Create React App, or most other React setups.

You do not need to pay to host a React app. All three platforms offer generous free tiers that handle production traffic for small projects.

Before you start

Make sure your project is in a Git repository on GitHub, GitLab, or Bitbucket. All three platforms deploy from Git, so this is a requirement. If your project is not in Git yet, initialise it and push it before proceeding.

Check that your build command works locally. For Vite, this is usually npm run build. For Create React App, it is also npm run build. The output should appear in a dist or build folder depending on your setup.

If your app uses environment variables, check that they are defined in your code correctly. You will add them to the hosting platform's dashboard during setup.

Option 1: Vercel

Terminal window showing successful deployment output — Deploying a React app should take minutes, not hours.

Vercel is the fastest option for most React apps, especially if you use Vite or Next.js.

Go to vercel.com and sign up. You can use your GitHub account.
Click "Add New Project" and import your Git repository.
Vercel will detect your framework automatically. For Vite, it sets the build command to vite build and the output directory to dist. For Create React App, it sets them to react-scripts build and build.
If your app needs environment variables, add them in the project settings before deploying. Click the "Environment Variables" section and add each key and value.
Click "Deploy". The first build takes one to two minutes.
Vercel gives you a live URL immediately. Custom domains can be added in the project settings.

Every push to your main branch triggers a new deployment. Pull requests get preview URLs automatically. This workflow is hard to beat for active development.

The free tier includes 100 GB bandwidth per month and unlimited personal projects. That is enough for most prototypes, portfolios, and small production apps.

Option 2: Netlify

Netlify is a close alternative with excellent form handling and a mature ecosystem.

Go to netlify.com and sign up with your Git provider.
Click "Add new site" and choose "Import an existing project".
Select your Git repository and authorize Netlify to access it.
Netlify will try to detect your build settings. For Vite, set the build command to npm run build and the publish directory to dist. For Create React App, use npm run build and build.
Add environment variables in the site settings under "Environment" if your app needs them.
Click "Deploy site". The build takes a minute or two.
Netlify assigns a random subdomain. You can change it in the site settings or add a custom domain.

Netlify also deploys on every Git push and offers deploy previews for pull requests. The form handling feature is unique: add a netlify attribute to any HTML form and submissions are captured without a backend.

The free tier includes 100 GB bandwidth and 300 build minutes per month. The build minute limit is tighter than Vercel, so frequent deploys on large projects may need the Pro plan.

Option 3: Cloudflare Pages

Cloudflare Pages is the best value for global speed and generous limits.

Go to the Cloudflare Pages dashboard and sign in or create an account.
Click "Create a project" and connect your GitHub or GitLab account.
Select your repository.
In the build settings, set the build command to npm run build. For Vite, set the build output directory to dist. For Create React App, set it to build.
Add environment variables in the "Environment variables" section of the build configuration.
Click "Save and Deploy". The first build takes a few minutes.
Cloudflare Pages gives you a .pages.dev URL. Custom domains can be added in the project settings.

Cloudflare Pages includes unlimited bandwidth on the free tier, which is exceptional. It also integrates with Cloudflare Workers if you later need serverless functions. The global CDN is one of the fastest available.

The tradeoff is a slightly more complex dashboard and a smaller ecosystem of tutorials and plugins.

What happens after deploy

Once your app is live, all three platforms give you:

Automatic HTTPS on the default URL and any custom domain you add.
CDN distribution so your app loads quickly in most regions.
Rollback to previous deployments if a new build breaks something.
Basic analytics on requests and bandwidth usage.

You do not need to configure a server or manage SSL certificates. The platform handles it.

Troubleshooting common issues

Build fails with "command not found" Make sure your package.json includes the build command. For Vite, check that vite is in devDependencies. For Create React App, check that react-scripts is in dependencies. Also check that the platform is using the correct Node.js version. Most support version selection in the project settings.

Blank page after deploy This usually means the publish directory is wrong. Vite outputs to dist. Create React App outputs to build. Double-check the setting in your platform's dashboard. If the directory is correct, check the browser console for 404 errors on your JavaScript bundles.

Routing breaks on refresh Single-page applications need redirect rules. On Netlify, add a _redirects file to your public folder with the line /* /index.html 200. On Vercel, this is handled automatically for most React setups. On Cloudflare Pages, add a _redirects file or configure redirects in the dashboard.

Environment variables not available If your app uses environment variables, add them in the platform dashboard. They are not read from your local .env file during the build. Restart the deployment after adding them. Also check that your code references them correctly, for example import.meta.env.VITE_API_URL for Vite or process.env.REACT_APP_API_URL for Create React App.

Large bundle size warnings If your build output is unusually large, check your dependencies. Some packages bloat the bundle. Use a tool like vite-bundle-visualizer or the built-in Create React App analyzer to inspect what is taking up space. Large bundles slow down the initial load.

Which platform should you choose

Pick Vercel if you want the fastest setup and the smoothest React integration. Preview deployments and the developer experience are the best in the group.

Pick Netlify if you need built-in form handling or prefer a more mature ecosystem with extensive documentation and community support.

Pick Cloudflare Pages if you expect global traffic and want the most generous free tier. The unlimited bandwidth is hard to beat.

All three are good enough that you will not regret the choice. If you are unsure, start with Vercel. You can always migrate later.

How Flow is deployed

Flow is a React app built with Vite and deployed to Vercel. The setup followed the steps above: connect the GitHub repo, confirm the build settings, and deploy. It took under five minutes.

That choice was driven by the development workflow rather than cost. Preview deployments let me test every pull request on a live URL before merging. That safety net is worth more than the marginal savings of another platform.

If you are building a React app and want a model to follow, Flow is one example of a Vite app running on Vercel. The same steps would work on Netlify or Cloudflare Pages with only minor adjustments to the build output directory.

Frequently asked questions

Can I deploy a React app for free? Yes. Vercel, Netlify, and Cloudflare Pages all offer free tiers that include enough bandwidth and builds for small to medium React apps.

Which platform is best for React? Vercel is the smoothest for React and Vite apps. Netlify is excellent if you need forms. Cloudflare Pages is best for global speed and cost. All three work well.

How do I deploy a Vite app? The process is the same as for Create React App. Connect your Git repo, set the build command to npm run build, and set the output directory to dist. Vercel and Netlify detect Vite automatically.

Do I need a custom domain? No. All three platforms give you a free subdomain that works immediately. Custom domains are optional and easy to add later.

Can I deploy without Git? Yes, though it is less convenient. Netlify and Vercel support drag-and-drop folder uploads. Cloudflare Pages requires Git for automatic deploys but supports manual uploads through Wrangler. Using Git is strongly recommended for any project you plan to update.

What about Next.js? Next.js deploys best on Vercel because Vercel owns the framework. It also works on Netlify and Cloudflare Pages with some configuration differences. See the Vercel review for more detail.

My verdict

Deploying a React app for free is straightforward. Pick a platform, connect your Git repo, and deploy. Vercel, Netlify, and Cloudflare Pages all handle the hard parts. The difference is in the details: Vercel for speed, Netlify for forms, Cloudflare for global reach. Start with one, ship your app, and worry about optimizing the choice when you have traffic that justifies the effort.