Deploy React App to Firebase

Deploy React App To Firebase

Getting Started

Today we will deploy our React App to Firebase.

To deploy our React App, First we should have a React App and have created a firebase project.

For creating a firebase project, you can follow this link.

Please select ‘Add Project’ and continue with the form and create a firebase project from above link.

Add firebase project

Type firebase projects name

Here, I have selected project name as sampledemo on firebase.

The name of the React app and the firebase project can be different.

Selection of Google Analytics

For google analytics, you can choose to enable it or not. Here, I will enable it.

After enabling the google analytics, you should choose the account for google analytics. Here, I choose the default firebase account.

Then google will create your firebase project.

Select continue, and you will be directed to your project dashboard.

Firebase project dashboard

You can always access your firebase projects through this link.

Now, let’s create a sample React app.

I hope you have installed required packages for React Application like npm and yarn packages.

I will be using yarn package.

Open your terminal or powershell and navigate to your desired directory and create a React App named sampledemo .

$ yarn create react-app sampledemo

After successful creation of react app, move into your projects directory(sampledemo).

Then run your app for the first time.

$ yarn start

You will be directed to the following tab in your browser.

React App

Up To now, we have set up both a react app and a firebase project .

Stop the react app by Ctrl+c in the terminal.

Setting up Firebase CLI(Command Line Interface):

We need to install the firebase CLI tools by :

$ yarn add firebase-tools

OR

$ npm install -g firebase-tools

You can also follow this link.

After installation, we should login to our firebase account.

$ firebase login

You will be redirected to the browser for authentication.

Firebase Deployment:

Now, lets initialize the firebase project.

$ firebase init

Firebase Project Initialization using Firebase CLI

Here, we will see the content as in the above image.

We have to select our choice which is Hosting for now. Move the cursor with up/down arrows to Hosting and press Space for selection and then press Enter.

Then select to Use an existing project and press Enter.

Here is the list of your firebase projects. I will select the project named sampledemo-2ede5 and press Enter.

Then follow the image below:

After this, our project set up is completed.

We will now build the project.

$ yarn build

This will bundle the files for production into a directory named build within the project directory.

Now, deploy the project to firebase:

$ firebase deploy

It will also give us the hosting url.

You can check my hosted sampledemo React app here.

You can also check the url from your firebase project dashboard from here and select hosting inside Build on the left hand side.

Firebase project dashboard with projects hosting overview

Here, you can see your url, and your deployed versions and you can also add your custom domains.

We can also build our project first and initialize firebase project after. But, we have to select not to replace our index.html file in build directory while initializing the firebase project.

References:

[1] Firebase CLI reference