Toggle Menu

Insights / Tech Tips / Serverless Development with Angular, Firebase, and Cloud Functions

June 07, 2017

Serverless Development with Angular, Firebase, and Cloud Functions

4 mins read

Ng-conf 2017 was a great opportunity to learn many of the features that are on the horizon with Angular 4.0.0 as well as the tools that will improve developer workflow while using the framework. Of all the back-end solutions discussed, one prevailed: Firebase. Google’s cloud-based service allows for quick setup and easy development since it removes the responsibility of managing servers from developers.

Serverless Development with Firebase

Firebase is Google’s real-time database platform which advertises itself as “serverless”. Because data in a Firebase application is hosted entirely on Google’s end, the server-side performance and database storage will automatically scale based on what your application needs. This makes it incredibly easy for developers to set up production-ready Android, iOS, and/or web apps without going through the headache of configuring and managing servers.

AngularFire2 & Three-Way Binding

As a real-time database, Firebase lends itself extremely well to the two-way data binding feature that makes Angular so appealing. AngularFire2 levels up your Angular/Firebase applications even further by facilitating three-way data binding—consistent data states between your templates, client-side code, and database. AngularFire2 makes use of observables on the client-side that watch Firebase objects, so you can add them directly to your template and see them update in real-time on the UI.

Cloud Functions

One of the main talking points from the Firebase team at this year’s ng-conf was the introduction of cloud functions. Cloud functions give developers the ability to write small pieces of Node.js code that react to events occurring on the Firebase side. Firebase supports a wide variety of event types:

  • Real-time database updates: creating, editing, or deleting data
  • Authentication: user creation or deletion
  • HTTP requests
  • Analytics: high-level patternistic events
  • Cloud storage: uploading, updating, or deleting files

Cloud functions are very easy to add to an existing Firebase project. For new Angular/Firebase applications, I recommend creating a new project with the Angular CLI. If you haven’t set up a Firebase project already, create one on the Firebase console (note: you will also need to add your Firebase configuration to your project). After you’ve installed the latest version of Node, run the following commands inside your project directory:

npm install -g firebase-tools → Installs CLI tool that allows you to deploy Firebase projects

firebase login → Authenticates the Firebase CLI tool for deploying your Firebase code

firebase init functions → Creates the relevant directories and files to start writing cloud functions. Either select an existing Firebase project or create a new one on the Firebase console.

You should now see a functions folder. Inside it, there should be an index.js file where all of your cloud functions will be written. There is a firebase-functions module in index.js already, but we’ll also need to add the firebase-admin module and initialize the Firebase application using it:

const admin = require(‘firebase-admin’);

admin.initializeApp(functions.config().firebase);

Beneath the first few lines, you should see a commented-out sample HelloWorld function. Uncomment it and run the following command:

firebase deploy –only functions

If you go to your Firebase project’s dashboard, you should see a tab titled Functions which now lists the new HelloWorld function we just deployed. Any time your Firebase instance receives an HTTP request, Firebase will send “Hello from Firebase!” in the response.

Since we’ve offloaded this task to run entirely on Firebase, we won’t have to allocate more server resources if we expect to receive a large number of HTTP requests! It makes sense to automate more operation-intensive batch processes (like data cleanup) with cloud functions so that your client-side application can be as performant as possible. The official Firebase Cloud Functions documentation lists other potential ideas for functions that you can implement in your app.

Wrapping Up

There are definitely some limitations with the platform (namely, the inability to develop offline and write complex queries), but the ease of setup and development is appealing for new projects. AngularFire2 is making Angular/Firebase applications more streamlined with end-to-end data binding while cloud functions enable you to offload routine processes to the server. With these additions, Firebase is shaping up to be a nonintrusive database platform that can be used by Angular developers of any technical background.

But Wait There’s More

Stay tuned for these blogs and more from ng-conf 2017 by the ExcellaJS team:

You Might Also Like

Resources

How Federal Agencies Can Deliver Better Digital Experiences Using UX and Human-Centered Design

Excella UX/UI Xpert, Thelma Van, join host John Gilroy of Federal Tech Podcast to discuss...

Resources

Data Scientist: What Are They and Why Are They Important?

Excella Practice Director, Artificial Intelligence and Analytics, Aaron Pujanandez join host John Gilroy of Federal Tech Podcast to discuss...