Firebase Hosting 101

Prerequisites:

• GitHub account (having bash set up and knowing a few basic .git commands in terminal will come in handy!)
• Firebase account
• Node.js installed (Optional: Install yarn as well, if you don't already have it. I will be using yarn mostly in this project.) Firebase tools globally installed: npm i --global firebase-tools or yarn global add firebase-tools. Don't forget to add sudo if your on mac or Linux when installing packages globally.
• We should also have serve installed so we can run our build folder on a local server. More on why later, to install serve globally simply use: npm i --global serve or yarn global add serve.

About this tutorial:

Firebase is an incredible platform to connect any iOS, android and/or web app too. By connecting your project to Google's Firebase you will have access to their cloud storage, cloud firestore and real time database, authentication, analytics and much more.
Firebase handles all of our hosting and back end needs in on place that is incredibly easy to use, once you know how. In this tutorial we are going to cover only how to deploy a react app to Firebase. I am going to use the create-react-app we've hosted in the next tutorial on how to set up user authentication with Firebase using hooks and redux so stay tuned for that!

Let's get started!

Step 1:

Let's start by creating a new project on GitHub!

Fig. 1

Now lets name our project, and we can give it a description and an MIT license if we want to. I did not give it a README or a .gitignore because CRA will give us both of those things.

Fig. 2

Now that our project has been created on GitHub lets copy that HTTPS or SSH (which ever you use) link and clone it to our computer!

Fig. 3

Once we've cloned our project in the directory we want to use, before we cd inside of that directory we can run create-react-app <name-of-your-project> and it will run CRA inside of the repo we just cloned as long as we name it the same as the cloned repo when we run CRA. Now we have our CRA in the root and can cd inside our project directory and yarn start. Note: If you want to use npm, then delete your yarn.lock file so that you don't have a yarn.lock AND a package-lock.json file in the same project. This can lead to issues, however, I personally recommend sticking with yarn.

Fig. 4

Set 2:

Now that we have our project setup in GitHub and cloned to our computer lets set up our project in Firebase! Go to firebase.google.com and create a project.

Fig. 5

Name your project.

Fig. 6

Google analytics is enabled by default, we might want to use it later so let's leave it that way.

Fig. 7

Let's just select "Default Account for Firebase" option for now.

Fig. 8

Congratulations, you now have a Firebase project!

Fig. 9

Step 3:

Now that we have our GitHub repo created and cloned to our computer and we've created our project on firebase it's time to connect the two together and get our React app out there for the world to see! Let's take a dive in our terminal and set things up! In our project's root directory lets run firebase login and select yes when it asks up to allow Firebase to collect information.

Fig. 10

After selecting 'yes' it will open our browser and ask which google account we want to use to sign in. Select the account we used to create our Firebase project.

Fig. 11

Now let's allow Firebase CLI to use our Google account:

Fig. 12

And, wallah!!! We are now logged into Firebase and can use our Firebase account in our terminal.

Fig. 13

Set 4:

Now it's time to create a build folder that will be the source we want Firebase to look at when it deploys our web app. To do this simply run yarn build or npm run-scripts build

Fig. 14

Then we can run serve -s build. This will run our build folder on a local server. The build folder will only update every time you run yarn build or npm run-scripts build. You could go into your build folder and manually edit it, however I would not recommend doing that.

When we deploy our app on firebase we want to deploy what's in our build folder, so it's a good idea to spin it up on a local server and make sure everything looks and works right. Once you have verified that the build was successful you could ctrl/cmd + c to stop the server inside our server and we can move on to the next step...

Fig. 15

Step 5:

It's time to initialize firebase in our app! The command is firebase init. It will ask you which Firebase CLI features you want to set up. Use the down arrow key to highlight Hosting and then press the space-bar to select. Once you've selected Hosting, hit enter/return to continue.

Fig. 16

Now select Use an existing project.

Fig. 17

Now let's select that project we created on Firebase earlier, we only have one project created, and we see that's the only option here.

Fig. 18

It's now asking us what we want to user as our public directory. We want to type in build here so that we are hosting what we've built to our build folder.

Fig. 19

Our project will be a single page React app so, we are going to want to say y for yes when it ask's us how we want to configure our app.

Fig. 20

Then it's going to ask us if we want to overwrite our build/index.html. Let's give this a big fat N for NO WAY! If we say yes, Firebase will overwrite that file with Firebase's own boilerplate index.html and we will see that instead of our site. If you do accidentally say yes here then all you have to do is run yarn build or npm run-scripts build again to overwrite Firebase's index.html and get our site back up and view-able again.

Fig. 21

And wallah!!! Firebase is initialized and it is time to...

Step 6:

Deploy!!!
Type firebase deploy into the terminal and Firebase will deploy your site and give you back a hosting URL that you can go to and see your site live on the internet for the world to see! Congratulations, friend. We made it!

Fig. 22

Fig. 23

Thanks for following along with me this far. I'm going to use this project as the base for my next Firebase tutorial where we will go over authentication and Redux using hooks, so be sure to subscribe and stay tuned! Cheers

Comments

[Karim Maassen]

Hi Jimmy! Thanks for writing this. Good stuff :)

I have a quick question though. I'm currently setting up a Firebase project. I'm struggling with the concept of regions. I prefer to have to web app be available (read: optimized) for the entire globe. Firebase, however, forces me into choosing between regions. A US optimized app might not perform as well for Europeans and the other way around.

Any ideas how to go about this issue?

[Jimmy McBride]

If you want worldwide optimization I would look at AWS. You can get a year free within certain limits. AWS is a beast though.

[Karim Maassen]

I see. Too bad though, I really like the 'plug and play' nature of Firebase, while at the same time still being powerful and flexible. I remember vaguely in the past the global propagation of their DB and hosting. Maybe that changed... (I refuse AWS with a passion btw :P)