Deploy a React Web App to Firebase & Make It Act Like a Mobile App
By: Tyler J Funk
Tags: Progressive Web App, Firebase, Deployment, React, App Development

Deploying to Firebase

I have already made account on Firebase, but if you are wanting to follow along, you’ll need to do that first.

Once logged in, go to your console:

The next screen will show you the Firebase projects you’ve previously deployed and also gives an option to “Add Project”, that’s the option we want. After clicking it, we should see a screen that asks us to name our project. You can tell if a name is not taken by making sure the suggestion underneath the name you typed matches (not case-sensitive), like so:

After finding the proper app name and hitting continue, the next two steps are about whether you would like to participate in the Google Analytics or not. Totally up to the developer, if I choose to participate (I usually say why not), I always choose the default account option for step 3.

Hitting continue on step 3 will begin the creation of your Firebase project and when it finishes, you should see something along these lines:

Upon continuing, Firebase takes us to the project dashboard, where we will next click the “Hosting” tab in the left menu:

Following that, click the “Get Started” button, which will show us more instructions, that are all pretty self explanatory. From the project’s root directory, the instructions start with installing the Firebase CLI:

npm install -g firebase-tools

The next step is to log in to Firebase:

firebase login

Since I am already logged into Firebase, it simply says I am already logged in, for someone not logged in, it may redirect you to a web page where you can verify your account.

Before the next step however, I think it is important to note; it is necessary to have a production build of your app in order to host a React app on Firebase. This is something I stumbled on the first time or two I tried deploying a project, and partially the reason I’m including this section in this article.

In the next step we will specify that we want our app to be initialized from the build folder, so in order to do that, we have to make sure our app has one. The command I used to make a production build is:

npm run build

Here’s what my terminal looked like once the build folder was completed:

After that, you should now be able to see the build folder in the file tree. Returning to the terminal, we can enter the next command:

firebase init

Take a look at the menu that pops up:

As you can see in the image above, I have selected the “Hosting” option from the menu, by using the arrow keys to navigate, and the space bar to make a selection. As it says, I then hit enter to continue, bringing up the next set of questions, each starting with a “?” symbol:

Breaking down the previous initialization steps:

Selected “Hosting” Selected “Use an existing project” Selected the “Tic-Tac-Toe-Tyler” Firebase project Entered “build” for public directory Selected “y” (yes) for configuring as a single-page app (React is a single page framework) Selected “N” (no) for automatic builds and deploys with Github — this one could definitely be useful, but chose to skip it for the sake of this article, consider enabling this for your app. Selected “N” (no) when asked if I wanted to overwrite the already existing build/index.html file.

We can now finally put in the fitting, final command:

firebase deploy

Which gives us this result:

So if we go to the hosting URL it suggests, we can now see the app live in action:

Browser

Mobile browser