How to host a React App on Firebase in 30 seconds?

Be aware!!! Depends on your internet speed.  

Well, fun aside if you really want to do it quickly you can grab the  react - firebase boilerplate from this repo. I have enabled firebase cloud functions & hosting. At the time of writing it has the latest react starter app and I have added interactive upgrade script as well. I am planning to add more features like git/bitbucket CICD etc later on.  

1. Clone the repo git clone https://github.com/razorRun/react-firebase-boilerplate
2. Run npm run setup
3. Select needed firebase products using space bar when prompted (Funtions, Database, Hosting for this project)
4. Make sure you answer web/build to "What do you want to use as your public directory?", Rest you can leave default (See the image below).
5. If everything went right you should be able to see the app on http://localhost:5000/
6. Run npm run deploy to deply into firebase cloud hosting.

• Tip: To serve the app later, run firebase serve or npm run serve
• Tip: To update run all the packages npm run update FYI: make sure you have yarn installed

Or else you can go through following steps to create the project manually.

1. Install firebase tools npm install firebase-tools -g
2. Login to firebase firebase login
3. Create the project folder and Run firebase init inside the folder.
4. Select needed firebase products using space bar when prompted.
5. Make sure you answer web/build to "What do you want to use as your public directory?", Rest you can leave default by pressing enter(See the image above).
6. Create an react app using create-react-app run npx create-react-app web. Note here we use the name as web to make sure we create the react build folder on the correct path firebase hosting.
7. Run cd web && npm run build to generate the build output.
8. Go back to the parent folder and run firebase serve to serve locally or run firebase deploy --only hosting to deploy.

voilà!! Hopefully you enjoyed this quick digest.