How to Deploy React App on Firebase

Home >> Blog >> How to Deploy React App on Firebase
Author - Full Stack Tutorials Mar 19, 2022
Deploy React Apps on Firebase
Deploy React Apps on Firebase - Let's learn - How to deploy React App on Firebase in just 5 easy steps.

Note - Let's suppose you are using create-react-app for crating your react app.

Following are the step by step solution to deploy react app on firebase

  1. Create React App
  2. Install Firebase Tool
  3. Login to Firebase Account
  4. Initialize Firebase App
  5. Make a New React Build and Deploy
1. Create React App:

Create your react app using - create-react-app command. (Ignore this step, if already installed)

npm install -g create-react-app //Windows sudo npm install -g create-react-app //Linux and Mac create-react-app myReactApp cd myReactApp npm start
2. Install Firebase Tool:

Install Firebase Tool globally using - npm install -g firebase-tools command.

npm install -g firebase-tools
3. Login to Firebase Account:

Login into your firebase account (for this you need a GMAIL Account)

firebase login
4. Initialize Firebase App:

Now initialize your firebase app, using firebase init command.

firebase init

Firebase Init has few step you should follow very carefully

Note- Please use space key to choose and enter key to proceed

  1. Choose Hosting: Configure and deploy Firebase Hosting sites
  2. Choose [create a new project] - Select an Unique Project Id (it will be shown in your firebase app url)
  3. What do you want to use as your public directory? (public) - click and remove public and type - build and proceed.
  4. Configure as a single-page app (rewrite all urls to /index.html)? - Yes
  5. File build/index.html already exists. Overwrite? - No
5. Make a New React Build and Deploy on Firebase:

Before deploying on firebase make a new build using - npm run build command.

npm run build

Now final step, deploy your react app on firebase.

firebase deploy

Now, on terminal you will see a firebase app url like - https://<Firebase_Project_ID>.web.app

Congrats!, You can now use this public firebase url of your app and you can access your app using any web browser.

You may also like: Deploy a react app to a subdirectory