In this blog, we are going to discuss how to deploy react js applications for free in a few minutes in firebase. before that let’s discuss what is firebase.
What is Firebase ?
Firebase is a backend as a service(Baas) built on Google’s infrastructure.it is categorized as a NoSQL database that stores data in JSON-like format. It has many tools and services which help developers to develop their apps easily. It has many key features one of them is hosting.
Let’s see how firebase helps in hosting.
What is firebase hosting
Firebase Hosting is production-grade web content hosting for developers with a single command we can quickly deploy static and dynamic content to a global CDN(content delivery network). let’s see how to deploy a react app using firebase.
Getting started
To deploy we need a react app .so, let’s create a simple react app using the following command
npx create-react-app demoApp
Build your app for production
After the app is created let’s make the app ready for production. Open your project folder and type cd your project name and build the app for production using the following command
npm run build
//or
yarn build
Install firebase tools
Once you have built your app for production, install the firebase tools that will allow you to deploy your react app. You can install the tool by running
npm install firebase-tools -g yarn global add firebase-tools
Login to firebase
To login into firebase make sure you are in the root directory of the react app and run the following command to log in to firebase in your terminal
firebase login
Initialize firebase
Now, you are logged in you will need to initialize firebase in your react app. You can do it by running the following command
firebase init
After this command, you will prompt with a series of questions and configuration options.
For the first question select option Hosting: Configure and deploy Firebase Hosting sites.
In the second question, select use an existing project and select the Firebase project created earlier
And in the hosting setup specify the path where the firebase will look for assets to deploy
For Configure as a single-page app question enter y for this option.
The last question is whether or not to overwrite your existing build/index.html file. So You’ll want to enter N (No)
Deploying reactjs app on firebase
Run the following command to deploy our app
firebase deploy
Once you run this command, Firebase will then give you a unique hosting URL where your deployed app is located. For example https://reactdemo-f8d87.web.app
Thanks, Happy Coding 🙂
Leave a Reply