Deploy React Project In Firebase

configuring Firebase

Install Firebase CLI

To host your site with Firebase Hosting, you need the Firebase command-line tool (CLI). Run the following npm command to install the CLI on your system globally:

$ npm install -g firebase-tools




Login to Firebase

Make sure you're in the root directory of your React app and run the following command to login to firebase in your terminal:

$ firebase login

If you're not logged in, you'll be asked to enter the credentials for your google account.

Initiate your project

Now that you've got the firebase CLI configured, it's time to initialize firebase in your react app. Run the following command:

$ firebase init




You will now enter the firebase tools shell and will be prompted with a sequence of questions and various configuration options. Let's go through these questions together step by step to achieve our desirable configuration.

Select - Hosting: Configure and deploy Firebase Hosting sites.

Select - Use an existing project

Select the firebase project that you created (e.g.  reactfirebaseWebsite)

********* Here is My Data **********

E:\REACT\react2021\reactWebsiteAugust\reactpay>firebase login

Already logged in as xyz@gmail.com

E:\REACT\react2021\reactWebsiteAugust\reactpay>firebase init

     ######## #### ########  ######## ########     ###     ######  ########

     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##      

     ######    ##  ########  ######   ########  #########  ######  ######  

     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##      

     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  E:\REACT\react2021\reactWebsiteAugust\reactpay

? Are you ready to proceed? Yes

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: reactwebsite-e7aeb (reactwebsite)

i  Using project reactwebsite-e7aeb (reactwebsite)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

+  Wrote build/index.html

i  Writing configuration info to firebase.json...

i  Writing project information to .firebaserc...

+  Firebase initialization complete!

Getting Your React App Ready for Deployment  

Run the following command to create a build directory with a production build of your app:

$ npm run build

Deploy To Firebase

Just run the following command to deploy your app:

$ firebase deploy

Here is the code:

Complete Code Complete React Website