You have been working on a React application and now you're ready to actually push it to the web. What services do you use to publish your site and make it live to the world?

Whether you're ready to release your website as a finished product or you are in the process of development, let's cover the 3 of the best (and free!) ways to deploy your React application right now.

How to Deploy a React App with Cloudflare Pages

One of the newest ways to deploy your React application is with Cloudflare Pages.

Screen-Shot-2022-11-24-at-12.41.27-PM
Cloudflare Pages

Roughly 20% of all websites use Cloudflare for various reasons, often for free features such as their DDoS (Denial-of-service attack) mitigation.

Within the past couple of years, it has entered into the deployment space with Pages. Websites hosted on Cloudflare Pages are served from the Cloudflare edge network, which is one of the fastest ways to serve your website to users globally.

Screen-Shot-2022-11-24-at-12.47.53-PM
The Cloudflare edge is one the fastest networks

To get started using Cloudflare pages, all you need is a (free) Cloudflare account.

You can deploy your site to Pages by selecting a Git repository from your GitHub account. Alternatively, you can push a folder directly that includes all of your site's resources.

Screen-Shot-2022-11-24-at-12.20.19-PM
Options to deploy to Cloudflare Pages

After that, choose the framework that you are using. Pages includes options for React as well as Next.js.

Screen-Shot-2022-11-24-at-12.22.29-PM
Framework presets for Cloudflare Pages

To finish your deployment, all you have to do is hit the Deploy button. Afterwards your site will be deployed to their edge network within a couple of minutes!

Cloudflare Pages comes with built-in web analytics. But ultimately the best benefit to deploying to Cloudflare Pages is that you can deploy unlimited sites with unlimited bandwidth for free.

Screen-Shot-2022-11-24-at-1.04.33-PM
Cloudflare Pricing

There are Pro and Business tiers, but these exist for customers who would like to have more concurrent builds (to build multiple sites at once), more site builds per month, and more custom domains.

How to Deploy a React App with Vercel

Vercel is a deployment platform built by the same people responsible for the Next.js framework.

Screen-Shot-2022-11-24-at-1.10.53-PM
Vercel deployment platform

As a result, Vercel is optimized for projects that are built with Next.js. However, any React framework that you choose is supported including Create React App and Gatsby.

Out of all the deployment platforms, Vercel has the quickest deployments. A medium-sized Next.js application builds in a little over one minute.

What's powerful about Vercel is that they have a great deal of integrations that make it very easy to connect with a bunch of other services that you're likely already using or may want to use.

Integrations include databases like MongoDB or PlanetScale as well as CMS tools, monitoring tools, and developer tools.

Like Cloudflare Pages, Vercel also includes a worldwide CDN for your project to make content delivery while your site's assets very quickly, plus Git-based deployments, and built-in analytics.

Vercel analytics monitor the performance of your website along with the amount of users on your website from day-to-day.

Screen-Shot-2022-11-24-at-1.28.24-PM
Vercel Analytics

Vercel has a minimal, clean interface to manage your projects, which is more sophisticated than Cloudflare Pages.

Vercel's pricing, however, will set you back if you have either a commercial project or you use more than 100 gigabytes of bandwidth per month. In that case you must upgrade to their Pro plan, which is $20 per month.

How to Deploy a React App with Netlify

Netlify is a very similar platform to Vercel, with a number of exclusive features, such as forms and authentication.

Both Vercel and Netlify support all React frameworks, are optimized for Next.js, have a built-in CDN, and deployments are made through Git.

Netlify has a similarly sophisticated dashboard and user interface. Like Vercel, Netlify features a large number of integrations to add to your project instantly.

Screen-Shot-2022-11-24-at-12.33.09-PM
Netlify Integrations

Netlify, however, has some features such as Netlify Analytics which come at a separate price. Additionally, Netlify has a forms service which allows you to receive form submissions without any server side code or JavaScript.

Screen-Shot-2022-11-24-at-12.34.20-PM
Netlify Forms

It also includes some other solutions such as authentication with a service called Netlify identity, which is helpful if you want to authenticate users on your static site.

It also has some new features like split-testing that allow you to test one feature against another in your website.

When it comes to pricing, you can use Netlify for free even if you have a commercial product. If you exceed their 100GB free tier limit, you will need to upgrade to pro to get 1TB of bandwidth.

If you want unlimited access to features such as Netlify Forms and Identity, Netlify will set you back $99 per month, which also includes 1.5 terabytes of bandwidth per month. In short, Netlify is very competitive with Vercel with some exclusive features that come at a price.

Thanks for reading!

Hopefully this article has given you a solid overview of these different deployment methods so you can get to deploying your React app in no time.

Want to Become a Job-Ready React Developer?

If you enjoyed this React tutorial, check out my React Bootcamp.

It will give you all the training you need to:

  • Go from absolute beginner to React professional in just 30 minutes a day
  • Build 4 full-stack React projects from scratch to deployment
  • Learn a powerful stack of technologies to build any app you like

Click to join the React Bootcamp
Click to join the React Bootcamp