Gateway to Firebase: hosting

An article for you who is not yet on board with Firebase, but curious about what benefits it might bring you. Out of all the features in the suite, the simplest one to get started is: hosting.

This article will show you how to get up and running in two simple steps (three if you’re into geeky things) and after you’re done you will have all of the following for free (free as in free beer):

• Lightning fast website
• SSL certificate for your own domain
• Fire-and-forget deployment model
• No bullshit surprise updates to your CMS or web platform that suddenly breaks your website

If you’re not running some big scale operation, most of your Firebase needs (especially hosting) can be covered well within the free pricing tier. But you shouldn’t take my word for it. Check it out yourself to make sure that you belong to “those people with most needs”.

Firebase hosting also works great with custom domains and you even get an automatically deployed SSL certificate for your custom domain name (so that your website will be served over HTTPS instead of HTTP).

Connect a Custom Domain | Firebase

Edit 12 Feb 2017: I’ve updated the article regarding Firebase’s support for multiple applications linked to the same APEX domain. In my previous experience and by my knowledge it wasn’t working. I’ve now confirmed that it works absolutely fine to link several Firebase apps to the same domain, as I’ve done with Kumpul Coworking Space’s official website (and work in progress site)

• kumpul-website-prod.firebaseapp.com → www.kumpul.co
• kumpul-website-dev.firebaseapp.com → dev.kumpul.co

Prepare for some down time!!!

After linking your custom domain it will take some time for the SSL certificate to get deployed. So make sure that you do your custom domain linking at a time when you can afford about 1 hour of down time before the certificate is properly associated with your website’s new home.

Firebase hosting is a host for static websites

Firebase hosting does not support any server side scripts such as Ruby, PHP, Python or anything else that is processing your files before output. That would require a application engine such as Google App Engine, Heroku, or similar. The hosting service is a static website hosting service. But you know what is not server side script? JavaScript!

Since JavaScript is a client side script, you can host complex JavaScript applications such as Single Page Applications built on Angular, Polymer, React etc.

Throw out your WordPress website

Perhaps I’m asking a lot to not only ask you to try out Firebase, but also to throw out your old WordPress blog. But hear me out. There are benefits.

I can give you at least 5 personal reasons for throwing WordPress out. But for the sake of this article, it’s as simple as: because we can only host static websites on the Firebase hosting service.

Instead of managing your website or blog on a CMS, such as WordPress that dynamically generates web pages, I am proposing a static website generated with Jekyll and deployed through Travis CI as an alternative.

You might be surprised on how well that works and that you might not at all be needing any complex and heavy website managing tool. Jekyll does all the heavy lifting once, in a large batch processing of all your files and content and you can set up a small Travis script to run the operation regularly.

Step 1

Get your Jekyll site set up. It’s simple and you will feel like an expert in just a weekend worth of playing with it. Read up on how to get started by yourself, because it’s outside the scope of this article.

Jekyll * Simple, blog-aware, static sites

Step 2

Create a Firebase project in the Firebase dashboard and initialize the project in your website root.

$ firebase init

Remember that you don’t need to use the Firebase database features for this project. Only setup the hosting.

The next step is to change the default folder from which Firebase will look for your HTML files to serve. Change the name from “public” to “_site” which is Jekyll’s default output directory.

Done, now your Jekyll site is ready to be deployed directly to Firebase hosting. Try it yourself:

$ jekyll build
$ firebase deploy

Step 3 (extra credits)

So getting started was easy. But after finishing this extra Setup your project to be automatically deployed to Firebase with Travis CI. First, if you haven’t already done it, go ahead and create a Github repository for your Jekyll website. Make it open source to be eligible to utilize Travis for free.

Create the following .travis.yml file in the root of your git repository.

This file should be copy-pasteable with little or no modifications. But to help you determine what parts that you might want to configure differently, I’ll explain.

The build process will mainly be working in a Ruby environment, since Jekyll is build with Ruby. But we’ll need NodeJS for the Firebase Tools NPM package.

Please note that this script is configured to run and expect HTML proofer to succeed before before proceeding to the actual deployment step. And the observant reader might have noticed the “http status ignore” switch that is there, in this case, to tell the proofer to ignore LinkedIn URLs that doesn’t resolve.

Speaking of Firebase CLI tools

Before you try to deploy your project via a Continous Integration service, such as Travis CI you need to setup a deploy key with the following command:

$ firebase login:ci

This will open a tab in your web browser to ask you to authorize the integration with Firebase. The token which is produced as a result of this command is very super secret and you should only keep it as a variable in your Travis settings.

The Firebase deploy key must be used in all Firebase CLI tool calls with the “token flag” as you see in the script. For the deploy command, you must also include “non-interactive” to tell the interpreter that there is no human interacting with the command. The command will assume defaults on all/any need for confirmation. And defaults are fine since we script everything to be properly set up before running.

Nice to have

In the part of deploying to Firebase there are a few things that I find useful. For example, I like to put in a bit of meta-information in the deploy message to be able to trace back the deployment in the Firebase dashboard to the corresponding build or commit.

The provided script above will generate the following output in the Firebase hosting dashboard.

The result

You can find the result of this article here:

• oddbit-website-4b6b1.firebaseapp.com → www.oddbit.se
• Travis CI build status: travis-ci.org/oddbit
• Github project: github.com/oddbit/oddbit-jekyll-website

As for the theme, it’s part of a paid collection of themes. But there are plenty of free themes available.

Jekyll Themes

Articles in the same series

Gateway to Firebase: Authentication

Finally

I hope you found this article useful and that it got you started with Firebase. This article is the first in a series of articles that will help you to get started with Firebase in the most simple way. I am hoping that it will be a gateway to more advanced features and usages.

Feel free to drop me a line if you need help with your project. There’s a contact form on my website.