Deploy to Firebase Hosting

A quick simple guide to deploy your static website to Firebase

5 min readAug 15, 2021

What is Firebase Hosting?

Firebase is Google’s mobile application development platform. Firebase Hosting is a Google hosting service which provides static web content to the user in a secure, fast, free (under Spark Plan) and easy way.

Why Firebase Hosting?

Use case

I have a goal in mind. I want to deploy my simple static personal website, install Google Tag Manager to my website, and seamlessly integrate it to Google Analytics 4 and BigQuery and build dashboards on Data Studio. The challenge here is that I need to decide on which tech product or versions to use to suit my need.

I did some research, find out how each of the product works and shortlist to Firebase vs CloudStorage. I decided to go ahead with Firebase because I believe Firebase is easier to integrate with GA4 and BigQuery which I need to analyse web visitors base and track web events. With CloudStorage, I have to gets my hands dirty on the networking part. For example, I need to set up a load balancer and also have to pay extra for getting an SSL certificate to convert my website to a secure one with https.

Firebase Hosting under Spark Plan is free. It by default provides SSL certificate and offers an impressive speed across multiple geographic locations without the need for a separate CDN on top.

Firebase Pricing

In terms of pricing, in my use case which is to find a platform to host a simple static website which probably doesn’t really exceed 1GB. I’m still under Firebase Free Spark Plan.

Pre-requisites You’ll Need to Get Started

An activated Google Cloud Platform account
Google Cloud SDK

Quick-start Guide

1 — Creating a Firebase App
Navigate to Console Firebase > Create an account > Create a project > Enter your project name > Add Firebase to one of your existing Google Cloud projects (optional).

Below is a series of my screenshots representing every step of the process. In my case, I enable Google Analytics but you can opt out if you want.

2 — Install Firebase CLI (Pre-requisite: Install Node.Js)

Check if you’ve installed Node.js: run

node -v

it shows version number meaning Node.js had been installed

Install Firebase CLI: run

npm install -g firebase-tools

Debugging

Error: You may encounter this error:

Error: npm WARN deprecated request@2.88.2: request has been deprecated

Workaround:

Install Firebase CLI: run

sudo npm install -g firebase-tools

Check if Firebase has been installed: run

firebase -V

It worked YAY! It shows version 9.16.5

3 — Initialise my Project

Now using the terminal, make sure you’re in your project’s directory and log in to firebase: run

firebase login

Initialise your project: run

firebase init

Below is my screenshot of what will appear after running firebase init . Follow screenshots for detailed steps.

Press <up> <down> arrows to move up down; <space> to select features, <a> to select all choices, <i> to invert selection, <enter> to confirm your choices

Here, I select Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys. (Navigate by pressing<down> <space> > <enter>)

4 — Preparing Project for Deployment

Before deploying, you need to prepare project for deployment. If you notice, after you ran those commands above when initialising your project, there’s a public folder created in your project’s directory. Everything in this public folder will be deployed later, so make sure you move all your website files here.

5 — Including the Firebase SDK

Upon creating your Firebase app, you will see a code snippet (screenshot below). Copy the code block and paste it into the bottom of your <body> tag in your .html file(s).