I’ve been working a lot recently with Google’s Firebase to build out a few side projects, and I wanted to write about my experience. The Firebase Platform is really powerful, and provides services that cover most of your application needs. It has services for Hosting, Authentication, Database Storage, File Storage, and more. In order to use these services, you can build out a Node Express setup or even make use of Firebase Cloud Functions and build out an API….or there’s an even easier method to do this with the AngularFire Library.

The following post is going to give a high level view of the AngularFire library, and how it works under the hood. I’m going to walkthrough a simple grocery list app I wrote, and show how using AngularFire makes things seem to work like magic.

Please note that this post assumes that you are already familiar with Firebase applications and the Firebase console. For a more in depth walkthrough please checkout my post on RhythmAndBinary.com here and also my Angular-In-Depth post on deployment here.

AngularFire

AngularFire is the official library that connects Angular to Firebase. As of this writing, AngularFire provides connections to the following Firebase services:

  1. Authentication
  2. File Storage
  3. Cloud Firestore (NoSQL Database)

The Authentication Service provides OAuth through multiple providers. The following screenshot shows what is available in the console once you setup your Firebase App:

AngularFire provides realtime updates through observable streams and is highly optimized. Under the hood AngularFire is also using a custom protocol called “WebChannel” which operates to create the real time synchronization (check out the link here for more info). There are also action API endpoints that integrate nicely with NgRx if you wanted to use that in conjunction with AngularFire as well.

AngularFire also has a great README that walks you through a lot of the basics from the initial installation to actual code examples for different services. Checkout their README here.

In the remainder of the post, I’m going to go through using Authentication and Cloud Firestore. The File Storage feature is also really great and well documented here.

#firebase

How The angularFire Library Makes Firebase Feel Like Magic
1.30 GEEK