Latest Posts

Angular Tutorial Cloud Apps with Firebase

Recently, I built an application for some devs on my team in order to boost sharing of what we learn every week. We are always learning something new, and I wanted a platform that could help orchestrate that. In the process of building my application, I used Firebase Cloud Functions that are called by triggers in the Firebase Cloud Firestore. Basically, whenever a record is written to specific collections in my app’s Firestore, the Cloud Functions trigger Slack notifications. This whole process was a lot of fun, and actually quite powerful. This post is going to cover some basics, and showcase how powerful using cloud functions can be.

With the release of Angular 4, it’s worth taking a fresh look at common integrations such as Firebase. Fortunately, there’s absolutely nothing different required when integrating Firebase into an Angular 4 project, as compared to Angular 2.

I’ve gone through this Firebase Setup in detail at the other tutorial. For the most part, it’s going to be the same exact process, so I’m not going to bother rewriting everything. So visit that tutorial and follow the steps all the way until you reach the “SIGN-IN METHOD” tab.

Instead of enabling Facebook, we’re going to use the Anonymous option instead. So, make sure that is enabled. This also means you can ignore the Facebook Developers configuration section in that tutorial.

All of the rest of the steps are exactly the same. But just to recap:

  1. Visit the Firebase Console and Create a New Project.
  2. Click Add Firebase to your web app and save the 5 keys from apiKey to messagingSenderId. Use notepad or something else.
  3. Click on the Authentication tab and enable Anonymous.
  4. Click on the Database tab and then the RULES tab at the top. Change .read and .write values to true.

Pay attention to the terminal, it will let you know if there are any errors while deploying the function, once it gives you the all clear try creating a new user account, then go to your Firebase Console and you’ll see the database has that node created.

Also, check the Cloud Functions part of the console, it will have the log showing how the function ran, how long it took, and the state of the function.

One thing I want to make emphasis here is that you need to always return a Promise when running a Firebase Cloud Function, return admin.database().ref().set(); returns a Firebase Promise.

When you return a Promise, the function won’t crash or won’t finish until that promise is either resolved or rejected, making sure that the user profile node is created for you.

Latest Posts

Don't Miss