This tutorial is similar to the one on the AWS API Gateway. At the end you will be able to choose between the AWS or the Firebase way.
Firebase has many services we can use like Authentication, Real-Time Database, Crash Reports, etc. If we want something custom, Cloud Functions for Firebase allows us to create our own functions and call them in our Ionic applications.
The principle is simple:
- We create the functions locally
- Push them to Firebase
- Use them
In order to communicate with Firebase, we need to globally install one library:
Ok, we can now create our Ionic project:
I’ll re-use my previous Firebase TODO project:
And setting up Firebase at the root of the project:
This will trigger the following script:
Telling the script to use the TODO Firebase project and installing every npm libraries we will need.
Two new files and one folder are created at the root of our Ionic project:
The .firebaserc which contains the name of our Firebase project:
The firebase.json file is empty for now, we need to tell Firebase in which folder our functions are located:
This functions folder contains:
- The index.js file is where the functions will be written
- The node_modules folder will have the libraries we potentially need like moment.js, lodash, etc.
- The package.json will contain some information about the project, libraries, etc.
All we have to do now is to create the functions. Syntax-wise its Node.js: export, req, res, send, etc.
Just a test function
Let’s create our first basic function:
We can now deploy using the following command:
Keep this URL under the hand, we will call it in a few moments.
We can now head to our Ionic project!
We start by adding the HttpModule to the app.module.ts file:
Moving on to the home.ts file:
The Http Service is injected then used to call the Firebase Cloud Function. All we do here is subscribing and waiting for the data.
Launching our Ionic application:
Right here CORS should be an issue.
This is not a problem when developing on mobile, only in the browser.
The Allow-Control-Allow-Origin: * Google Chrome plugin can fix it, it’s available there.
Here is our result:
Great! Our data is in the body.
The first basic function is created and available.
Using other Firebase services
Now let’s spice this one a bit, we are going to use the Firebase database from the TODO application tutorial and count the number of tasks in the database.
Back to the index.js file!
We will need some privileges now, in order to acquire them, at the top of the file we add the following lines:
We can now create a new function named countTasks:
The database is stocked in a variable named db and we grab the reference to our tasks root.
The once method will return a snapshot of our data and we can count the number of children using the numChildren method.
Finally we send a response with the status 200 (all good) and some json that includes the count.
Using the following command, the countTasks method is deployed without redeploying the test method:
One last stop at the home.ts file:
The URL we have to query is updated and a new count property is set to show the results on the screen.
A quick update to the home.html file:
We have our data:
We have seen how we can go serverless by creating and calling different functions using Cloud Functions for Firebase.
All we need is a Firebase project, installing the Firebase CLI, login in using a Google account, initializing the Firebase functions, modifying them as we need and finally deploying to the Cloud.
This is quite useful if you don’t want to handle a server, in my past experience I encountered many issues setting up Node.js servers on Heroku & Cie, here it takes 5 minutes and every Firebase services are at hand.