Serverless Development with Angular, Firebase, and Cloud Functions
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…
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.
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’);
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.
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:
- Taking Control with Angular CLI: Brendan Sawyer
- Ng-conf 2017 Talks You Should Watch: Alex Hoffman
- Serverless Development with Angular, Firebase and Cloud Functions: Sam Blissard
- Three Common Questions for TypeScript Beginners: Cameron Ivey
- Three Common Cases for Universal Rendering in Progressive Web Apps: Keith Center
You Might Also Like
Twenty years ago, Excella started with the belief that organizations could realize their futures through...
Meet Emily Gardner: Engagement Manager at Excella. Emily talks about what made her switch to...