Post thumbnail
MERN

Deploy a React app for Free To Firebase, Vercel & Netlify

Are you looking for a fast and easy way to deploy your React app for free? Firebase, Vercel, and Netlify are the most popular options for developers. All of them offer a robust set of features and provide a great platform for deploying your React applications. In this blog, we will discuss how to deploy your React app for free on Firebase, Vercel, and Netlify.

Vercel is a cloud platform for static sites and serverless functions that enables developers to deploy, host, and manage their web projects with ease and makes it easy to deploy and host React apps with a simple, intuitive workflow.

It offers a wide range of features and tools, such as automatic HTTPS, serverless functions, CDN edge caching, and more, to help developers build and deploy React apps quickly and easily.

Apart from this, it also offers integration with a variety of popular services, such as GitHub, Slack, and Figma, to help streamline the development process. Additionally, It provides free hosting for open-source projects.

Firebase is a cloud-based platform that can be used to host web applications built with React. It provides tools used for authentication, storage, real-time databases, hosting, analytics, and much more. Firebase also provides a command-line interface that makes it easy to set up and deploy React apps with just a few commands. Additionally, Firebase also offers hosting services that can be used to deploy React apps with minimal effort.

Netlify is a platform designed specifically for hosting modern web applications. It supports static sites built with React, as well as dynamic applications that use popular JavaScript frameworks like Next.js, Vite, etc. With the help of Netlify, you can easily deploy a React app with just a few clicks.

For this blog, we are going to use an existing react app project to deploy to multiple websites for Free. Read the blog to know more about how to create a new react application using create-react-app command.

Table of contents


  1. Deploy React App to Firebase
    • Steps to deploy app to firebase:
  2. Deploy react app to Vercel
    • Steps to deploy app to Vercel:
  3. Deploy react app to Netlify
    • Steps to deploy app to Vercel:
  4. Conclusion
    • Become a certified Full Stack Developer

Deploy React App to Firebase

Firebase Hosting is one of a service provided by Firebase, a Google product used for building mobile and web applications. Firebase Hosting allows developers to easily deploy and host their web applications, including static, single-page apps, and progressive web applications.

Steps to deploy app to firebase:

Here is a step-by-step guide on how to deploy a React app for free on Firebase.

Step 1: Go to https://console.firebase.google.com/ and create a new project on console

Firebase console

Step 2: Enable the Firebase hosting feature from the Build dropdown menu.

Firebase hosting dashboard

Step 3: Set up firebase hosting

Install firebase CLI
Initialize project on firebase
Deploy to firebase

Go through the given steps and continue to console.

Step 4: Install the firebase tools CLI

Now let's begin the firebase installation process into our react app. Open your react app project directory, and run the following:

npm install -g firebase-tools

Step 5: Initialize firebase in project

firebase init

Step 6: Proceed further and select “Hosting: Configure files” option

Step 7: Select “use an existing project”

Step 8: Write “build” to use as your public directory because through this folder react app will run

 Step 9: Select “Y” to continue

Hooray! Now you’re done with initialization. Let’s host it now.

Step 9: Run the build command

npm run build

Step 10: Run the firebase deploy command

firebase deploy

Now you should see your website at the given url. See the example screenshot below.

React App deploy on Firebase
MDN

Deploy react app to Vercel

Vercel is another popular option for deploying React apps. You can use Vercel’s free plan to deploy your React app for free. To get started, you will need to create a Vercel account. Once your account is created, you can deploy your React app.

Vercel is another popular option for deploying React apps. You can use Vercel’s free plan to deploy your React app for free. To get started, you will need to create a Vercel account. Once your account is created, you can deploy your React app.

Steps to deploy app to Vercel:

Here is a step-by-step guide on how to deploy a React app for free on Vercel. Deploying a react app to vercel requires us to have our project to GitHub. So, first we'll see how to add our react app to GitHub with just few clicks. 

Step 1: Create a new github repository

Go to your GitHub account and create a new repository to deploy the project

New GitHub Repository

Step 2: Deploy react app to gitHub repository

