Hosting a React App on Firebase

Part 2 of A simple guide to hosting a free website using React and Firebase

So you followed the last post and now have a React App running on your Mac. That’s great, good for you. But now you want someone else to be able to use your app. Well greedy chops, read on.

Step 1: Install Firebase CLI

In Terminal or VSC enter the following to install and login to Firebase.

npm install -g firebase-tools
firebase login

Step 2: Initialize Firebase

Make sure you are in your project directory and enter the following to initialize a Firebase setup for your app.

firebase init

This will give you the following list of options to install

• Database: The Realtime Database
• Firestore: The New and Improved Database
• Functions: Custom Node functions that you can run, such as API’s
• Hosting: Allow your site to be accessed by anyone
• Storage: Security rules to allow Photo and Video uploading
• Emulators: Allows testing of Functions, Database on local machine
• Remote Config: Release new features to a small population of users first

Select just Hosting for now to make things easy, then select the following options.

• Select “Create a new project” unless you already created one in the firebase UI.
• 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? Up to you

Step 3: Build and Deploy

Whilst you can run your react app locally you will need to build a production build before deploying.

npm run build
firebase deploy

It should give you a link to your app, something like https://trrrends.web.app click this to see that spinning atom of joy.

This is part (2 of 3) of the Series “A simple guide to hosting a free website using React and Firebase” next up is Part 3: Firebase Hosting on a Google Domain