Serving a static website using Firebase Hosting

How to (mis)use Firebase Hosting to host a static website for free.

Firebase provides mobile app developers with some nice ready-to-use backend services such as user authentication, real-time database, crash reporting, and analytics. Many apps nowadays come with static content that is loaded on demand and not built into the app. For this type of content Firebase provides a hosting solution called Firebase Hosting.

According to the pricing information (as of time of writing), one Gigabyte of data storage and 10 Gigabyte of monthly data transfer are free, including TLS certificate and custom domain. That makes Firebase Hosting interesting for serving static websites. One might argue, though, that this is not really what it was made for. On the other hand, in times of mobile first (or mobile only), chances are high that most users of a website are mobile users (whatever that means).

Bringing the cake online

Let’s assume we have a static website that informs visitors about the cake being a lie.

cakelie website screenshot,small

The website is fairly simple: It consists of a single HTML page and a picture of the virtual cake. Virtual, because the cake is a lie and you will never have it! 😉

$ tree
.
├── index.html
└── index.png

0 directories, 2 files

I found that small websites like this, for example statically rendered source code documentation, are perfect candidates for this kind of hosting services.

Create a Firebase project

Before we can create a Firebase project for our cake information portal we have to install the firebase-tools package via Node package manager:

$ npm install -g firebase-tools

If we have never logged into Firebase from the command line before we will be missing credentials to perform actions in the next steps. Let’s login first to get this out of the way:

$ firebase login

With the tools installed and credentials set up, we can initialize a new project in the current folder. Note the fancy unicode output of the firebase-tools! 😎

$ firebase init
✂️
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then En
ter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
✂️
 ? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ [create a new project]
? What do you want to use as your public directory? public
✂️
? Configure as a single-page app (rewrite all urls to /index.html)? No
✂️
✔  Firebase initialization complete!

We select Hosting only and create a default project. Using the public/ folder for files is fine. But we do not want to merge everything into a single index.html file. We will take care of the content ourself.

Now we have to head over to the Firebase Console and create a new project there as well. Unfortunately, the command line tools do not support new project creation yet.

new firebase project

Now we need to link our local project with the project we just created at the Firebase console:

$ firebase use --add
? Which project do you want to add? cakelie-static
? What alias do you want to use for this project? (e.g. staging) production

Created alias production for cakelie-static.
Now using alias production (cakelie-static)

Deploy the project

We are almost there! Before we deploy our project we have to move our static files to the public/ folder:

$ mv index.{html,png} public/

Fasten your seatbelt, we are ready to deploy:

$ firebase deploy

=== Deploying to 'cakelie-static'...

i  deploying hosting
i  hosting: preparing public directory for upload...
✔  hosting: 3 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/cakelie-static/overview
Hosting URL: https://cakelie-static.firebaseapp.com

Here it is, the website is deployed and ready, including a valid TLS certificate and fully backed by a Content Delivery Network (CDN):

cakelie website in browser

Custom domain

Another nice feature of Firebase Hosting are custom domains. I mapped the cakelie.net domain to the Firebase project and can now stop worrying about hosting this particularly important website myself. 😂