9 ways to deploy a React app for free

Editor’s note: This post was updated on 30 November 2023 to update the list of free deployment tools for React.

It’s time that you took your React applications out of development and into production! But the process of deploying an application built on top of a framework — such as React, Vue.js, or Angular — is much different from that of deploying a site built with HTML, CSS, and JavaScript. In this tutorial, we’ll demonstrate how to deploy a React application with nine different services.

All the services described in this post are free with no hidden credit card requirements until you pass a certain limit, which is usually based on view counts or bandwidth. I’ve also included a brief list of some other platforms that are worth checking out but didn’t quite make the list.

Let’s get started!

Vercel

Vercel is a popular choice for deploying React applications due to its seamless integration with Next.js, a framework created by the same team behind Vercel. It offers a straightforward deployment process, with a strong emphasis on supporting serverless functions.

Vercel is an excellent choice if your project is built with Next.js or if you’re planning to use serverless functions. However, if your project requires a complex backend, you might need to consider other options. Vercel offers a free hobby plan, and its Pro plan starts at $20 per user per month.

Deploying using the Vercel CLI

You can deploy on Vercel using their dashboard as well as CLI. We will briefly touch on the Vercel CLI deployment. The first step is to install Vercel globally:

npm i -g vercel

Once Vercel is installed, run the following command:

vercel login

You’ll be prompted to enter the email with which you registered on Vercel. After submitting that, you’ll receive an email to verify your login.

Next, go to your project root directory and run the following command:

vercel

You’ll be prompted to answer a few questions. First, confirm that this is the project you want to deploy:

? Set up and deploy “path to your project”? [Y/n] y

Next, you’ll be asked in which account you want to deploy this app. It’ll give you a default option; just hit Enter.

After this, you’ll be asked whether to link this to the existing project. Answer N:

? Which scope do you want to deploy to? Your Vercel Account
? Link to existing project? [y/N] n

The next step is to name your project and specify the path. Because we’re already in the project directory, it’ll be the same as the default option, ./:

? What’s your project’s name? project-name
? In which directory is your code located? ./

It will autodetect whether your project was initialized using Create React App and configure the settings accordingly. Otherwise, it will ask you to set them. Answer No if you’re asked to override the settings:

Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start
? Want to override the settings? [y/N] n

Your project will now be deployed:

�  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).

Firebase

Firebase, a product of Google, is a comprehensive development platform that offers a wide range of tools, including hosting.

Firebase is known for its real-time database, authentication services, and machine-learning capabilities. Firebase might be overkill if you’re only looking for hosting services, but it’s a great option if you want to leverage its other offerings like analytics, database, and authentication.

Firebase offers a free Spark plan, and its Blaze plan follows a pay-as-you-go pricing model.

Deploying using the Firebase CLI

First, install the Firebase CLI globally to make it easier to use in different projects:

npm install -g firebase-tools

Log in with your Firebase or Google account:

firebase login

Next, go to your project root directory and run the following command to initialize a Firebase project:

firebase init

You’ll be asked to confirm; reply Yes:

 ? Are you ready to proceed? Yes

Choose the hosting option by clicking Space on Hosting, and then hit Enter:

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

Because you already created a project in the first step, choose Use an existing project when asked to choose the Firebase project associated with your application. Otherwise, you can select Create a new project:

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

If you’ve already built the project, you’ll be asked whether to overwrite or not. Answer No:

? File public/index.html already exists. Overwrite? No

With this, firebase init is complete.

Before proceeding to the next step, build your React project with the command npm run build.
The next and final step is to deploy the project. To do so, run the command firebase deploy.

Once the process completes, you’ll see the deployed links in the terminal:

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/react-project/overview
Hosting URL: https://react-project.web.app

Netlify

Netlify is a robust platform offering a modern workflow for building and deploying web applications. It supports continuous deployment from Git repositories and offers a range of features like serverless functions, form handling, and split testing. Netlify might not be the best choice if your application requires server-side rendering or complex backend logic.

Netlify offers a free starter plan, and its Pro plan is priced at $19 per user per month.

Deploying using the Netlify CLI

To deploy the latest build, run npm run build beforehand and install netlify-cli globally:

npm install netlify-cli -g

In your project root directory, run netflify command. You might be prompted to grant access to Netlify CLI. Click Authorize:

Follow through the prompts that come after authentication. First, you’ll be asked to link this project to a site, as this is the first time you’re deploying this app. Select Create configure a new site:

This folder isn't linked to a site yet
? What would you like to do?
Link this directory to an existing site
Create configure a new site

Then, you’ll be asked for the Team. Unless you’re already using Netlify on your local machine, chances are you will see only one option with your name; select it:

? Team:
ASHUTOSH KUMAR SINGH's team

The next prompt is Site name. This is an optional field. If you already have a name in mind, type that and hit Enter. If you leave this blank, Netlify will give this site a random name that you can change later:

Choose a unique site name (e.g. netlify-thinks-lelouchB-is-great.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional):

After this step, your site will be created and you’ll be asked for a Publish directory. Type build here — the build directory will be created when you run npm run build:

Please provide a publish directory

? Publish directory build

