Updated : Firebase to Netlify

Too cloudy to pick the poison.

Updated : Rewritten most of this post and added Cloudflare section at the end of this post.

I switched to Firebase about two years ago after using Heroku for the past couple of years. The primary factor behind it was when Google decided to enforce HTTPS as web standard, and Heroku requires paid Personal Plan to enable HTTPS for this measly low traffic 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 enough space to host everything and serving from its own CDN to render the latter obsolete.

Then I quickly found myself back into coding almost full-time. I started using Github after Microsoft bought it and made the private repo free (thanks!), and from then I started forking few interested project such as Chromium browser and ended up pushing all of my coding projects on Github.

When few cups of coffee translated into amount of commits.

As my workflow moving back and forth between Firebase and Github, I tried to see if it’s possible having these two work together in few commands possible. From Firebase documentations, it does support Git integration, but requires Github Action and steps that render the main purpose unusable. I can use Github Pages but requiring public repo has set me off the track. I begin to look for cloud-based hosting with two goals in mind - it work with Github, and I can keep my repo private.

Exactly 24 hours later, I found two hosting that meet my requirements - Vercel and Netlify. Both are almost equally identical so you can’t go wrong going on one over another. All you need to do is 1) authorize access to your Github, 2) select target repo and 3) update your domain A-record/C-Name to their IP/address. Really as simple as 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 signed up for both in order to experience the workflow because it will be my platform for many years to come. The only single error I encountered during initial build was Ruby version declared in Gemfile - I just need to makre sure it matches with what Netlify and Vercel has on their platform. And also, this is where it gets interested.

Netlify is easy-going with the version you had - keep using it, or switch for their version to significantly cut down the compile time. Vercel is on the opposite side for now - you can use any version you but they will determine the subversion (example 2.7.x instead of specific 2.7.1). This is may or may not a big of deal since subversion generally only contains bugfixes, but some developers might against the idea of not having the exact 1:1 environment.

Netlify has plenty of optimizations under a click with the cost of added compile time - library minifier, image compression to name a few. Vercel, leaves optimization in your hand. If you want to develop more than a static site, both support rich APIs and libraries for building dynamic web contents. However when it comes to e-commerce site, Vercel requires Pro paid-subscription while Netlify okay with it as long as you comply with the US law. Netlify also has an open source CMS that you can deploy from the start (take it as a Wordpress alternative), which makes it far more attractive at this point compared to Vercel, at least for casual coder. Based on benchmark I found, Vercel seems to have more consistent performance than Netlify especially in JS rendering.

Netlify optimizations with just a click.

Despite the need of doing the manual work, Vercel provides a whopping 8GB of memory and 30 minutes build time for you to utilize.

I decided to go for Netlify over two reasons - I want to maintain the same Ruby version installed on my machine and Netlify optimization features are more than enough for me. Maybe in the future, If I happen to see to be able to take advantage of Vercel’s offers then I would definitely do it in a heartbeat.

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

Updated - Getting onboard with Cloudflare

Few weeks after moving to Netlify, I switched over my current registrar to Cloudflare after discovered its been a domain registrar since 2018. What I like the most is they selling the domain for what it cost. As I have few domains in my bucket, this translate into significant saving to renew these domains every year. Do keep in mind while Cloudflare be able to host your domain, you can’t register a new one. So for the time being, keep your current registrar for new domain purchase, and move it over just before entering renewal period.

Prior to this, I had to rely on FreeDNS for domain management and Google Analytics to monitoring. Now its just one egg for everything.

Cloudflare gets it right here, its really easy to understand.

Give it a try, its definitely a registrar you can love.

Posted February 19, 2021

Tweet this