Back in the terminal, let’s start by staging all our files so we can commit them to the repository we’ve created using the following commands:

git init 
git add . 
git commit -m "first commit" 
git branch -M main

Once this is done, push the files to the created remote repository using the following commands: 

git remote add origin https://github.com/tarunguvi/demoapp.git 
git push -u origin main

Step 3: Go to https://vercel.com/dashboard and create a new project

Now you are ready to deploy your app to the vercel site. Visit the dashboard and create a new project.

Vercel Dashboard

After creating a new project, it will redirect you to the page where you can import your github project.

Import repository on Vercel

A popup will be displayed to authorize the github account from which the site will be deployed.

Step 4: Click the Import button and configure the project

After clicking the import and add your project name and edit your root directory as build and click deploy.

Configure project

Once done, you see the production deployment complete. The domain is available as: https://demoapp-jade.vercel.app/ 

Vercel Deployment
React App deploy on Vercel

Congratulations! You have successfully deployed your react app to Vercel.

Deploy react app to Netlify

Till now you saw that how we can deploy our react app to Firebase and Vercel. Now let's see what are the steps involved in deploying a react app to Netlify. Netlify is a hosting and development platform that allows developers to easily deploy, manage, and host their web applications. We can deploy static HTML websites, JavaScript applications, and serverless functions with a very simple process.

Steps to deploy app to Vercel:

Here is a step-by-step guide on how to deploy a React app for free on Netlify. 

Note: For deploying your react app to netlify requires you to have your project on github. Above all the steps are already explained how to deploy an app to github.

Step 1: Go to https://app.netlify.com/  and login with github

Netlify

Step 2: Import existing github project

Choose the Import from Git option to select the github existing project.

Import Git on Netlify

Connect to Git provider by clicking on GitHub button

Connect to Github

Select the repository you want to deploy as site

Import existing git repo

Step 3: Deploy to Netlify

Once your React app is connected to Netlify, you can now deploy it simply by clicking the Deploy site button.

Deploy to Netlify

After a successful deployment, your React app will be live and the link will be available at the dashboard.

Netlify Dashboard
React App deploy on Netlify

Hooray! Now you have understood all the 3 commonly used methods for deploying your react app. The process for deploying a React app using all three methods was very easy to understand.

MDN

Conclusion

Deploying a React app for free is possible with Firebase, Vercel, and Netlify but there are other options also to look into. All three platforms offer a comprehensive set of characteristics, an easy setup process, and an intuitive UI.

With Firebase, you can use its free tier plan to host and deploy a React application, while Vercel and Netlify offer free hosting and deployment services with added features. Whichever platform you choose, you can be sure that your React app is in good hands.

Become a certified Full Stack Developer

"Unlock your potential as a Full Stack Developer with GUVI's Full Stack Development Bootcamp course!" The course is designed to help you become a master of both front-end and back-end development. You will be able to learn the fundamentals of both web development, backend, and database management. 

You will also learn about popular frameworks such as HTML, CSS, JavaScript, ReactJS, MongoDB, SQL, and more. With the help of our knowledgeable instructors, you will gain the skills you need to become a successful Full-stack developer. Want more?

  • 100% Job Placement Support 
  • Mentors from top Global Product Companies 
  • A portfolio of real-world projects 
  • Certification

So, what are you waiting for? Sign up for the GUVI Full Stack Development Bootcamp course today and start your journey to becoming a full-stack developer!

Career transition

Did you enjoy this article?

Schedule 1:1 free counselling

Similar Articles

Share logo Whatsapp logo X logo LinkedIn logo Facebook logo Copy link
Free Webinar
Free Webinar Icon
Free Webinar
Get the latest notifications! 🔔
close
Table of contents Table of contents
Table of contents Articles
Close button

  1. Deploy React App to Firebase
    • Steps to deploy app to firebase:
  2. Deploy react app to Vercel
    • Steps to deploy app to Vercel:
  3. Deploy react app to Netlify
    • Steps to deploy app to Vercel:
  4. Conclusion
    • Become a certified Full Stack Developer