Firebase to Netlify

Too cloudy.

Two years ago, I switched to Firebase after running on Heroku for the past couple of years. The primary factor behind it was when Google decided to enforce HTTPS as web standard, and Heroku cost a bit much than what I would like to spend just to enable HTTPS for this measly blog. I had my eyes on Firebase for a while now, and I decided it was the right time to move.

Switching was easy, I had everything up and running in less than one hour. Prior to this, asset like photos were hosted separately on Cloudinary to minimize storage usage and Incapsula CDN for delivery optimization. I moved back everything under one working bucket on Firebase since it has generous space to host everything and its own CDN to speed up content delivery.

I wasn’t blogging as much as I want to as most of my time were spent elsewhere. As my career progress more and more into programming, I found myself back into coding almost full-time. I started utilizing Git in my workflow solely to have a repo on Github, then I started forking few interested project such as building my own Chromium browser and ended up consolidating all of my projects on Github.

Looking great so far.

As my work shuffle between Firebase and Github, I tried to see if it’s possible to have these two work together without issuing multiple command. A quick look at Firebase documentations show while it does support Git integration, it requires Github Action and few other step that I wasn’t keen to setup. At this time I already know about Github Pages but also aware of its limitation and requirement, especially in requiring source repo to be made public. I began to look for alternative hosting with git-based environment without having to change my current private repo.

A quick Google comparison of serverless cloud hosting ends me with two options - Vercel and Netlify. Both are almost equally identical that you can’t go wrong with one over another. Both platform are very git workflow, and requires almost zero configuration to deploy. In their own words :

A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more.

Deploy web projects with the best frontend developer experience and highest end-user performance.

I needed to test it myself before I make my decision, so I signed up for both. I made a copy of current Firebase project, strips down everything Firebase related and push my first commit. In 10 minutes I had everything set up and running. The only error I encountered during initial build was my Ruby version on Gemfile - I just need to customize it based on Netlify and Vercel requirement. This is where it gets interested.

Netlify is far more relaxed with this matter - you can use any Ruby version you want, or you can opt for optimized version to ensure build time as fast as possible. Vercel need you to be more flexible - you can use any version you want as long without subversion (example 2.7.x instead of specific 2.7.1). They will assign you with the version they had on their platform. This is not a big of deal since subversion generally only contains bugfixes, but some developers might dislike the idea of not having the exact environment.

Netlify comes with optimizations that you can turn on - CSS/JS library minify and consolidate faster rendering/delivery and Large Media for easy to code responsive images. Vercel, leaves optimization in your hands. If you want to develop more than a static site, both support rich API and library that you can use to build a dynamic content. However when it comes to Commerce site, Vercel required Pro subscription while Netlify does not, as long as you comply with US law. Netlify also has a open source CMS that you can deploy from the start, which makes it far more attractive at this point compared to Vercel. When it comes to performance, Vercel seems to have more consistent performance than Netlify especially in JS rendering.

I decided to go over Netlify for two reason - I wanted to be able to use the exact Ruby version I want and I want to take advantage of Netlify optimization features. As this web isn’t JS heavy, I can trade back performance for features. With that being said, I can easily switch over to Vercel in future if I decided to do so.

Few days after migration, I discovered after initial rendering the rest of the page isn’t loading properly. At first I thought it was an issue with Netlify optimization, but it turned out for some reason Netlify didn’t want to work with instantclick.js library that I use to preload page rendering. I have it replaced with similar library called instantpage and its now back to working again.

Posted February 19, 2021

Tweet this