Hosting React App On Firebase

In this article, We will be going through the process of deploying a React.js application with Firebase hosting. we're going to cover the following points:

• Create a React application with create-react-app

• Log into the Firebase Console and create a new project

• Deploy React application using Firebase Hosting

Requirements for hosting React application in Firebase

• Node.js installed
• Code editor - I prefer Visual Studio Code
• Google account - we need this to use Firebase

• React

  What is Firebase Hosting

When building any project we have to host it somewhere so that our application can be accessed via public URLs. we can now host our React project on Firebase within a few minutes with the setup below.

1. Create a React Application:

The first step is for us to create a basic react application using create-react-app. create-react-app is a tool that provides you with a boilerplate for react applications. It saves you from time-consuming setup and configuration. To setup React use the commands below:

npx create-react-app my-app
cd my-app
npm start

2. Log into the Firebase Console and create a new project:

The second step is to login into your Firebase console by using your google account.

• Step1: After you login into the firebase console, Create a New Project as shown below

• Step2: To enable Firebase Hosting, Click on the Hosting section by going to the build dropdown

• Step3: Click on get started.

3. Deploy your React application using Firebase

• Step1: Install Firebase tools:

Install the Firebase tools that allow you to deploy your React app. Run the following command to install Firebase tools:

npm install -g firebase-tools

• Step2: Login into Firebase using terminal

The second step is to log in to Firebase using your terminal. You will be prompted to enter your Firebase credentials(email and password) if you are not logged in yet. Run the following command:

firebase login

You will be redirected to the google sign-in page. Select the account of your Firebase project

• Step3: Build your React app

Before initializing the Firebase, first create the build for your react application. In React by using the following command you can easily generate the build for your application.

npm run build

• Step4: Initialize Firebase in Your React App

The fourth step is to initialize the Firebase account with our React application by using the following command:

firebase init

• After running the above command you will need to answer some of the questions as shown below:

• For the first question select option Hosting: Configure and deploy Firebase Hosting sites.

• For the second question which is Project setup, Select Use an existing project, and in that select the Firebase project name that you have created in part 2, my project name is paul-react-hosting s o I have selected that.

• What do you want to use as your public directory? (public). By default, the build folder will contain the production assets. So type build as an answer to this option.

• For Configure as a single-page app question enter yes for this option.

• Set up automatic builds and deploys with GitHub? (y/N). Select N (No) for this option

• The last question is whether or not to overwrite your existing build/index.htmlfile. So You'll want to enter N (No) for this option because we want an actual index.html file that Reacts is generated while creating the build.

• Once the initialization part is done you will see a message Firebase initialization complete! , you can now check the directory of your React app, you should have two new files .firebaserc , firebase.json. These files are automatically generated.

• Step5: Deploy your React App

• The final step is to deploy your React application.

• Run the below command to deploy your app:

firebase deploy

Once you are done running the command, Firebase will give you a unique Hosting URL where you can access your deploy application. Example: Hosting URL: https://paul-react-hosting.web.app

Congratulations 🎉, We have successfully Deployed Our React Application using Firebase Hosting. Happy Coding 😊.