How to deploy react app on firebase

Home >> Blog >> How to deploy react app on firebase
By Admin Jun 22, 2020
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 you React App
  2. Install Firebase Tool
  3. Login to Firebase Account
  4. Initialize Firebase App
  5. Make a new React Build
  6. Finally, Deploy on Firebase
1. Create you 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:

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

npm run build
6. Deploy on Firebase:

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

After this, use that url using any web browser, Enjoy!