Firebase is an amazing comprehensive platform that takes care of a lot of your infrastructure needs without you needing to lift a finger. It even comes with it's own CDN (content delivery network) that servers up your static content from edge servers. This means your content will theoretically load nice and fast for your users since it is on servers closer to them.

However, I'm a big fan of putting Cloudflare (or another CDN provider of your choice like Fastly) in front of Firebase, especially because most the functionality you need is free.

Note: I have no association with Cloudflare, just a user.

Why use Cloudflare with Firebase?

At first glance you might think, "why make things more complicated, especially since Firebase already comes with a CDN?" Fair point, but there are three reasons why I think it makes sense to insert Cloudflare in front of Firebase:

  1. Security & Protection
  2. Cost Savings & Prevention
  3. Speed

Security & Protection

While Firebase does have a CDN, it doesn't offer you distributed denial of service attacks (DDoS) prevention, web application firewall (WAF), or rate limiting. All of these are incredibly important to prevent malicious actors from breaking your system or stealing your data.

And if you don't stop someone at your CDN, your Firebase costs could skyrocket.

Cost Savings & Prevention

Have your heard about the infamous 7000% increase in Firebase costs? If you are on the Blaze Plan, you will pay-as-you-go. If you don't carefully monitor your costs, you might get an unwelcome bill at the end of the month.

For example, you will pay $0.15 per GB transferred from hosting over your free 10 GB monthly limit. By having a CDN like Cloudflare in front of Firebase, you'll rarely hit your Firebase hosting server, thus reducing your potential charges.

And going back to Security & Protection, if a bad actor does a DDoS attack, you'll stop them at Cloudflare and not start racking up charges.

Speed

This one might surprise you since why would Cloudflare be any after than Firebase's CDN. Truth is, they are probably equivalent. However, Cloudflare offers several speed enhancements I've found valuable.

  1. Brotli Compression: Speed up page load times for your user's HTTPS traffic by applying Brotli compression (a slightly better compression technique).
  2. Optimize Delivery: Rocket Loader - free and improves paint time especially for pages with Javascript, Railgun - requires paid business plan and gives faster dynamic content delivery, Control of Caching - free and you can set how long your content will be cached for.
  3. Argo Routing: Argo is a service that uses optimized routes across the Cloudflare network to deliver responses to your users more quickly, reliably, and securely. It costs me about $5/month and my test have shown a 25% load time improvement.

Overall, it takes about 10 minutes to set up a CDN in front of Firebase and I've found it well worth the effort.

Update on Cloudflare with Cloud Storage

Since publishing the article several questions have been asked about putting Cloudflare or a CDN in front of Firebase Cloud Storage. Unfortunately, Firebase doesn't allow custom domains, so there is no easy way to add a CDN.

In fact, Firebase itself doesn't put a CDN in front of Cloud Storage:

Cloud Storage has no built-in CDN; the less short answer is: when your Cloud Storage is "multi-regional", it means that "hot content" (frequently accessed content) is available on different locations, but that is limited to multi-regional locations, and it applies only to the "jurisdiction" of the location, so, for example, if your project is in "us-central", then your multi-regional Storage will be stored only in the US data centers, so when accessed from Toronto, it will be served from the nearest US datacenter.

But all is not lost. There is a way to add to have both a custom domain and a CDN.

How to Put a CDN in Front of Firebase Cloud Storage
A work-around to put Firebase Cloud Storage behind a CDN.


Thank you for reading. 🙏

If you're looking to post to social media with an API for yourself or on behalf of your users, check out our app Ayrshare. With a few lines of code, you'll be posting to Twitter, Instagram, Facebook, and more.