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.

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.

Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join GUVI’s Full Stack Development Career Program with Placement Assistance. You will be able to master the MERN stack (MongoDB, Express.js, React, Node.js) and build real-life projects.

Additionally, if you want to explore React through a self-paced course, try GUVI’s React self-paced certification course.

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

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

Step 3: Set up firebase hosting

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.

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

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.

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

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.

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

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

Step 2: Import existing github project

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

Connect to Git provider by clicking on GitHub button

Select the repository you want to deploy as site

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.

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

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.

Kickstart your Full Stack Development journey by enrolling in GUVI’s certified Full Stack Development Career Program with Placement Assistance where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements.

Alternatively, if you want to explore React through a self-paced course, try GUVI’s React self-paced course.

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.