How to Build a Serverless App With Vue, Azure Functions and FaunaDB Part 1

Serverless Functions/APIs are best used when building static websites. Static websites are still relevant in many purposes, including a company portfolio page, meetup group page, product pages, or blogs, to name a few.

When developing such apps, the use of a full-blown backend API (ASP.NET, Node.js, PHP) is excessive and unnecessary. Usually, your app performs simple tasks, such as sending out a few emails, handling form submission, and managing a few records in a database.

In this type of situation, you might opt to use serverless architecture and build a few Cloud Functions to get the job done.

This article will demonstrate how you can build a frontend app using Vue.js to manage your notes, with a serverless backend, using Azure Functions (known as FaaS or Function as a Service) and a serverless database, using FaunaDB. 

You may also like: Vue.js Tutorial 1 — Hello Vue.

FaunaDB Overview

FaunaDB is a globally-distributed, serverless, cloud database management system for modern applications, such as those based on the JAMstack. It enables you to create a full-featured database in the cloud with a few clicks in seconds.

FaunaDB wraps the typical database concepts with new, and effective features, such as geo-located databases, built-in authentication, key-based security, and built-in multi-tenancy, allowing for nested databases.

In addition to the many other features that come with FaunaDB, it exposes a Data API on top of your serverless, cloud, and database for ease of access from within your application. You can use either the GraphQL Endpoint API or the DSL-Like Functional Query Language (FQL). In this article, I will be using FQL.

FaunaDB supports a native GraphQL API for your serverless database in the cloud. You can follow the Getting started with GraphQL tutorial to learn more about it.

The FaunaDB drivers support an array of popular languages such as Go, JavaScript, and C#. You can read more about FaunaDB in its online documentation.

To start using FaunaDB, sign up for an account on their website, or use your GitHub account if you have one. Next, log into your account to access the FaunaDB Dashboard.

Create a New Database

Click the button named NEW DATABASE.

On the next screen, provide a Database Name: 

Click the Save button to create the database.

Create a New Collection

On the Database dashboard page, click the button named NEW COLLECTION. You can think of a FaunaDB Collection as a SQL Table. Give the new collection the name, Note. This collection will store all the notes collected from the application. Make sure the Create collection index checkbox is selected.

Since FaunaDB does not currently provide table scans, indexes are required for any queries where you do not already know all of the document references stored. An Index in FaunaDB would store a Ref per Document. A Ref is nothing but a reference or pointer to that document.

You can consult FaunaDB documentation to read more about FaunaDB Indexes. 

Click the Save button to create the collection.

Note: In FaunaDB, a row or record stored inside a collection is referred to as a Document. Therefore, a collection is a list of documents. Unlike SQL, the documents in a FaunaDB collection are not required to include the same fields.

Fauna Query Language (FQL)

FaunaDB provides a native DSL-Like API for data querying called FQL. The language is expression-oriented; all functions control structures, and literal return values. FQL operates on the schema types provided by FaunaDB, which includes documents, collections, indexes and databases. 

An FQL query is executed by submitting it to a FaunaDB cluster, which computes and returns the result. Query execution is transactional. No changes are committed if something goes wrong. 

To query for a single record: 

• Collection(“Notes”) returns the table or collection of all notes.
• 244568391829946880 refers to the Document ID of a specific document.
• Ref(...) returns a Ref object pointing to the Document with a specific ID.
• Get(Ref(...)) returns the single Document.

A document returned can be something like:

{

  "ref": Ref(Collection("Notes"), "244568391829946880"),

  "ts": 1569497443900000,

  "data": {

    "title": "My First note",

    "body": "This is the first note."

  }

}

The Document returned is a JSON object with properties.

