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

#devops #serverless #kubernetes #aws

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

Node Version Manager

Table of Contents

• Intro
• About
• Installing and Updating
  • Install & Update Script
    • Additional Notes
    • Troubleshooting on Linux
    • Troubleshooting on macOS
    • Ansible
  • Verify Installation
  • Important Notes
  • Git Install
  • Manual Install
  • Manual Upgrade
• Usage
  • Long-term Support
  • Migrating Global Packages While Installing
  • Default Global Packages From File While Installing
  • io.js
  • System Version of Node
  • Listing Versions
  • Setting Custom Colors
    • Persisting custom colors
    • Suppressing colorized output
  • Restoring PATH
  • Set default node version
  • Use a mirror of node binaries
    • Pass Authorization header to mirror
  • .nvmrc
  • Deeper Shell Integration
    • Calling nvm use automatically in a directory with a .nvmrc file
      • bash
      • zsh
      • fish
• Running Tests
• Environment variables
• Bash Completion
  • Usage
• Compatibility Issues
• Installing nvm on Alpine Linux
  • Alpine Linux 3.13+
  • Alpine Linux 3.5 - 3.12
• Uninstalling / Removal
  • Manual Uninstall
• Docker For Development Environment
• Problems
• macOS Troubleshooting
• WSL Troubleshooting
• Maintainers
• Project Support
• Enterprise Support
• License
• Copyright notice

Intro

nvm allows you to quickly…

View on GitHub

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 that npm install to install firebase-functions and firebase-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

#firebase #javascript #database

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.

Introduction to Postman REST client

Harshit rathod ・ Nov 13 '17

#tutorial #beginners

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).

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!