You know what they say. In a world full of serverless, deploy... serverless. So, of course, I will do my part. Working on a small project that requires only static pages, the biggest struggle was to find a way to gather feedback from the users (through a static form). My first thought was to build a small API that gets the data from the form and stores it in a database. But the traffic on the website is not that heavy, so I didn't see a point to serve an API for 24/7 just for a few requests per week.
The most popular solution that I encountered was, of course, serverless. There are plenty of approaches with AWS Lambda or Netlify. But my static pages were already deployed on Firebase Hosting, so I had to give a try to the Google Cloud Functions for Firebase.
Advantages
@adnanrahic does a great job explaining serverless pros and cons (bonus a comparison with containers).
Containers vs. Serverless from a DevOps standpoint
Adnan Rahić ・ Sep 8 '18
For this specific project, a serverless architecture is a perfect match: easy to write, deploy and maintain. There is no infrastructure to care about, I can write them in my favorite language using my favorite packages and I can even test them locally. Convenient.
Getting started
There is no need to set up or scale a server, we will just write the functions and deploy them to Firebase. They will be triggered only when the requests are called.
At this very moment, Google Cloud Functions can be written in Node.js (v6 or v8), Python (beta) or Go (beta). I will proceed further with Node.js and some additional resources such as Express and CORS.
1. Install Node.js
Make sure that you have Node.js and npm properly configured before you start because we will write the functions in Node.js.
Some people will recommend you nvm to install and managed Node.js versions.
nvm-sh / nvm
Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Table of Contents
- Intro
- About
- Installing and Updating
- Usage
- Running Tests
- Environment variables
- Bash Completion
- Compatibility Issues
- Installing nvm on Alpine Linux
- Uninstalling / Removal
- Docker For Development Environment
- Problems
- macOS Troubleshooting
- WSL Troubleshooting
- Maintainers
- Project Support
- Enterprise Support
- License
- Copyright notice
Intro
nvm
allows you to quickly…
But if you can use the graphical instructions as well.
2. Configure Firebase
Sign up or sign in to the Firebase console and create a new project. Doesn't really matter, but I called mine dev-form-entries
.
Now, setup your project locally.
First, install globally Firebase CLI.
npm install -g firebase-tools
Now create a local folder for your project.
mkdir dev-form-entries
cd dev-form-entries
While in the project folder, login to Firebase.
$ firebase login
Success! Logged in as me@tld.com
Let's initialize our first Firebase project (you can actually run firebase init
and add the functions later).
firebase init functions
Select a default Firebase project for this directory:
dev-form-entries
What language would you like to use?
JavaScript
We will use Javascript now. Typescript will work too.Do you want to use ESLint to catch probable bugs?
No
Neat option, but not needed right now.Do you want to install dependencies with npm now?
Yes
Run thatnpm install
to installfirebase-functions
andfirebase-admin
for you.
Ok, so let's see what we've got
-
firebase.json
for configuring Firebase Hosting, -
.firebaserc
for configuring multiple projects, -
functions/index.js
is the boilerplate provided by Firebase. We will get back to that soon.
3. Configure Realtime Database
Not too much to configure here, because it will be initialized programmatically. But I want to mention them before it's too late.
As I mentioned before, I wanted to store all the data in a database. Firebase has two great out-of-the-box databases that you can use, Realtime Database and Cloud Firestore. Both of them are highly scalable and flexible (I will get to this later) but I choose to use Realtime Database because it doesn't need any sort of pre-configuration, we will just reference it from the code.
@aurelkurtula might give you a glimpse of the Realtime Database's greatness.
Introduction to firebase's real-time database
aurel kurtula ・ Dec 9 '17
Deploying to Firebase
Hello from Firebase
Let's start with Firebase's hello world. Edit functions/index.js
and keep their example.
const functions = require('firebase-functions');
// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions
exports.helloWorld = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});
This function will create a route /helloWorld
and it will respond with Hello from Firebase!
on each request.
Deploy it
Now, your first deployment.
firebase deploy --only functions
Or you can run just firebase deploy
since the project contains only one function at this moment.
=== Deploying to 'dev-form-entries'...
i deploying functions
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (42.53 KB) for uploading
✔ functions: functions folder uploaded successfully
i functions: updating Node.js 6 function helloWorld(us-central1)...
✔ functions[helloWorld(us-central1)]: Successful update operation.
✔ Deploy complete!
Now that your deployment is complete, you can go to your Firebase console and find your function.
That's a neat Dashboard. You can check the health and read the logs of your functions. You can get redirected to Google Cloud Platform to see the full details and quotas.
Test it
I will use Postman to test the functions. Postman is a nice tool to test your APIs, I will cover only the super basics today, but you check @harshitrathod's beginner guide or take a deep look into it, by Going beyond with Postman with @jlozovei.
As seen in the dashboard, my function's route is https://us-central1-dev-form-entries.cloudfunctions.net/helloWorld
. I will paste it in Postman and make a GET
request.
Writing the API
Ok, so now you know where to write, deploy and test the code. Let's try to do something real.
Warming up
Express and CORS
As little helpers for our great goal, we will use Express (for the middleware and nicer routes writing) and CORS (for enabling all CORS requests, if you're not familiar with it, take a look at some of the @effingkay's CORS concepts).
Article No Longer Available
First, you will need to install them, so pop into your terminal
npm install --save express cors
and add them at the top of your index.js
file.
const express = require('express');
const cors = require('cors');
Right after, create an instance of Express and write the middleware that will accept all the CORS requests.
const app = express();
app.use(cors());
You will use the app
instance to write the routes and you will export it as a Google Cloud Function, as you did with the helloWorld
one. So write the new one right after the helloWorld
exports.
exports.entries = functions.https.onRequest(app);
This will create an /entries
function. All the routes that we will write for the app
instance will be available in the entries
function.
Realtime Database
In order to use the Realtime Databases, you will need to import and initialize it.
const admin = require('firebase-admin');
admin.initializeApp();
POST entries
I would normally start with the GET
route, but we need the entries before we can get them. So you will write the POST
route to push data to the database.
A basic example of an Express POST /
route is
app.post('/', (request, response) {
// send stuff...
});
The fun thing about Realtime Database is that it is fully flexible, so you don't need to design a whole structure beforehand. Since it stores the data as one JSON tree, we can push a JSON structure and it will be enough. Of course, there needs to be validation involved if all the fields are pushed to the database, but this a nice talk for another time.
So the entry that will be stored in the database will be the body of the request itself.
const entry = request.body;
The way data is pushed to the database is
return admin.database().ref('/entries').push(entry);
/entries
being the path to the database reference.
The push
function returns a promise that we will use to validate and send the response. On fulfilled, we will return the entry pushed and 200
status code. Otherwise, catch and send the error as an Internal Server Error
.
return admin.database().ref('/entries').push(entry)
.then(() => {
return response.status(200).send(entry)
}).catch(error => {
console.error(error);
return response.status(500).send('Oh no! Error: ' + error);
});
At the very core of it, that's it!
After a quick deploy, I take it in Postman and make a POST request to /entries
.
name:John Doe
subject:dev.to
message:Hello dev.to!
If you browse to your Firebase console, under Database you will be able to see all the entries.
GET entries
To get all the data for the database, we will use
admin.database(...).ref(...).on(...)
that will return through a callback all the entries that exist.
This is actually a listener function, so each time there is a new entry in the database, it will be called (cool if you have a static page to monitor those entries).
No promises this time, just a callback that returns the value in a snapshot
.
app.get("/", (request, response) => {
return admin.database().ref('/entries').on("value", snapshot => {
return response.status(200).send(snapshot.val());
}, error => {
console.error(error);
return response.status(500).send('Oh no! Error: ' + error);
});
});
Calling it in Postman I got a JSON with all the entries.
{
"-LZadZujD5Qb1MrQvAd_": {
"message": "Hello, dev.to!!!",
"name": "John Doe",
"subject": "dev.to"
},
"-LZaeMZYJjQ2weey6k7H": {
"message": "Hello dev.to!",
"name": "Jess Doe",
"subject": "dev.to"
},
"-LZaeQc8DAOn0A6B1Gzc": {
"message": "Hello dev.to!",
"name": "Jane Doe",
"subject": "dev.to"
}
}
Sticking everything together
If you deploy them, you can monitor the functions from the dashboard.
But note that you will not be able to see the quotas for each route if you write them for the same instance of an Express app.
Testing the functions locally
It would be a pain in the ass to deploy to Firebase all the small changes just to test them. Firebase allows you to test all these functions locally.
firebase serve --only functions
This will serve your functions locally, just use the links generated in your terminal.
✔ functions: entries: http://localhost:5000/dev-form-entries/us-central1/entries
✔ functions: helloWorld: http://localhost:5000/dev-form-entries/us-central1/helloWorld
Finale
That's really not much at all. This is just a glimpse of the greatness of Serverless APIs, Google Cloud Functions and Realtime Databases on Firebase. There are other ways to deal with data (such as deleting or updating it). There is a lot of validation and security layers that you should add on top of these.
That's the basics that I want to share, I am actually considering writing a whole series about Serverless APIs on Firebase, while I document myself on the topic. Please let me know how are you using Firebase and what fancy stuff are you doing with all the features.
Love!
Top comments (7)
Excellent work Bogdan!
Just wanted to let you know that you can test your Firebase functions inside of Google's Cloud Platform without any pain or heartache. Just go to this page. You will see each of your functions listed, you can then click on the three dots to the right and select "Test Functions".
I just attempted a similar write up last week, not quite as detailed as what you have here, but similar. Of course, I have only been programming for about a month, so some of my syntax and language is pretty brutal. If you want to read it, check it out here.
Thanks again!
Lovely! That is actually useful, even if I usually test a lot on localhost before deploy. And even after deploy, I still use Postman, but I can find myself in situations when I don't reach Postman to do it. I will definitely take a look at that.
Great article on integrating Google Cloud Functions with React. Big up! In my first month of programming I didn't even dream of serverless deploys.
I think also on April 1 the API for runtime is changing too, from Google:
Creating new functions using the Cloud Functions API
When you create a new function using the Cloud Functions API, you must specify the runtime for your function in the CloudFunction resource passed to the create method; for example:
{
"name": "myFunction",
…
"runtime": "nodejs6",
…
}
You can specify any of the following valid runtimes: "go111", "nodejs6", "nodejs8" or "python37".
Excellent article! Precise, clear, and complete. I'm just learning the ins and outs of Firebase to build out an MVP, and this is a big help.
Write more:)
That's great Burton!
Thanks for your kind words! Happy that it reached you
Detailed and very helpful piece. Cheers!
how do I remove the "-LZadZujD5Qb1MrQvAd_": and return my own custom name