To create a new Document:

 Create(Collection("Notes"), { title: "A second note", body: "Here's the body of
the second note" }) 

The query returns the following:

{
  "ref": Ref(Collection("Notes"), "244572741094605323"),
  "ts": 1569501591740000
}

We will be using FQL to connect to the database, create new documents, and read the existing ones.

You can consult with the FQL official documentation to learn more about this language.

FaunaDB Shell

FaunaDB Dashboard offers a convenient tool called FaunaDB Shell. It's an interactive command shell to run and execute FQL commands on the browser without the need to install it locally on your machine. To access the FaunaDB Shell, click the SELL menu item on the Database page.

You'll find a few FQL queries you can run and view the results for. At the top of the SHELL, there is a CLEAR button to clear the commands and start writing new queries once more.

Let’s run an FQL query:

You can use this SHELL to learn more about the FQL capabilities and run queries against your database.

FaunaDB API

FaunaDB FQL is available in the form of drivers in a number of programming languages. You can check out the drivers on the FaunaDB Drivers page.

The driver offers an API that makes it easy for you to access your FaunaDB Database from within your application. For this article, I use the JavaScript driver. Click GitHub to read more about its use, code, and other details.

Start by creating a new empty folder, and initialize the NPM inside this folder by running this command:

 npm init -y 

This command creates a package.json file.

To install the faunadb NPM package in your project, run the following command:

 npm install ---save faunadb 

The command adds faunadb package as a dependency for this project. Create a new file named index.js and follow the steps below.

Start by requiring the faunadb driver:

const faunadb = require('faunadb');
const q = faunadb.query;

The faunadb.query is a module that hosts all the FQL built-in functions available by FaunaDB.

In order to execute FQL queries you need first to instantiate a new FaunaDB Client:

Creating a Client involves using a FaunaDB Database Secret. This secret identifies the owner of the database and authenticates executing queries.

const client = new faunadb.Client({ secret: 'YOUR_FAUNADB_SECRET' });

To get a new secret, locate the SECURITY menu item on the FaunaDB Dashboard:

Click the button named NEW KEY to navigate to the New Key Form:

To create a new secret, select the Database, and Role from the drop down menus. The other fields are optional. The Role can be any of the following:

• Admin: Used to create, destroy, or manage any database or key. Protect admin keys very carefully. 
• Server: Can be used to create, destroy, or manage the database to which they are assigned. Protect server keys carefully. 
• Server Read-only: Provides full read access to the database that they are assigned to, or any child database. 
• Client: Provides restricted access to resources that are marked with the `public` permission. Due to their restrictions, they are suitable for use in untrusted environments, such as within mobile clients.

Click the button named SAVE to create a new secret key.

It’s important to record the secret as it won’t show again.

Now that we have a new Database Secret, let’s replace its value inside the source code as follows:

const client = new faunadb.Client({
    secret: 'fnADZPpx4EACAGpcBmat4T-ZHYRIdX607Upcve3x'
});

// To create a new Note document inside the database, you would add this line of code:

client.query(q.Create(q.Collection("Notes"), { data: { title: "new title", body: "new body" } }))
    .then((response) => {
        console.log(response.ref);
    });

The client.query() function is responsible for executing queries against your database. It accepts an expression and returns an ES6 Promise.

The express you pass to the client.query() function is a pure FQL expression, similar to the ones we’ve used inside the FaunaDB SHELL. However, every FQL function you reference in your expression should be accessed via the faunadb.query object represented by the constant q in the code snippet I showed you.

The FQL query creates a new Note document inside the Notes collection. The result of running this expression is the Document created that is accessible via the then() function on the Promise result.

Let’s run the script by issuing the following command:

 node index.js 

If everything goes well, a new Document should be created and the resulting output should look like this:

 Ref(Collection("Notes"), "244595761146233346") 

Note: In FQL, a query refers to either an expression retrieving data from the database, or an expression to update, delete, or create a Document.

You can check out the FaunaDB Tutorials for more details on FQL queries. Now that you are somewhat familiar with how FaunaDB works, and know how to connect to your database via an API, we're going to  build some Azure Cloud Functions to use in the final app in the next part of this series.

Further Reading

• GraphQL Java Example for Beginners [Spring Boot].
• What Makes a Storage Service Truly Serverless?.
• What Is a Serverless Database? (Overview of Providers, Pros, and Cons).