Amongst the major announcements of last week’s I/O, Google’s annual developer conference, was the release of the new (& awesome) Firebase. Firebase is renowned for it’s realtime database that allows for instantly synchronizing entries between mobile clients (Android & iOS) and the web. One feature that is lesser known will be the focus of this post: the ability to host static sites and web apps.

Last Saturday I gave Firebase’s hosting feature a try and shared my experience. The response from the developer community was overwhelming and very positive; people were interested in reasons why to choose Firebase and what features it allows to use.

The upsides and downsides of GH Pages

As a quick reminder: I’ve been using GitHub Pages as a comfortable way to host my blog (and a variety of side-projects) for a couple of years. GH Pages is fantastic when it comes to quickly deploying your site, offers native support for Jekyll, comes with GitHub’s own SSL certificate for sites that run on their domain (github.io) and even allows for quickly editing your project directly in the browser.

Sadly GH pages doesn’t allow for configuring your site’s HTTP headers (like setting the Cache-Control header) to optimize performance and your application’s behavior. When using custom domains (ergo your own domain) with GitHub Pages you loose the convenience of SSL protection.

My move to Firebase

Amongst the features that come per default with Firebase Hosting are an amazing CDN, SSL per default, one-click rollbacks and a really fun CLI that allows for easy configuration and deployment of your project.

My project, this blog, consists of three folders - data (static json files that I use to manage certain resources such as my blog’s events page, source (this is where my Ruby code, my posts, and my blog’s templates reside) and build (you see the result here); for this kind of project it’s only relevant to deploy the content of build; Firebase allows for configuring your project’s public folder in the firebase.json (check out the docs for more information).

In addition to that, you can also define URL rewrites to clean-up your application’s URLs (for example: remove trailing slashes or redirect certain pages) and customize your application’s headers based on file specific glob notation. This is useful for optimizing your page’s performance by tweaking the default caching behavior (check out this great doc on the Cache-Control header) or setting up Cross-origin Resource Sharing.

Your thoughts

I hope this post helps clarifying some of the questions I’ve received around hosting static web applications with Firebase and I’d be happy to hear your thoughts! Please feel free to contact me via Twitter or G+!

comments powered by Disqus