With this, your site will be published and you will be provided a draft URL:

...
Logs:https://app.netlify.com/sites/serene-fermi-6d50a8/deploys/5f1194c3b903cadb238eabb4 
Website Draft URL: https://5f1194c3b903cadb238eabb4--serene-fermi-6d50a8.netlify.app
...

Go to this draft URL. If everything checks out, you can deploy the website to the main site URL. Run the following command to deploy to production:

netlify deploy --prod

It will ask for the Publish directory one final time. Type build and hit Enter. You’ll be provided with two URLs:

Unique Deploy URL: https://5f11977085ef8fafe7535ff9--serene-fermi-6d50a8.netlify.app
Website URL:       https://serene-fermi-6d50a8.netlify.app

The difference between these two URLs is that the Unique Deploy URL points to a specific version of your application. For example, if you make a change in your application and deploy again, you’ll get another Unique Deploy URL that is specific to that change. Your Website URL is the main URL, which corresponds to the latest version of your application.

GitHub Pages

GitHub Pages is a static site hosting service directly integrated into the GitHub platform. It’s a great choice for hosting simple static websites directly from a GitHub repository.

However, GitHub Pages doesn’t support server-side code and might not be suitable for dynamic web applications. GitHub Pages is free for public repositories.

To deploy, create a repository for your application. You’ll get both the repository URL and the Git URL when you create a new repository:

In your terminal, initialize the local directory as a Git repository, commit all the changes, and push it to remote by running the following command in the project root:

git init
git add .
git commit -m "initial commit"
git remote add origin (repository remote git url here)
git push -u origin master

With this, your project will be pushed to GitHub.

In your project’s package.json, add a homepage field, like this:

"homepage": "https://myusername.github.io/my-app"

myusername is your GitHub username and my-app is your repository’s name.

Next, install gh-pages in your project:

npm install --save gh-pages

In your package.json, add the following scripts:

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

predeploy and deploy are the only additions to the scripts. predeploy will automatically run before deploy and make sure the latest build of the application is deployed.

Run the command npm run deploy to deploy the application. This command will create a new branch named gh-pages in your project’s GitHub repository. You may need to set a source, which you can do under the GitHub Pages option in your repository’s settings. Set it to gh-pages branch:

Surge

Surge is a simple command-line interface tool for publishing web applications. It’s straightforward to use and doesn’t require a complicated setup process.

However, Surge only supports static webpages and might not be suitable for applications with server-side rendering or backend logic. Surge offers a free basic plan, and its Professional plan is priced at $30 per month.

Deploying using the Surge CLI

To deploy the latest build of the project, run the command npm run build in the project root directory to build the project:

npm run build

Then, install Surge CLI globally:

npm install -g surge

Run surge inside the build folder:

cd build
surge

First, you’ll be asked for an email and password:

Welcome to surge! (surge.sh)
Login (or create surge account) by entering email & password.
      email: [email protected]
      password:

Then, in the terminal, you’ll be asked to confirm your project directory. Hit Enter. You’ll see the domain of your project. Again, hit Enter:

    project: D:\code\react-example-deploy\build\
    domain: tremendous-person.surge.sh 

This will publish your application:

   Success! - Published to outstanding-scent.surge.sh

You might want to rename index.html to 200.html in your build folder before surging to support the HTML5 pushState API, which is used by React libraries for routing. If you run into an aborted error, try to run the surge command again.

Render

Render, the winner of Startup Battlefield at Disrupt SF 2019, offers a fully managed cloud platform where you can deploy web applications directly from your Git repositories.

Render supports various languages and frameworks and offers features like private services, automatic HTTPS, and pull request previews.

However, if you’re looking for a platform with a broader range of services like machine learning or IoT, you might need to consider other options. Render offers a free individual plan, and its paid plans start from $19 per user per month.

Deploying using the Render dashboard

Before you deploy, make sure your project is stored in a GitHub repository, and then move on to creating an account on Render.

Next, click New Static Site on the dashboard:

Connect your GitHub or GitLab account. Once connected, search for your project repository and select it. After this, you’ll need to give your web service a unique name. Render will auto-detect if your application is bootstrapped with Create React App and fill the configuration accordingly.

Click Create Static Site, after which your project will be deployed:

GitLab Pages

GitLab Pages is a feature in GitLab that allows you to build, test, and deploy static websites directly from a GitLab repository. It supports static site generators and provides continuous deployment, custom domains, and HTTPS support. However, similar to GitHub Pages, it doesn’t support server-side languages. GitLab Pages is included in all GitLab plans.

In GitLab, select Create blank project and create an empty project. Give your project a name and click Create project:

On the next page, you’ll see various commands to add your React project, configured according to your credentials.

In your terminal, initialize the local directory as a Git repository, commit all the changes, and push it to remote by running the following command in the project root:

git init
git remote add origin [email protected]:<username/project-name>.git
git add .
git commit -m "Initial commit"
git push -u origin master

Be sure to replace <username/project-name> with your username and project name. In your project’s package.json, add a homepage field:

"homepage": "https://myusername.gitlab.io/my-app"

myusername is your username and my-app is the name of your project. For example:

"homepage":"https://lelouchB.gitlab.io/react-material-ui/"

Create a new file named .gitlab-ci.yml and add the following code to it:

image: node:18 # change to match your node version

cache:
  paths:
    - node_modules/

before_script:
  - rm -rf build
  - npm install

pages:
  stage: deploy
  script:
    - npm run build
    - rm -rf public
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

After committing this file, a pipeline will start. This will deploy your React app to GitLab pages. You can see this pipeline under the CI/CD tab. After the pipeline has passed successfully, it may take up to 30 minutes before the site is available after the first deployment. Your app will be deployed to the same URL, as mentioned in the homepage field in package.json.

AWS Amplify

AWS Amplify is a development platform from Amazon Web Services (AWS) that enables you to build and deploy mobile and web applications quickly. It offers many features, including authentication, APIs, storage, and analytics.

However, AWS Amplify might be more complex and costly compared to other platforms if you’re only looking to host a simple static website. AWS Amplify offers a free tier, and beyond that, you pay for what you use.

Deploying using the AWS Amplify CLI

To deploy your React app on AWS Amplify, we first have to install its CLI:

npm install -g @aws-amplify/cli

Once installed, we need to configure the project by running the following command:

amplify configure

It will prompt you to sign in with your AWS account and configure your default region.

Once configured, you will need to initialize the AWS Amplify project by running the following command:

amplify init

Follow the prompts to initialize Amplify. Finally, run the following command to deploy your React app:

amplify publish

This will build and deploy your app to the specified environment. Once the deployment is complete, it will provide you with a URL where you can access your live React app.

Cloudflare Pages

Cloudflare Pages is a JAMstack platform for frontend developers. It offers seamless integration with a GitHub repository, allowing for easy deployment of your web applications. However, if your application requires a backend or server-side rendering, you might need to look for other options.

Cloudflare Pages offers a free plan, and its Pro plan starts at $20 per month.

Deploying using the Cloudflare CLI

To deploy your react app for free on Cloudflare Pages, install the create-cloudflare package globally:

npm install -g create-cloudflare@latest

Once installed, configure your project using the command:

create-cloudflare

Choose Deploy existing project and select your framework (React) when prompted. This will handle dependencies and configure your project for Cloudflare. It may ask you to log in to your Cloudflare account. And finally, it will deploy your React app.

You can also use -p flag to pre-build the app, leading to faster deployments. The command should look like this:

create-cloudflare -p

Summary

Feature	Vercel	Firebase	Netlify	GitHub Pages	Surge	Render	GitLab Pages	AWS Amplify	Cloudflare Pages
Serverless deployment	Yes	Yes	Yes	No	Yes	Yes	No	Yes	Yes
Global CDN	Yes	No	No	No	No	No	No	No	Yes
Edge functions	Yes	Yes	No	No	No	No	No	No	Yes
Built-in Git integration	Yes	No	Yes	No	No	No	Yes	No	No
Continuous deployment	Yes	Yes	Yes	No	No	Yes	No	Yes	Yes
Rollback support	Yes	Yes	Yes	No	No	Yes	No	Yes	Yes
Static site hosting	No	No	Yes	Yes	Yes	Yes	Yes	No	Yes
BaaS (Backend as a Service)	No	Yes	No	No	No	No	No	Yes	No
Authentication and authorization	No	Yes	No	No	No	No	No	Yes	No
Realtime database	No	Yes	No	No	No	No	No	No	No
Cloud storage	No	Yes	No	No	No	No	No	Yes	No
Best for	Performant and scalable React applications	Comprehensive platform for building and deploying web and mobile applications	Powerful and flexible React application deployment	Free and easy static website hosting	Easy-to-deploy static websites	Serverless hosting for all types of web applications	Free static site hosting for GitLab repositories	Serverless deployment of React applications and server-side applications	Fast and easy deployment of static websites and React applications

Some other platforms worth checking out

The following platforms might not be the best for hosting but are well-reputed primarily for other services, like backend, databases, and storage. I’ve mentioned the hosting plans for them as well:

• Glitch: Glitch is a cloud platform that allows you to create and host web apps, including React apps. It offers a free tier that includes 1GB of RAM, 5GB of storage, and 100 concurrent users per month
• Microsoft Azure: Microsoft Azure offers a free tier that includes 750 hours of Azure App Service Basic per month, 5GB of storage, and 1GB of RAM. This tier is enough to host a small React app
• Google Cloud Platform (GCP): GCP offers a free tier that includes 1GB of RAM, 5GB of persistent disk storage, and one instance of f1-micro Compute Engine for 750 hours per month. This tier is enough to host a small to medium-sized React app
• PythonAnywhere: PythonAnywhere is a cloud platform that allows you to code, run, and host Python web apps. However, it also supports React apps. PythonAnywhere offers a free tier that includes 1GB of RAM, 100GB of storage, and 100 concurrent users per month

Conclusion

Deploying a React application can be easy and affordable with the many different platforms and tools available. In this article, we reviewed nine of the most popular options for free React app hosting, each with its unique features and benefits. Choose the platform that best suits your needs and get your React application up and running in no time!