{"id":16218,"date":"2023-01-24T11:32:41","date_gmt":"2023-01-24T06:02:41","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=16218"},"modified":"2025-10-28T11:06:31","modified_gmt":"2025-10-28T05:36:31","slug":"how-to-deploy-a-react-app-for-free-using-firebase-vercel-and-netlify","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/how-to-deploy-a-react-app-for-free-using-firebase-vercel-and-netlify\/","title":{"rendered":"Deploy a React app for Free To Firebase, Vercel & Netlify"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

Deploy React App to Firebase<\/strong><\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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 HCL GUVI\u2019s Full Stack Development Career Program<\/a><\/strong> with Placement Assistance. You will be able to master the MERN stack<\/a> (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/p>\n\n\n\n

Additionally, if you want to explore React through a self-paced course, try HCL GUVI\u2019s React self-paced certification course.<\/a><\/strong><\/p>\n\n\n\n

Steps to deploy app to firebase:<\/strong><\/h3>\n\n\n\n

Here is a step-by-step guide on how to deploy a React app for free on Firebase. <\/p>\n\n\n\n

Step 1: Go to https:\/\/console.firebase.google.com\/<\/a> and create a new project on console<\/strong><\/p>\n\n\n

\n
\"\"
Firebase console<\/figcaption><\/figure><\/div>\n\n\n

Step 2: Enable the Firebase hosting feature from the Build dropdown menu.<\/strong><\/p>\n\n\n

\n
\"\"
Firebase hosting dashboard<\/figcaption><\/figure><\/div>\n\n\n

Step 3: Set up firebase hosting<\/strong><\/p>\n\n\n

\n
\"\"
Install firebase CLI<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
Initialize project on firebase<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
Deploy to firebase<\/figcaption><\/figure><\/div>\n\n\n

Go through the given steps and continue to console.<\/p>\n\n\n\n

Step 4: Install the firebase tools CLI<\/strong><\/p>\n\n\n\n

Now let’s begin the firebase installation process into our react app. Open your react app project directory, and run the following:<\/p>\n\n\n\n

npm install -g firebase-tools<\/code><\/pre>\n\n\n\n
Step 5: Initialize firebase in project<\/strong><\/p>\n\n\n\n
firebase init<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 6: Proceed further and select \u201cHosting: Configure files\u201d option<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 7: Select \u201cuse an existing project\u201d<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 8: Write \u201cbuild\u201d to use as your public directory because through this folder react app will run<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Step 9: Select \u201cY\u201d to continue<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hooray! Now you\u2019re done with initialization. Let\u2019s host it now.<\/p>\n\n\n\n
Step 9: Run the build command<\/strong><\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
Step 10: Run the firebase deploy command<\/strong><\/p>\n\n\n\n
firebase deploy<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now you should see your website at the given url. See the example screenshot below.<\/p>\n\n\n
\n
\"\"
React App deploy on Firebase<\/figcaption><\/figure><\/div>\n\n\n
Deploy react app to Vercel<\/strong><\/h2>\n\n\n\n
Vercel <\/a>is another popular option for deploying React apps. You can use Vercel\u2019s 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.<\/p>\n\n\n\n
Vercel is another popular option for deploying React apps. You can use Vercel\u2019s 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.<\/p>\n\n\n\n
Steps to deploy app to Vercel:<\/strong><\/h3>\n\n\n\n
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. <\/p>\n\n\n\n
Step 1: Create a new github repository<\/strong><\/p>\n\n\n\n
Go to your GitHub account and create a new repository to deploy the project<\/p>\n\n\n
\n
\"\"
New GitHub Repository<\/figcaption><\/figure><\/div>\n\n\n
Step 2: Deploy react app to gitHub repository<\/strong><\/p>\n\n\n\n
Back in the terminal, let\u2019s start by staging all our files so we can commit them to the repository we\u2019ve created using the following commands:<\/p>\n\n\n\n
git init \ngit add . \ngit commit -m \"first commit\" \ngit branch -M main<\/code><\/pre>\n\n\n\n
Once this is done, push the files to the created remote repository using the following commands: <\/p>\n\n\n\n
git remote add origin https:\/\/github.com\/tarunhclguvi\/demoapp.git\u00a0\ngit push -u origin main<\/code><\/pre>\n\n\n\n
Step 3: Go to <\/strong>https:\/\/vercel.com\/dashboard<\/strong><\/a> and create a new project<\/strong><\/p>\n\n\n\n
Now you are ready to deploy your app to the vercel site. Visit the dashboard and create a new project.<\/p>\n\n\n
\n
\"\"
Vercel Dashboard<\/figcaption><\/figure><\/div>\n\n\n
After creating a new project, it will redirect you to the page where you can import your github project.<\/p>\n\n\n
\n
\"\"
Import repository on Vercel<\/figcaption><\/figure><\/div>\n\n\n
A popup will be displayed to authorize the github account from which the site will be deployed.<\/p>\n\n\n\n
Step 4: Click the Import button and configure the project<\/strong><\/p>\n\n\n\n
After clicking the import and add your project name and edit your root directory as build <\/em><\/strong>and click deploy.<\/strong><\/p>\n\n\n
\n
\"\"
Configure project<\/figcaption><\/figure><\/div>\n\n\n
Once done, you see the production deployment complete. The domain <\/strong>is available as: https:\/\/demoapp-jade.vercel.app\/<\/a> <\/p>\n\n\n
\n
\"\"
Vercel Deployment<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
React App deploy on Vercel<\/figcaption><\/figure><\/div>\n\n\n
Congratulations! You have successfully deployed your react app to Vercel.<\/p>\n\n\n\n
Deploy react app to Netlify<\/strong><\/h2>\n\n\n\n
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 <\/a>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.<\/p>\n\n\n\n
Steps to deploy app to Vercel:<\/strong><\/h3>\n\n\n\n
Here is a step-by-step guide on how to deploy a React app for free on Netlify. <\/p>\n\n\n\n
Note:<\/strong> 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.<\/p>\n\n\n\n
Step 1: Go to <\/strong>https:\/\/app.netlify.com\/<\/strong><\/a>  and login with github<\/strong><\/p>\n\n\n
\n
\"\"
Netlify<\/figcaption><\/figure><\/div>\n\n\n
Step 2: Import existing github project<\/strong><\/p>\n\n\n\n
Choose the Import from Git <\/strong>option to select the github existing project.<\/p>\n\n\n
\n
\"\"
Import Git on Netlify<\/figcaption><\/figure><\/div>\n\n\n
Connect to Git provider by clicking on GitHub<\/strong> button<\/p>\n\n\n
\n
\"\"
Connect to Github<\/figcaption><\/figure><\/div>\n\n\n
Select the repository you want to deploy as site<\/p>\n\n\n
\n
\"\"
Import existing git repo<\/figcaption><\/figure><\/div>\n\n\n
Step 3: Deploy to Netlify<\/strong><\/p>\n\n\n\n
Once your React app is connected to Netlify, you can now deploy it simply by clicking the Deploy site<\/strong> button.<\/p>\n\n\n
\n
\"\"
Deploy to Netlify<\/figcaption><\/figure><\/div>\n\n\n
After a successful deployment, your React app will be live and the link will be available at the dashboard.<\/p>\n\n\n
\n
\"\"
Netlify Dashboard<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
React App deploy on Netlify<\/figcaption><\/figure><\/div>\n\n\n
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.<\/p>\n\n\n\n
Kickstart your Full Stack Development journey by enrolling in HCL GUVI’s certified Full Stack Development Career Program<\/strong><\/a> with Placement Assistance<\/strong> 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. <\/p>\n\n\n\n
Alternatively, if you want to explore React through a self-paced course, try HCL GUVI\u2019s React self-paced course.<\/a><\/strong><\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":16231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[737],"tags":[816,804],"views":"37399","authorinfo":{"name":"GUVI Geek","url":"https:\/\/www.guvi.in\/blog\/author\/admin\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2023\/01\/How-to-deploy-react-app-to-Firebase-Netlify-Vercel-300x169.png","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2023\/01\/How-to-deploy-react-app-to-Firebase-Netlify-Vercel.png","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16218"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=16218"}],"version-history":[{"count":25,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16218\/revisions"}],"predecessor-version":[{"id":91436,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/16218\/revisions\/91436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/16231"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=16218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=16218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=16218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}