Deployment is now easy because of Firebase Hosting. In this blog, I am going to discuss how we can deploy react applications within a few minutes by using some simple steps. So for that, we need two technologies: first is React to create one sample app and second is Firebase technology for the deployment purpose. Before starting the deployment process first let’s talk about Firebase Hosting in short. What is Firebase Hosting? Production-grade web content hosting for developers is provided by Firebase Hosting. Firebase Hosting is a fast, secure, and reliable way to host your apps. By using one command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). In this article we're going to cover the following points: Create a simple React application with create-react-app Log into the Firebase Console and create a new project Deploy React app by using Firebase Hosting 1. Create a simple React Application: For this blog, we are creating a basic react application by using the command. create-react-app is a tool that provides you a boilerplate for react applications so we can easily headstart the react apps. It saves you from time-consuming setup and configuration. create-react-app To use this command first you need to install it by using the following command: npm install -g create-react-app The -g flag in the command above installs the NPM package globally on the machine.
Once this installation is done then we can create a basic react application. Just enter the following command create-react-app mydemo So once you run the above command it will create the mydemo directory in your local machine. If you check inside the mydemo directory, you can see all the files that you required for your project (i.e. boilerplate). Now just enter the following command and on you will get your simple react application. localhost:3000 cd mydemo
npm start I hope that it was easy and fast to create a react application. Now we will move to the next step that is Firebase setup. 2. Log in to the Firebase Console and create a new project: Now we are going to set up the Firebase. First, login into the Firebase Console by using this link .You can log in by using your Google account and click on create a new project button mentioned in the name of your project and follow some steps and your project is ready. https://firebase.google.com/ In the Firebase console I have created project Reactdemo Once the project is created, you have the ability to add Firebase to any Android or iOS mobile app and even a web app. 3. Deploy React app by using Firebase Hosting: Step1: Install Firebase tools: First, we need to install the Firebase tools that will allow you to deploy your app. You can install the tools by running the following: npm install -g firebase-tools Step 2: Login to Firebase in your terminal The second step is we will now need to login to Firebase in your terminal. You will be prompted to enter your login details (email and password) if you're not already logged in. Also, please make sure that you are inside of the React application that we have created before. For eg your terminal will look like ~/mydemo. Run the following command firebase login when you enter it will redirect you to the Google sign-in page. There select the account that you have used to create the project on a Firebase in the second part. yes Before initializing the Firebase first create the build for your react application. So in React by using the following command you can easily generate the build for your app. npm run build Step 3: Initialize Firebase in Your React App In the third step we are initializing the Firebase account with our react app by using the following command: firebase init When you run this command you need to answer some of the questions that I have shown you in the below image For the first question select option . Hosting: Configure and deploy Firebase Hosting sites In the second question that is Project setup, Select , and in that select Firebase project name that you have created in part 2, my project name is ReactDemo so I have select that. Use an existing project And the last part is the Hosting setup part here you will need to specify the folder where Firebase will look for assets to deploy. By default, the build folder will contain the production assets. So Enter build as an answer to this option. For Configure as a single-page app question enter for this option. y The last question is whether or not to overwrite your existing . So You'll want to enter for this option because we want actual index.html file that Reacts is generated while creating the build. build/index.htmlfile N (No) Once the initialization part is done you can check the directory, you should see two new files . These files are automatically generated. .firebaserc, firebase.json Step 4: Deploy React app The fourth step is to deploy your app. Now that everything is set up, you can go ahead and deploy your app! The only thing you need to do is run the following command: 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 You can also see the list of deployment records inside the Hosting tab in the Firebase project on the Firebase console. Yeah, 🎉We have successfully deployed our React application with the help of Firebase Hosting.  Enjoy Coding 😊

Google

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - React

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - Software Developer of the Year

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Deploy a React Application With Firebase Hosting

How to Deploy a React Application With Firebase Hosting

Too Long; Didn't Read

Company Mentioned

Snehal Narkar

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

How to Deploy a React Application With Firebase Hosting

Too Long; Didn't Read

Company Mentioned

Snehal Narkar

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES