Build a Serverless API using Firebase Functions

July 8, 2020

If you’re into JAMstack, you’d know that robust APIs are extremely important for a better developer experience!

Table of Contents

Introduction

For beginners and for small scale applications, building an API backend and deploying it on the web can be a tedious task sometimes. If you choose to deploy it in a Virtual Machine in any of the cloud services like Google Cloud, Azure, or AWS, it can be daunting to set up.

One more downside to this is that since a virtual machine is an Infrastructure as a Service (IaaS), you’d be charged by the hour. You would essentially be charged for the time the VM is running, regardless of whether you’re making API calls or not.🙁

Enter, Serverless Functions…

Serverless

No, it’s not like you think. Serverless functions do run on a server. But they’re called so because it eliminates the need for managing the software and hardware of the server. It is as simple as copying and pasting code and hitting deploy.

Sounds amazing, right? Let’s build a basic serverless API and deploy it through the firebase CLI.🔥

Prerequisites and Installation

Let’s get started. First, please install Node from here.

  • Now, once you’re done installing, let’s initialize our project.
  • Create a new directory for your project.
  • Open up a terminal, cd to the project directory, and type npm init Node Initialization
  • For now, accept the default options and let the project be initialized.
  • Install firebase by typing, npm install -g firebase-tools
  • Awesome!

Login and Initialize

Login and Validate

  • Login to Firebase by entering this command, firebase login
  • It will open a window in the browser. You can log in there.
  • Return to the terminal once you’ve logged in.

Initialize

Let’s initialize a project in firebase.

  • Type firebase init Firebase Initialization
  • When it asks for what CLI features are needed, just choose Firebase Functions for now. Firebase Setup
  • It will ask to connect to a project, create a new one, and drop in a name of your choice.
  • Choose JavaScript as the language for functions.
  • Choose to not use ESLint, as we don’t really need it now.
  • Now, our firebase project is ready! Project Setup

Write the API

Now, let’s jump into the programming part.

In your project directory, the functions/index.js file is the entry point of your function. That’s the file that will always be executed. We have to edit only this file. So let’s start editing!

 1const functions = require('firebase-functions');
 2const express = require('express')
 3const bodyParser = require('body-parser')
 4const cors = require('cors')
 5
 6const app = express()
 7app.use(cors({ origin: true }));
 8app.use(bodyParser.json())
 9app.use(bodyParser.urlencoded({ extended: false }))
10
11app.get("/hello", (req, res) => {
12    console.log("hello!")
13    res.send("hello!")
14})
15
16app.get("/world", (req, res) => {
17    console.log("world!")
18    res.send("world!")
19})
20
21exports.app = functions.https.onRequest(app)

A brief explanation of this code

  • Lines 1-4 -> We import the needed packages
  • Lines 6-9 -> We initialize express, and set options for CORS handling.
  • Lines 11-14 -> This is our main api route, /hello. If we send a request to /hello, we’ll get a server response that says, “hello!"
  • Lines 16-19 -> This is our main api route, /world. If we send a request to /world, we’ll get a server response that says, “world!"
  • Line 21 -> This line is a Firebase Functions method that says that the function would be triggered if a HTTP Request is sent to the function URL.

Thus, we have a very basic API with two routes. Let’s go on and deploy it!

First though, we have to specify the function dependencies in our package.json. Now proceed to the package.json file within the functions folder, and append the following lines within the dependencies object.

    "axios": "^0.19.2",
    "beautiful-dom": "^1.0.7",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1"

Deploy

Let’s deploy our function! Enter the command, firebase deploy in the terminal.

Firebase, Deploy

You have successfully deployed the API! Yay! Now get your API URL from the Firebase Console.

Test, test, test

Now that we have deployed our API, we also need to test whether it behaves properly. For this, we can use the amazing API testing tool Postman, which is a GUI tool for API testing, or CURL, which is a CLI utility for sending HTTP requests.

Install and open Postman, and with the request type as GET, enter the URL of your function, and try sending a request to “/world”.

You’d get a response that looks something like this:

API Response

The API works really well. You could also try to send a request to “/hello” and check it out.

Note: There’s also a way by which you can deploy your API locally and test it before deploying it to the web by running the command, firebase emulators:start. Check these docs for more info -> Link

Conclusion

We have successfully written and deployed a super simple API onto Firebase! We could also make use of Firebase’s Firestore and other features and integrate them into functions. We can create powerful APIs and deploy them with the command or a click of a button!


About the author

Saiharsha Balasubramaniam

Saiharsha Balasubramaniam is a Computer Science Undergrad at Amrita Vishwa Vidyapeetham University, India. He is also a passionate software developer and an avid researcher. He designs and develops aesthetic websites, and loves blockchain technology. While he is not programming, he usually binges NetFlix or can be seen reading a book.

This article was contributed by a student member of Section's Engineering Education Program. Please report any errors or innaccuracies to enged@section.io.