In this tutorial,  I will take you through all the steps involved in the firebase deployment for react web application.


Let’s get right into it.

Prerequisite

  1. You have to install Node.Js & NPM in your local system.

  2. You have a react project ready to deploy.

  3. You need a Gmail account for the firebase console.


This Article divided into Five main parts

  1. Create a sample react application

  2. Create a Firebase project.

  3. Setup Firebase Tools

  4. Connect your firebase project to your react application.

  5. Deploy your application

1. Create a sample react application:

 

  1.  Create a new react application using a create-react-app package


npx create-react-app deploy-firebase


This command will create a new react application inside a folder called deploy-firebase.


  1. Let’s run our new react application.


cd deploy-firebase
npm run start


After npm run start command your react application starts running. you can open http://localhost:3000 in your browser to see the app running.

2. Create a Firebase project:

  1. Goto Firebase account and click on the Create a project button and fill in the project details



  1. Give your firebase project name and click on continue and then you can enable or disable the google analytics option, click on continue and then finally select an account for Google Analytics(you can use the default account) and click on Continue.



That's pretty much what you need to do in the firebase console.


  1. Setup Firebase Tools


  1. Install firebase-tool package globally in your system

npm install -g firebase-tools


  1. Next, you need to login into your firebase account using the below command.

Firebase login

  1. Follow firebase CLI prompts and will open the web browser for authentication then it will show an authorization code then copy it and paste it in the CLI prompt.


After logging in, you’ll see the below message in the terminal.

✔  Success! Logged in as XXXXXXXXX@email.com


  1. Connect your firebase project to your react application.

  1. Initializes the firebase project using the firebase init command in the current project folder.

firebase init


  1. Select Hosting: Configure and deploy Firebase Hosting sites.

  1. Select Use an existing project

  1. Select your project that we have previously created in the Firebase console.

  1. Next prompt, what do you want to use as your public directory? Unless you changed the default configuration, you’ll want to enter build for this option.

  2. Next, Configure as a single-page app, you’ll enter Y for this option.

  3. Next File public/index.html already exists. Overwrite?  you’ll enter N for this option.

 i.  After you have completed the initialization,  simply check the presence of .firebaserc and firebase.json files. These are automatically created by firebase during the initialization process.

     That's pretty much what you need to do for a connection to your application.

5. Deploy your application

  1. You need to generate a production build for your react project. Using the below command.

npm run build  


  1. Finally, run your deploy command.

firebase deploy 

Your React Application is now deployed with Firebase hosting. 

Some Useful firebase-CLI commands:


Debug error while deploying your application.

firebase deploy --debug

Switch between your firebase projects.

firebase use <project_id>


Start the emulator and test locally your application.

firebase emulators:start


Print all your firebase projects.

firebase projects:list


Logout to your firebase account.

Firebase logout


For More commands click here