DEV Community

Cover image for Getting started with Google Cloud Functions on Firebase
Bogdan Covrig
Bogdan Covrig

Posted on

Getting started with Google Cloud Functions on Firebase

#node #serverless #firebase #beginners

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

adnanrahic image

Containers vs. Serverless from a DevOps standpoint

Adnan Rahić ・ Sep 8 '18 ・ 12 min read

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

GitHub logo nvm-sh / nvm

Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

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
Enter fullscreen mode Exit fullscreen mode

Now create a local folder for your project.

mkdir dev-form-entries
cd dev-form-entries
Enter fullscreen mode Exit fullscreen mode

While in the project folder, login to Firebase.

$ firebase login
Success! Logged in as me@tld.com
Enter fullscreen mode Exit fullscreen mode

Let's initialize our first Firebase project (you can actually run firebase init and add the functions later).

firebase init functions
Enter fullscreen mode Exit fullscreen mode

Your first Firebase project!!!

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

aurelkurtula image

Introduction to firebase's real-time database

aurel kurtula ・ Dec 9 '17 ・ 5 min read

#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!");
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

Now that your deployment is complete, you can go to your Firebase console and find your function.

My Google Cloud Functions in the Firebase Console

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 .

harshitrathod image

Introduction to Postman REST client

Harshit rathod ・ Nov 13 '17 ・ 3 min read

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

Successful response got in Postman

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

effingkay image

CORS, preflighted requests & OPTIONS method

Klaudia ・ Jul 20 '18 ・ 3 min read

#learning #beginners #webdev #showdev

First, you will need to install them, so pop into your terminal

npm install --save express cors
Enter fullscreen mode Exit fullscreen mode

and add them at the top of your index.js file.

const express = require('express');
const cors = require('cors');
Enter fullscreen mode Exit fullscreen mode

Right after, create an instance of Express and write the middleware that will accept all the CORS requests.

const app = express();
app.use(cors());
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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...
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

The way data is pushed to the database is

return admin.database().ref('/entries').push(entry);
Enter fullscreen mode Exit fullscreen mode

/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);
    });
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

Postman's expected response

If you browse to your Firebase console, under Database you will be able to see all the entries.

Realtime Database entries in my Firebase Console

GET entries

To get all the data for the database, we will use

admin.database(...).ref(...).on(...)
Enter fullscreen mode Exit fullscreen mode

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);
    });
});
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

Sticking everything together

If you deploy them, you can monitor the functions from the dashboard.

All the Google Cloud Functions in the Firebase Console

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
andersjr1984 profile image
andersjr1984 • • Edited

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!

Collapse
 
bogdaaamn profile image
Bogdan Covrig •

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.

Collapse
 
rdelga80 profile image
Ricardo Delgado •

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

Collapse
 
burtonmiller profile image
burton miller •

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

Collapse
 
bogdaaamn profile image
Bogdan Covrig •

That's great Burton!

Thanks for your kind words! Happy that it reached you

Collapse
 
thevetdoctor profile image
Obafemi •

Detailed and very helpful piece. Cheers!

Collapse
 
thisisstefan_ profile image
Stefan aGz •

how do I remove the "-LZadZujD5Qb1MrQvAd_": and return my own custom name

Read next

indranilchutia profile image

How to implement HLS Video Streaming in a React App

Indranil Chutia -

adil4474 profile image

JavaScript Basic Coding Challenges for Beginners part-1

Mohammad Adil Rasheed -

developerhub profile image

Check if a key exists in JavaScript object?

Abdus Shohid Shakil -

giovapanasiti profile image

NinjaBootstrap UI - A Pragmatic Approach To Bootstrap Reusable HTML Components

Giovanni Panasiti -