Editor’s note: This post was updated 2 February 2022 to remove and replace outdated and un-maintained options from the list, provide more modern options, and amend the build steps for each service, depending on its latest methods and deployment options.
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 eight different services:
All the services described in this post are completely 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 is a revolutionary serverless deployment service designed for React, Angular, Vue, and other JavaScript libraries. You can easily import projects from GitLab or Bitbucket with Vercel. Automatic SSL is one of the many cool features it offers.
To deploy Vercel, create a new account. You can quickly login using OAuth.
After a successful login, the dashboard screen will appear. You can use either this dashboard or the Vercel CLI and deploy it from the terminal; we’ll discuss both methods in more detail.
To deploy using the Vercel dashboard, integrate GitHub, GitLab, or Bitbucket — wherever your React application is stored. Click Import Project on your panel.
You can opt either to import the project from the Git repository, or use a template, which is another excellent feature of Vercel.
Click Continue under From Git Repository.
You may have integrated GitHub, GitLab, or Bitbucket; for the purpose of this tutorial, we’ll assume you used GitHub.
Click Import Project from GitHub. If this is your first time using Vercel, you’ll see a screen like this:
Click Install Now For GitHub and you’ll be prompted to install Vercel for GitHub. Save the setting for GitHub, navigate back to the import Git page, and you’ll see that your GitHub is now connected. Click Import Project from GitHub.
You’ll be prompted to choose which project you want to deploy. Choose the React project, click Import, and then you can write in a project name. Leave it as the default and click Continue. When asked for the root directory, choose accordingly and click Continue.
This next step is important. If you’ve initialized your React project using Create React App, Vercel will autodetect it and choose a suitable configuration on its own. Leave the default configuration and click Deploy. We leave the configuration on the default setting so that Vercel knows the correct way to deploy the website based on the configuration.
If your React app was not initialized using Create React App, you’ll be asked for the configuration. Using the above configuration as an example, fill all the configuration fields and click Deploy.
Your React application will deploy within a matter of seconds, with two to three preview links.
The first step is to install Vercel globally.
npm i -g vercel // or yarn global add 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. Since we’re already in the project directory, it’ll be 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 is an entire platform that you can use to develop and scale your application. Along with hosting, it offers myriad other services, including authentication, Cloud Firestore, Cloud Functions, and more.
If you haven’t already, create an account on Firebase and then create a new project. Then click Hosting on the sidebar, and click Get Started. This should initiate Firebase hosting for us.
Install the Firebase CLI globally to make it easier to use in different projects.
npm install -g firebase-tools
Login with your Firebase or Google account.
firebase login
You’ll be prompted with a URL in the terminal that will open in the browser to verify. After giving the necessary permissions, you’ll see a successful login message.
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
Since 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 choose to Create a new project, you’ll be asked to provide a unique project ID.
Lastly, change the default public folder to build for your Create React App project. If you haven’t initialized the project with Create React App, choose the appropriate build folder.
=== Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? build ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
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.
npm run build
The next and final step is to deploy the project. Run the following 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 is one of the most popular services out there for web deployment. It easily imports projects from GitHub, GitLab, and Bitbucket, and is widely used with Jamstack applications. One cool feature is that it creates a random name for every project — and the names are quite catchy.
To get started, create a Netlify account if you haven’t already.
As with Vercel, you can choose to deploy your app either through the Netlify Dashboard or the Netlify CLI.
One of the coolest features that Netlify offers is the ability to drag and drop your site folder on the Netlify dashboard and have it deploy your app like magic.
For your React app, you’ll have to drag and drop the build folder onto the Netlify Dashboard. Run npm run build beforehand to deploy the latest build.
You can also connect GitHub, GitLab, or Bitbucket, depending on where your project is stored. This allows automatic deployment whenever you push your changes.
Choose the project repository that you want to deploy.
Once you’ve selected the project, the final step is the configuration, which Netlify will autodetect if the project is initialized with Create React App.
Click Deploy site and your app will be deployed!
If you prefer to deploy apps through the terminal, here are the steps to do so with 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 the following command.
netlify deploy
You might be prompted to grant access to Netlify CLI. Click Authorize.
After successful authorization, you’ll see a successful login message in the terminal.
You are now logged into your Netlify account!
The following steps will guide you through the prompts that you’ll encounter in the terminal.
First, you’ll be asked to link this project to a site, since 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, as you can see below. 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.
Please provide a publish directory ? Publish directory build
With this, your site will be published and you will be provided a draft URL.
Deploying to draft URL... ✔ Finished hashing 19 files ✔ CDN requesting 10 files ✔ Finished uploading 10 assets ✔ Draft deploy is live! Logs:https://app.netlify.com/sites/serene-fermi-6d50a8/deploys/5f1194c3b903cadb238eabb4 Website Draft URL: https://5f1194c3b903cadb238eabb4--serene-fermi-6d50a8.netlify.app If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag. netlify deploy --prod
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.
You might encounter a 404 error if your application uses a router, such as React Router.
In your build folder, create a new file called _redirects and add the following to it.
/* /index.html 200
Redeploy your application to see the changes.
GitHub Pages is one of the fastest and most widely-used methods for beginners to deploy websites. With GitHub Actions, you can trigger automatic deployments, configure CI/CD, and much more — which make it easier to maintain than many other tools described in this guide.
Create a GitHub account if you haven’t already, then 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.
Learn more →"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 following command to deploy the application.
npm run deploy
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.
Heroku is a cloud application platform that has attracted a large number of developers since its launch in 2007. One reason for this is that it supports most programming languages, including the likes of Go, Node.js, Clojure, and more.
Like most of the other services we’ve discussed thus far, start by creating a free account on Heroku.
Install heroku-cli globally by running the following command.
npm install -g heroku
You can read about other installation methods in the official docs.
Log into heroku-cli.
heroku login
You’ll be prompted to log into your account in the browser. Click Log In.
We’ll use Heroku Buildpack for Create React App for quick deployment. Below is all the code you’ll need; you can copy/paste and deploy in one step!
git init heroku create -b https://github.com/mars/create-react-app-buildpack.git git add . git commit -m "react-create-app on Heroku" git push heroku master heroku open
This might be the fastest way to deploy via terminal because you don’t have to answer any prompts, as we did with other CLIs.
You can also deploy with Heroku via their dashboard. To start, make sure your project is stored in a GitHub repository.
Go to your Heroku dashboard, click New, and then click Create new app.
You’ll be prompted to give your project a name. Type your application name and click Create app.
After creating an app, sync your GitHub repository. You’ll see something like this on your app dashboard.
Once you’ve successfully connected your GitHub to Heroku, you can search for the project repository and deploy it.
Select your project from the list of repositories.
You’ll have two choices: manual or automatic deploy, which means that whenever you push your changes to GitHub, Heroku will automatically deploy the new website for you. For the purpose of this tutorial, we’ll go with manual deploy.
Click Deploy Branch under Manual Deploy and your application will deploy once the build process completes.
Surge is another fast way to deploy frontend projects. Compared to other CLIs, it requires much less configuration, is easy to deploy, and allows you to create a Surge account directly from the terminal when using it for the first time.
To deploy the latest build of the project, run the following command in the project root directory.
npm run build
To install Surge CLI globally:
npm install -g surge
Run surge inside the build folder.
cd build surge
Follow the prompts. 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:
Before filling in any other prompts, it’s a good idea to confirm your Surge account.
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, the winner of Startup Battlefield at Disrupt SF 2019, is a newer cloud platform that is rising in popularity.
While hosting sites on Render is free, you need to pay for other services such as databases, cron jobs, Docker containers, and render disks. Both Heroku and Render are classified as Platform-as-a-Service.
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.
If this is your first time using Render, you’ll need to connect your GitHub or GitLab, wherever your repository is stored.
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.
If your project uses something like React Router, you’ll need to redirect all routing requests to index.html. Go to the Redirects/Rewrites tab for your service, add a rule, and save the changes.
You can also use GitLab Pages to publish static sites directly from the repository in GitLab. With GitLab pages, you can easily connect your custom domains and TLS certificates.
Create a GitLab account if you haven’t already.
After creating an account, you will see the following options to add your React app.
If your project is already present on GitHub, then select Import project and import the project. Otherwise, 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. For example:
git remote add origin [email protected]:lelouchB/react-material-ui.git
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:10 # 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 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, so be patient.
You can manage your React app under the Settings/Pages tab.
Your app will be deployed to the same URL, as mentioned in the homepage field in package.json.
| Name of the platform | Methods to deploy | Limits and Pricing |
|---|---|---|
| Vercel | Through CLI and Dashboard (using GitHub automatic deploys) | Limits, Pricing |
| Firebase | Through CLI | Limits, Pricing |
| Netlify | Through CLI and Drag & Drop on dashboard | Limits, Pricing |
| GitHub Pages | Through GitHub repository | Limits |
| Heroku | Through CLI and Dashboard using GitHub automatic deployments | Limits, Pricing |
| Surge | Through CLI | Pricing |
| Render | Through dashboard by choosing GitHub repository | Limits, Pricing |
| GitLab Pages | Through GitLab repository | Limits |
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.
Now that we’ve discussed eight different ways to deploy React, you should try out as many as you can to determine which one best aligns with your deployment requirements. After all, they’re free to use.
For a good next step, try to add custom domains to your deployed application. It’s good to have a distinctive domain for projects, which have different ways to add a custom domain — some easy, some relatively complex.
Until next time, happy coding!
We investigate how the modulo operator works in JavaScript and explore several real-life applications, like cyclic patterns and animations.
Ken Pickering discusses the challenges associated with uncertainty and shares insights on scaling data structures and engineering teams.
Let’s see how Solid props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.
We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.
11 Replies to "8 ways to deploy a React app for free"
Thanks for such a great article!!!
Any reason why AWS S3 is not mentioned in the list? We can use the free tier for an year.
Thanks. Glad you like it. 🙂
I guess I didn’t include services like AWS and Azure because the complete step-by-step process of configuring and deploying a React app with AWS or Azure is too big to include in this article. Separate articles for them will be great to explain everything adequately.
Thanks for sharing above article.
Thanks for this, it has helped me beat my capstone deadline. So thankful!
Thanks! Glad you liked it 🙂
Thanks a lot. I used Surge to host my app. Honestly I had never heard of Surge until I read this article and I was having trouble hosting my app everywhere from Netlify, GitHub Pages, and Heroku! I this really helped me.
Hi, I’ve created a CI configuration file on the GitLab like this but GitLab throws error with `mv: cannot stat ‘build’: No such file or directory` (full CI job log is here).
Where am I doing wrong?
Hey Fatih,
Seeing the CI Job log, I guess you are using the above `.yml` file to deploy a Next.js project which is causing an error because unlike a React project which creates a production build in a folder named `build`, Next.js creates a folder named `.next` . The above .yml file works for React project.
Vercel would be best for a Next.js project.
Let me know if you have any other questions.
Thank you so much for this article! It was very helpful
I did as per your instructions for deployment on github. But my local hosting doesn’t show css styling though it’s working perfectly on the github pages.. please let me know what I can do to fix it. My local react-application is mirrored/linked with github repository.
Thank you for the article. Just update – there is no free plan on heroku anymore.