DEV Community: 17th_streetCode

How to implement Fauna add-on for Netlify applications

17th_streetCode — Tue, 30 Nov 2021 15:37:47 +0000

In this tutorial, you learn about the following topics

Introduction to Fauna and Fauna Add-on For Netlify
Introduction to FaaS with Fauna and Netlify.
Build a Notes application with Netlify functions ( Clone the application from GitHub).
Explain the code and processes involved in setting up Fauna Add-on for the Netlify application built in this tutorial.
Test our application.

Feel free to navigate through the different sections of the article using the content list provided.

Fauna add-on for Netlify

Serverless computing are services that offer developers an increasingly higher levels of abstraction in the form of serverless offerings. These services are exposed to the developers as APIs that are consumed in applications to reduce or remove the hassle of handling the operational complexity within these applications. Fauna provides a flexible, developer-friendly, transactional database delivered as a serverless, secure and scalable cloud APIs. This means that our database is provided as a “client-serverless” application through serverless APIs. These “client-serverless” applications are written as rich, browser-native clients.

Fauna Add-on Netlify as an integration makes it easy to use Fauna as the apt database for your Netlify sites and functions. Netlify is a serverless computing company that offers hosting services, and serverless backend services for web applications and static websites. Now with Fauna Add-on Netlify, we can configure and implement a Netlify-specific database, and whilst creating this database, an access token is created and stored in a secured environment variable. Through this means the Fauna Add-on Netlify tool provides us with the basic resources needed to start building Netlify serverless functions that connects to the FaunaDB solely.

Introduction to FaaS with Fauna and Netlify

The term FaaS, also know as “Functions as a Service”, is a category of the clouding computing that allows developers to develop, run and manage application functionalities (microservices) without the hassle of maintaining this infrastructure. The underlying concept is the event-driven computing paradigm wherein application code, or containers, only run in response to events or requests. This means your application executes serverless code in response to events happening within your application.

Fauna is a serverless cloud database that offers fast and reliable global access to database via modern APIs, like GraphQL, without sacrificing data consistency. Fauna database can be accessed via HTTPS and there is no cross-database data contamination. Netlify as a serverless platform hosts our serverless applications that communicates with these databases.

Build a notes application with Netlify functions

Now let’s set up the Notes application using npm and netlify-cli, and as well configure some default settings on the project. With Netlify CLI, we can set up continuous deployment for our project through the terminal, even run development server or deploy our project.

Before we continue any further, let’s clone the below repository on GitHub into a Add-on-netlify folder. This folder would be automatically created while running the git clone command. Then we’ll setup CI/CD on this folder using the Netlify CLI tool.

git clone https://github.com/IkehAkinyemi/fauna-add-on-netlify Add-on-netlify

Now we’ve created a folder named Add-on-netlify, let’s change directory into it:

cd Add-on-netlify

And inside it we’ll install dependencies that would be used in building our project:

npm i netlify-cli -g
npm install faunadb

This above command would install the Netlify CLI globally on our local system, and installs JavaScript Driver for FaunaDB. We’ll use the JavaScript Driver to make HTTPS requests to our database to perform the CRUD operations on it. Netlify CLI would help us setup our Netlify application without using the Netlify UI. All the configuring and hosting would be done through the terminal.

Setting up Fauna add-on for the Netlify application

Let’s setup and configure Netlify for our project by running the below commands, while providing the right response to the questions needed by netlify-cli to configure our project:

netlify init

What would you like to do? Create & configure a new site
? Team: Ikeh_Chukwuka_Favour's team
Choose a unique site name (e.g. the-great-IkehAkinyemi-site.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): faunadb-add-on-netlify

Site Created

Site ID:   3d3b27bd-3f93-4968-acae-81ff45c69980
? Your build command (hugo build/yarn run build/etc): yarn run build
? Directory to deploy (blank for current dir): dist
? Netlify functions folder: netlify
Adding deploy key to repository...
Deploy key added!

Creating Netlify GitHub Notification Hooks...
Netlify Notification Hooks configured!

Success! Netlify CI/CD Configured!

This site is now configured to automatically deploy from github branches & pull requests

With the above success message, we have successfully linked this project to the Netlify. And at the same time setup CI/CD on the repository, https://github.com/IkehAkinyemi/fauna-add-on-netlify. This means that any update we push to this repository reflects on the deployed application on Netlify.

Next, let create and add “fauna” to our deployed application as a add-on.

netlify addons:create fauna
# Add-on "fauna" created for faunadb-add-on-netlify

Now let’s authenticate the Add-on, this way we’re actually setting up the database using the Fauna website that the command will open on our browser.

netlify addons:auth fauna

The above command would either open a sign up page on the Fauna website, or login page if you already have an account or the page to rename the default name given to your database if already logged in. Here, we’ll use the default name, 3d3b27bd-3f93-4968-acae-81ff45c69980, and import it into our account. After this, we now have full access to interact with this database.

Once imported, click on the database and navigate to the Security page through the sidebar to see the set of keys automatically generated for us. These keys are hidden and not accessible to anyone. The keys are stored in a private environment variables and the Netlify UI never displays them.

Configuring Fauna

We going to test our application to make sure everything is properly working. Before we continue, let’s navigate to the Collection page and create a Collection named notes. Click on the NEW COLLECTION button to create a collection as below:

After we have successfully created our new collection, we can now go back to our project and run a local development server using the netlify-cli tool.

netlify dev
◈ Netlify Dev ◈
◈ Injected addon env var: FAUNADB_ADMIN_SECRET
◈ Injected addon env var: FAUNADB_SERVER_SECRET
◈ Injected addon env var: FAUNADB_CLIENT_SECRET
◈ Ignored general context env var: LANG (defined in process)
◈ Ignored general context env var: LANGUAGE (defined in process)
◈ No app server detected. Using simple static server
◈ Running static server from "Notes backend/dist"
◈ Loaded function create.
◈ Loaded function delete.
◈ Loaded function jokes.
◈ Loaded function read.
◈ Loaded function update.
◈ Functions server is listening on 36151

◈ Static server listening to 34503

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   ◈ Server now ready on http://localhost:42375   │
   │                                                  │
   └──────────────────────────────────────────────────┘

From the above output, we can see that the FAUNADB_ADMIN_SECRET, FAUNADB_SERVER_SECRET and the FAUNADB_CLIENT_SECRET as Injected addon env var. This means that Netlify is managing and providing us with this environment variables from a hidden source within our application. This provides security against hacks or security breaches within our applications. Also, from the output above, we have four serverless CRUD operations defined within our project. These serverless functions can be found in the /serverless directory.

Testing our Application

Now let open the url, http://localhost:42375/ in the browser. This is the local development port where the frontend of our project is hosted at:

Next let’s click on the Create Note button which makes a fetch request to the serverless function, create, to create a Document on the database. Navigate back to the Fauna database page to confirm this action as below:

The data provided to this fetch request to create the Document can be found within the /dist/js/main.js file.

Next action is to create a new index. Navigate to the Indexes page to create an index. Searching documents in Fauna can be done by using indexes, specifically by matching inputs against an index’s terms field. Click on the NEW INDEX button to create an index. Once in create index screen, fill out the form: selecting the collection we’ve created previously, then giving a name to our index. In this tutorial, we will name ours all_notes. We can now save our index.

Next, click on the Read All Notes button to get the Documents created on the database. Check the terminal for the response as we used the console.log function to output the response there.

Request from ::1: GET /.netlify/functions/read
[
  {
    ref: Ref(Collection("notes"), "123"),
    ts: 1632442835420000,
    data: { name: 'Todo-list', desc: "Patrick's mother" }
  }
]
Response with status 200 in 864 ms.

Next, we insert a new document. You can find this document in github repo. Let’s click on the Update Note button and navigate back to the Fauna database page to confirm this action as below:

Now let’s perform the last CRUD action which is the delete action on our database. Click on the Delete Note button and navigate back to the Fauna database page to confirm this action as below:

Now we don’t have Document in our collection as the deleteOne function had made a fetch request to the serverless action, delete, on our database.

Conclusion

I’m glad you followed the tutorial to this point, hope you’ve learned how to use Fauna Add-on Netlify tool to integrate Fauna into a Netlify site or functions. The combination of Fauna with Netlify concepts provides you the capacity to build great web application, from e-commerce application to Notes keeping application, or any web application without exposing your secret keys which would be stored and retrieved through the Add-on tool on the application. Here’s the GitHub link to code sample we used within our tutorial.

Intro to Doppler: Building Express Application With Doppler And FaunaDB

17th_streetCode — Tue, 28 Sep 2021 02:16:43 +0000

Building full-stack Express applications would always involve connecting to a database or external resources that are needed to have functional applications. When connecting to these external resources we would need a means of verifying our identity before making a successful connection. We use special secret keys or API keys that are peculiar to our application to verify our identity. These keys should always be kept secret from the public eye as the Web is an open village or we stand to lose our application to cybersecurity attacks. Managing secret API keys on the backend application has been strenuous and many solutions like using the .env file have been proposed, but these solutions have not been any efficient when deployed to the Web.

Introduction to Doppler Secret Management

Doppler has since its invention made secret management easier by reducing the complexity involved in securing the secret resources needed within our application for it to work. Doppler as a tool integrated into our application helps our application scale as it increases in functionalities providing it with fine-grained access controls, logs, versioning.

Doppler provides a secure and scalable Universal Secrets Manager that makes development for developers easier by removing any need for .env files, or the unnecessary hardcoded secrets and copy-pasted credentials. This Universal Secrets Manager works for almost all the programming languages regardless of their steadily growing list of integrations. Doppler can be integrated into an existing project or your first project by following the self-explanatory docs for installing Doppler. The Doppler CLI tool makes it a whole lot easier to access the secrets in any environment, either the development environment or production. Also, we’re provided with a dashboard to manage our application configurations.

To avoid breaking code in production, Doppler automatically creates a snapshot of our latest secrets and stores it in an encrypted file. During development, if we couldn’t get access to the API that we connect to with the secret keys, the Doppler CLI smartly fallsback to the snapshot from the encrypted file.

Next, let’s start building and implementing the different parts of our backend application. This will involve a series of simple steps to define and then start our server. Let’s create a folder named Doppler project, change directory into this folder, and then at the root of the folder initialize an Express application:

mkdir “Doppler project”
cd Doppler\ project/
npm init -y

Let’s install the dependencies needed within our application to implement some functionalities:

npm install express faunadb

The above command would install the Express library, and the JavaScript Driver, faunadb, for connecting to the database. Click here to set up a Fauna account if you don’t have anyone.
In the dashboard, click on the “NEW DATABASE” button, provide a name for your database then press the SAVE button.
Once you’ve created your database, you’ll need to create a collection named Posts. This is what we’ll be interacting with within our source code to create a Document (a post) within our application.
Now let create our /server.js file, and update it with the following code to implement a server for our application:

const express = require(“express”);
const faunadb = require(“faunadb”),
const q = faunadb.query;
const secret = process.env.FAUNADB_SERVER_SECRET;
const client = new faunadb.Client({
secret: secret,
});
const app = express();
app.use(express.json());
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`🚀🚀 Server listening at port ${PORT} 🚀🚀🚀`));

Now let’s define the different routes that would connect our backend application to the database and perform CRUD actions on it when we send requests to the server.

...
app.post('/posts', async (req, res) => {
try {
const {post, description } = req.body;
const { data } = await client.query(
q.Create(q.Collection('Posts'), { data: { post, description } })
);
res.status(201).json(data);
} catch (error) {
res.status(500).json({error: error.description})
}
});
...

In the above code, we’re creating a post data (Document) in our database when we make a POST request on the /posts path of our application.
To test our application routes, we’ll use any HTTPS client, and for this tutorial, we’ll be using the Postman application to test it.
Before we start testing our application, let’s implement another route, to get all the Documents (posts) within our application.

...
app.get('/posts', async (req, res) => {
try {
let { data } = await client.query(
q.Map(
q.Paginate(q.Documents(q.Collection("Posts"))),
q.Lambda("X", q.Get(q.Var("X")))
)
)
res.status(200).json(data[0][“data”])
} catch (error) {
res.status(500).json({error: error.description})
}
});
...

Now we’ve implemented the routes for our application, let’s set up Doppler for our project to manage our environment variables, aka secret keys.
Let’s create a Doppler account by clicking here. Follow the user-friendly steps to create an account, and once created, go ahead to create a workspace with any name you want.

After creating a workspace, follow the Doppler friendly walkthrough to understand some of the functionalities and features of Doppler.
Next, let’s create a new project on Doppler. Click on the Project link, then click on the plus icon to create and add a new project to the workspace. We’ll name it Doppler-Express. Once created, we’re provided with three environments for our project namely:

Development
Staging
Production

These are environments for managing the secret resources we’ll use within our application.

Now we have our project set up on the Doppler website, let setup our local environment on our local machine using the Doppler CLI.

Set Up Doppler On The Local Environment Using The Doppler CLI

Let’s proceed ahead to install the Doppler CLI which will help us in the development stage of our application.

# Install pre-reqs
sudo apt-get update && sudo apt-get install -y apt-transport-https ca-certificates curl gnupg
# Add Doppler's GPG key
curl -sLf --retry 3 --tlsv1.2 --proto "=https" 'https://packages.doppler.com/public/cli/gpg.DE2A7741A397C129.key' | sudo apt-key add -
# Add Doppler's apt repo
echo "deb https://packages.doppler.com/public/cli/deb/debian any-version main" | sudo tee /etc/apt/sources.list.d/doppler-cli.list
# Fetch and install latest doppler cli
sudo apt-get update && sudo apt-get install doppler

Now we’ve finished configuring and installing Doppler CLI on our local machine, run the following code to confirm that it was installed successfully.

doppler  --version
# v3.32.0

Next, let’s authenticate our local development with the remote development environment as they would need to be in sync with each other.

doppler login
? Open the authorization page in your browser? Yes
Your auth code is:
XXXXh_XXXXphone_bus_XXXXo_XXXXville
Waiting...

This opens the browser to log into your account and authenticate your local environment. Fill in your email or login with Google, then copy and paste the auth token that’s displayed on the terminal, to authenticate Doppler.
Inside the root, run the doppler setup command and select the right option to configure your local environment:

doppler setup
? Select a project: doppler-express
? Select a config: dev
┌─────────┬─────────────────┬─────────────────────────────────────────────────┐
│ NAME    │ VALUE           │ SCOPE                                           │
├─────────┼─────────────────┼─────────────────────────────────────────────────┤
│ config  │ dev             │ /home/ikehakinyemi/Projects/NodeJS/Doppler proj │
│         │                 │ ect                                             │
│ project │ doppler-express │ /home/ikehakinyemi/Projects/NodeJS/Doppler proj │
│         │                 │ ect                                             │
└─────────┴─────────────────┴─────────────────────────────────────────────────┘

Now let’s return back to our remote project on the website and click on the dev section of the project. Then click on the Add Secret to add a new secret as below:

Add the name of your secret key and paste in the value of the secret key, which is the secret key itself. Click on the Save button to add the secret key to the dev environment.
Return back to your terminal and run the following command to confirm that your secret key is in sync with your remote environment:

echo $(doppler secrets get FAUNADB_SERVER_SECRET --plain)
fnAEUIdhSoACXXXXXXXX-n6QxpBZXXXXXXXXpkBp

Now let’s use Postman to test our application and make sure our routes are accessing the database:

The first Document has been successfully been created on the database. Log into your database and confirm it.
Next, let’s check the second route which is a GET request, to return all the Documents from the database as below:

Conclusion

We’ve successfully set up Doppler for an Express application to securely hide and manage our secret keys used for its development. We eliminated the need to have a .env file, and can now easily manage these secret keys among our friends or team by giving them access to the Workspace on the Doppler website. And we can integrate Doppler services in any Node.JS application as it uses the native approach of retrieving the environment variables through the process.env[“YOUR_SECRET_KEY”]. The code used in this tutorial can be found on GitHub.

How To Use Fauna And Serverless Framework To Build Serverless Application.

17th_streetCode — Tue, 13 Jul 2021 01:55:48 +0000

Written in connection with the Write With Fauna program.

Quick summary—We’ll explore the different parts/tools needed to build a serverless application with Fauna and serverless framework. We’ll cover the different working parts of an application that makes it serverless.

To begin, we’ll start with the underlying concept of serverless, serverless applications, and what makes them different from our regular applications. We will cover the roles Fauna and serverless framework play within serverless applications.

Introduction

When developers unfamiliar with serverless hear the term, their first thought is that it doesn't require servers. However, your application still requires servers to function. A simple explanation to serverless is:

Serverless computing is a method of providing backend services on an as-used basis. The servers are still used, but the developer(s) or the company that gets backend services from a serverless vendor is charged based on his/her or their computation—usage, not as a fixed amount of bandwidth or number of servers.

This allows the serverless provider to provide the services needed by the users to write and deploy code without the hassle of worrying about the underlying infrastructure needed for the application.

Within this tutorial, we’ll discuss serverless as function-as-a-service, a serverless backend service allowing developers to write and update modular pieces of code on the fly. These pieces of code are executed in response to certain events within the application. The approach would be to write our code in the form of functions that would handle different tasks or requests within the application. So when we deploy our functions, we’ll invoke them in the format of an event.

This function-as-a-service gives serverless applications the ability to scale dynamically per request, and won’t require any capacity planning or provisioning for the application.

That brings us to a common issue that we face when building serverless applications. Available popular cloud databases are yet to have this support level of elasticity—you have to pay for capacity you don’t use. Then there’s also the lack of operations like joins, indexes, authentication, and other capabilities necessary to build a rich application. This brings Fauna into the picture.

Introduction To Fauna And Serverless Framework

Fauna uses a pre-existing infrastructure to build web applications without the usual setting-up of custom settings. Our applications' capacity is metered and available on-demand—we'll only pay for what we use within our serverless application. Fauna is a flexible, developer-friendly, transactional database delivered as a secure and scalable cloud API with native GraphQL. This gives the flexibility that provides us with reasons never to worry about database provisioning, scaling, sharing, replication, or correctness.

Serverless Framework is an open source software that builds, compiles, and packages code for serverless deployment and then deploys the package to the cloud. Serverless Framework helps develop, deploy, troubleshoot and secure our serverless applications with radically less overhead and cost by using the Serverless Framework. The Serverless Framework consists of an open-source CLI and a hosted dashboard. Together, they provide you with full serverless application lifecycle management.

Let’s dive into exploring the different parts of serverless application with Fauna and Serverless Framework.

Prerequisite

Basic knowledge of Fauna, yet not compulsory
Have NodeJS v12.0 or a higher version installed on our local machine.
Basic knowledge of Serverless Framework, yet not compulsory

Get started with Serverless Framework

Our first approach would be the installation of Serverless framework globally on our local machine to quickly set up and provision serverless functions on multiple cloud providers.

We can install Serverless framework as a standalone binary or with npm. We’ll cover both installations for preference’s sake.

Install as a standalone binary:

MacOS/Linux

curl -o- -L https://slss.io/install | bash

The above command will install the latest version, just run the command in your terminal.

curl -o- -L https://slss.io/install | VERSION=2.21.1 bash

Window

We’ll use one of the Windows’ package manager, Chocolatey.

choco install serverless

Install through npm:

npm install -g serverless

The above command installs the serverless CLI through the node package manager, npm.

Once the installation is through, it will look for AWS keys in the normal environment variables.

Get started with Fauna

We’ll start by signing in into our existing Fauna account to get started with Fauna, or register for a new account as a new user using either email credentials or using an existing Github account. Register for a new account here. Once the account is created or signed in, you will see the dashboard. There’s also Fauna shell if you love the shell environment. It allows you to create and/or modify resources on Fauna through the terminal.

To use fauna shell, follow the below command:

npm install --global fauna-shell
fauna cloud-login

Now we’re ready to start exploring our data and experiment with queries in the Fauna dashboard. Open the dashboard, it will look something like this:

We’ll go through the following simple steps to create a new fauna database using Fauna services. We start with naming our database. In this tutorial, we will name our database debt_tracker.

The next step is to create a new data collection from the Fauna dashboard with the database created. Navigate to the Collection tab on the side menu and create a new collection by clicking on the NEW COLLECTION button.

We’ll then go ahead to give whatever name is well suited to our collection. Here we will also call it debt_tracker.

Next step is to grap our API key from the Security link on the sidebar. Click on the new key button to generate the API key we would be using for our application.

The next screen will display the API key for the database we just created. Note to copy and store the API key at once. The key disappears once you leave the current page to another page.

Get started with Our Serverless Application

Now we’ll learn the different working parts of building a serverless application so that you can easily go ahead and build a full application from the simple code units demonstrated within this tutorial.

Let’s start by cloning the serverless-crud project that would easily help us with a demo code template to perform CRUD functions with our application.

serverless install --url https://github.com/faunadb/serverless-crud

Side note: please rename some of the files to represent the name of the application you’re building. Within this tutorial, the base name will change from todos to debt_tracker.

Once done with the cloning, we’ll change directory, cd into the service, the cloned folder, and then install all the dependencies needed within the folder.

cd serverless-crud
npm install

Once all the packages are fully installed, we will navigate into the serverless.yml file and then look for the field with the name MY_FAUNADB_SERVER_SECRET and replace the value with our API key we’ve copied and saved previously. Also, do the same as above for the package.json file.

The serverless.yml file, which simply is a config file that is specific to Serverless framework, contains metadata of the utilities that will be looked into soon. Our focus will be mainly on the functions field and all its values. This contains the necessary information on how our serverless functions are structured to perform:

functions:
  create:
    handler: handler.create
    events:
      - http:
          path: debt_tracker
          method: post
          cors: true
  readAll:
    handler: handler.readAll
    events:
      - http:
          path: debt_tracker
          method: get
          cors: true
  readOne: 
    handler: handler.readOne
    events:
      - http:
          path: debt_tracker/{id}
          method: get
          cors: true
  update:
    handler: handler.update
    events:
      - http:
          path: debt_tracker/{id}
          method: put
          cors: true
  delete:
    handler: handler.delete
    events:
      - http:
          path: debt_tracker/{id}
          method: delete
          cors: true

The above code, easily explained, means look for folder functions that contain a file: handler.js. Within this file are defined utilities, functions, that are defined and exported for specific actions. We've five serverless functions from the above code that will perform the CRUD operation to our database that we had set up earlier within this tutorial. So let's navigate into the handler.js file to explore the functions.

Within the handler.js file is where our serverless functions, defined within the same working directory with the handler.js are imported to make different specific requests to the database.

("use strict");

const debt_trackerCreate = require("./todos-create.js");
const debt_trackerReadAll = require("./todos-read-all.js");
const debt_trackerReadOne = require("./todos-read-one.js");
const debt_trackerUpdate = require("./todos-update.js");
const debt_trackerDelete = require("./todos-delete.js");

module.exports.create = (event, context, callback) => {
    debt_trackerCreate(event, (error, result) => {
        const response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify(result)
        };
        context.succeed(response);
    });
};

module.exports.readAll = (event, context, callback) => {
    debt_trackerReadAll(event, (error, result) => {
        const response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify(result)
        };
        context.succeed(response);
    });
};

module.exports.readOne = (event, context, callback) => {
    debt_trackerReadOne(event, (error, result) => {
        const response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify(result)
        };
        context.succeed(response);
    });
};

module.exports.update = (event, context, callback) => {
    debt_trackerUpdate(event, (error, result) => {
        const response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify(result)
        };
        context.succeed(response);
    });
};

module.exports.delete = (event, context, callback) => {
    debt_trackerDelete(event, (error, result) => {
        const response = {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            body: JSON.stringify(result)
        };
        context.succeed(response);
    });
};

The first function will automatically take object data and create a debt document within our database. The second function reaches out to the database and fetches all the debt documents we have created. While for the third, fourth, and fifth functions will fetch, update or delete a particular debt document with the ID provided for it.

Now we have made all these available, and the next would be to deploy our application to any cloud provider of your choice. And simply perform API requests against the exposed endpoints within our application.

To create a debt document, run the command:

curl -X POST https://XXXX.execute-api.region.amazonaws.com/dev/debt_tracker --data '{ "debt" : "Owing the UN a visit" }'

To read all the debt documents, run the command:

curl https://XXXX.execute-api.region.amazonaws.com/dev/debt_tracker

To read one of the debt documents, run the command with an ID provided:

curl https://XXXX.execute-api.region.amazonaws.com/dev/debt_tracker/<id>

To update one of the debt documents, run the command with an ID provided:

curl -X PUT https://XXXX.execute-api.region.amazonaws.com/dev/debt_tracker/<id> --data '{ "debt" : "Owing my travel agency" }'

To delete one of the debt documents, run the command with an ID provided:

curl -X DELETE https://XXXX.execute-api.region.amazonaws.com/dev/debt_tracker/<id>

This covers the samples to what our request to the endpoints would look like.

Conclusion

Congrats, you’ve made it to the end of this tutorial. As we’ve built this project, and look forward to building more projects using a serverless architecture, the choice of what tools/framework to use will always fall to Fauna and Serverless Framework with any cloud services provider. We can always look forward to the endless benefits, like the example of serverless code dynamically provisioning resources using FauanDB's multi-tenant QoS features and the easy integration of Fauna with other serverless components.

Resources

Integrating Fauna Into Preact WMR Application

17th_streetCode — Wed, 16 Jun 2021 16:28:19 +0000

In this tutorial, we’ll integrate Fauna into a Preact WMR application. We’ll perform CRUD actions to our database within the WMR application. Our focus will solely be on exploring Fauna CRUD actions within a Preact WMR application.

While the development process is evolving for developers, there’s a need by many developers to have an all-in-one development tool that will make web application development faster and easier. WMR gives developers the added feature and advantage of building web applications based on the all-in-one development tool.

In this tutorial, we will integrate Fauna into a Notes keeping application built using Preact WMR library. Let’s start by implementing the frontend part of the Notes application.

Prerequisites

A basic understanding of React and React hooks.
Have Node installed on our local machine
A basic understanding of JavaScript
Have yarn or npm installed as a node package manager

Implementing The Frontend Application

We will implement the frontend part of the application by cloning a WMR project, and walk through the different parts of the project. We start by cloning an already built WMR application repository.

git clone https://github.com/IkehAkinyemi/preact-wmr-notes-app.git

Once done cloning the application, open the project in your choice of text editor. Within the project, our focus is on the ./public/api and ./public/config folders. Within these folders, we have our setup and connection to our database, that we’ll set up later within this tutorial.

Next, we install Fauna’s JavaScript driver, this will help make CRUD actions to the database for fetching, deleting and also creating data on it.

yarn add faunadb

npm install --save faunadb

Within the ./public/config folder, we create a db.js file, and import the Fauna library. We proceed to set up our client and query variables to help us connect to our database.

import faunadb from "faunadb";
const client = new faunadb.Client({ secret: process.env.REACT_APP_DB_KEY });
const q = faunadb.query;
export { client, q };

We will generate our API key once we have our database set up later within this tutorial. Let’s proceed to define our CRUD actions within the ./public/api/index.js file.

import { client, q } from "../config/db";
const getAllNotes = client
  .query(q.Paginate(q.Match(q.Ref("indexes/all_notes"))))
  .then((res) => {
    const noteRef = res.data;
    const getAllDataQuery = noteRef.map((ref) => {
      return q.Get(ref);
    });
    return client.query(getAllDataQuery).then((data) => data);
  })
  .catch((err) => err.message);
const createNote = (note) =>
  client
    .query(q.Create(q.Collection("notes"), { data: { note } }))
    .then((ref) => ref)
    .catch((err) => err.message);
const deleteNote = (noteId) =>
  client
    .query(q.Delete(q.Ref(q.Collection("notes"), noteId)))
    .then((ref) => ref)
    .catch((err) => err.message);
export { getAllNotes, createNote, deleteNote };

Here we created and exported three different CRUD actions: getAllNotes, createNote, and deleteNote. These will help us develop, obtain, and delete our Notes data from the database through some frontend actions that we will see later in the tutorial. Within the getAllNotes action, our database set up would contain Indexes with the name of all_notes. This will help us group our note data, within the database, into a single group search. The createNote action records that our database would contain a Collection named notes.

We proceed to the ./public/pages/app/index.jsx file where we created JSX elements that will help us markup and style our frontend application. And then import all our API functions to help us carry out our CRUD actions. We also define utility functions that will work with React hooks to get all the notes data from the database, create note data on the database, and delete a particular Note.

import { useState, useEffect } from "preact/hooks";
import { FaTrash } from "react-icons/fa";
import { createNote, deleteNote, getAllNotes } from "../../api";
import styles from "./style.module.css";

export default function NoteApp() {
  const [Notes, setNotes] = useState([]);
  useEffect(() => {
    getAllNotes.then((res) => {
      setNote(res);
      console.log(res);
    });
  }, []);
  const [currNote, setcurrNote] = useState("");
  const addNote = (e, note_content) => {
    Notes.push({
      id: Notes.length,
      note: note_content,
    });
    // createNote(note_content).then((res) => {
    //   console.log("Expense details added to the database");
    // });
    setcurrNote("");
    e.preventDefault();
  };
  const deleteNoteItem = (note_idx) => {
    const notes = Notes.filter((note) => note.id !== note_idx);
    setNotes(notes);
    deleteNote(note_idx).then((res) => res);
  };
  const extractNotes = () =>
    Object.values(Notes).map((note) => (
      <li key={note.id} class={styles.noteItem}>
        <span
          class={styles.deleteIcon}
          onClick={(e) => deleteNoteItem(note.id)}
        >
          <FaTrash size={20} color={"red"} />
        </span>
        {note.note}
      </li>
    ));
  return (
    <section class={styles.wmr_app}>
      <h1>Preact WMR Note Application Built With Fauna</h1>
      <div class={styles.inputArea}>
        <h3>Write and add your Notes.</h3>
        <input
          class={styles.inputField}
          type="text"
          value={currNote}
          onChange={(e) => setcurrNote(e.currentTarget.value)}
          onKeyUp={(e) => (e.key == "Enter" ? addNote(currNote) : null)}
        />
        <button class={styles.button} onClick={(e) => addNote(e, currNote)}>
          Add
        </button>
      </div>
      <div class={styles.notes_list_wrapper}>
        <ul class={styles.unstyled_list}>{extractNotes()}</ul>
      </div>
    </section>
  );
}

In the above code, we define utility functions, addNote, deleteNoteItem and extractNotes. The addNote will be used to update our database with the new note item and update our frontend application. The deleteNoteItem would be used to delete note items from the database, and also on the frontend part of the application. The extractNote will help us extract the values of the notes we will get from the database. Our frontend application will look like the below UI with the predefined styles we have in the ./public/pages/app/styles.module.css:

Now we have the frontend part of our application ready. Now, let’s integrate Fauna into our application.

Integrating Fauna Into Our Application

Fauna is a flexible, developer-friendly, transactional cloud database delivered as a secure Data API that provides two interfaces: GraphQL and the Fauna Query Language (FQL). It includes functionality to store collections, indexes, and other databases (multi-tenancy). To learn more about Fauna, visit the official documentation.

We need to create the database for our Preact WMR application in Fauna’s dashboard. If you have not created an account on Fauna before now, create one here.

Within the dashboard screen, press on the NEW DATABASE button, and provide a name for the database then press the SAVE button. In this tutoria,l we call it notes_application.

Next, we create a Fauna collection to store data in the recently created database. A Collection is similar to SQL tables containing similar characteristics, e.g. a user collection with information about users in the database. Click on the NEW COLLECTION.

Once we click on the button, it will take us to a form where we’ll name our data collection. In this tutorial, we’ll call it notes:

Next we create the INDEXES for the collection of the database. A Fauna index allows us to browse through data stored in a database collection based on specific attributes.

We’ll click on the NEW INDEX to create a new index for our database. We name ours all_notes. Remember to select the current collection we’re creating the index for.

Next navigate to the SECURITY tab. By clicking on the SECURITY button on the sidebar to generate an API key for our application. Click the SAVE button.

Once you have done this, Fauna will present you with your Secret Key. Copy the key immediately and store it within our application or somewhere easily retrievable because it will only be displayed once.

Now we’re done with the basic setup for our database. We can now go to our application and start creating, storing, getting, and deleting our notes.

Our final frontend application will look like the UI below. The frontend application is ready to carry out our basic CRUD actions.

Our database will contain this data in an object with a note field.

Conclusion

In this tutorial, we built a Notes application with Fauna's serverless database and Preact WMR. We saw how easy it is to integrate Fauna into a Preact WMR application and got the chance to explore some of its core features and functionalities. Here’s my Twitter handle, @ikehakinyemi, also my dev.to handle, I would love to answer your questions on this tutorial and also see you build with Fauna.

The source code of this tutorial is available on GitHub.

Building Headless CMS With Fauna And Vercel Functions.

17th_streetCode — Fri, 14 May 2021 09:57:33 +0000

Written in connection with the Write With Fauna program.

Quick summary — This article introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API using the Fauna and Vercel functions. This improves the frontend-backend workflow, that enables developers to build excellent user experience quickly.

In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify🚀. After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.

Introduction

According to MDN, A content management system (CMS) is a computer software used to manage the creation and modification of digital content. CMS typically has two major components: a content management application (CMA), as the front-end user interface that allows a user, even with limited expertise, to add, modify, and remove content from a website without the intervention of a webmaster; and a content delivery application (CDA), that compiles the content and updates the website.

The Pros And Cons Of Traditional vs Headless CMS

Choosing between these two can be quite confusing and complicated. But they both have potential advantages and drawbacks.

Traditional CMS Pros

Setting up your content on a traditional CMS is much easier as everything you need (content management, design, etc) are made available to you.
A lot of traditional CMS has drag and drop, making it easy for a person with no programming experience to work easily with them. It also has support for easy customization with zero to little coding knowledge.

Traditional CMS Cons

The plugins and themes which the traditional CMS relies on may contain malicious codes or bugs and slow the speed of the website or blog.
The traditional coupling of the front-end and back-end definitely would more time and money for maintenance and customization.

Headless CMS Pros

There’s flexibility with choice of frontend framework to use since the frontend and backend are separated from each other, it makes it possible for you to pick which front-end technology suits your needs. It gives the freewill to choose the tools need to build the frontend—flexibility during the development stage.
Deploying works easier with headless CMS. The applications (blogs, websites, etc) built with headless CMS can be easily be deployed to work on various displays such as web device, mobile devices, AR/VR devices.

Headless CMS Cons

You are left with the worries of managing your back-end infrastructures, setting up the UI component of your site, app.
Implementation of headless CMS are known to be more costly against the traditional CMS. Building headless CMS application that embodies analytics are not cost-effective.

Fauna uses a preexisting infrastructure to build web applications without the usually setting up a custom API server. This efficiently helps to save time for developers, and the stress of choosing regions and configuring storage that exists among other databases; which is global/multi-region by default, are nonexistent with Fauna. All maintenance we need are actively taken care of by engineers and automated DevOps at Fauna. We will use Fauna as our backend-only content management system.

Pros Of Using Fauna

The ease to use and create a Fauna database instance from within development environment of the hosting platforms like Netlify or Vercel.
Great support for querying data via GraphQL or use Fauna’s own query language. Fauna Query Language (FQL), for complex functions.
Access data in multiple models including relational, document, graph and temporal.
Capabilities like built-in authentication, transparent scalability and multi-tenancy are fully available on Fauna.
Add-on through Fauna Console as well as Fauna Shell makes it easy to manage database instance very easily.

Vercel Functions, also known as Serverless Functions, according to the docs are pieces of code written with backend languages that take an HTTP request and provide a response.

Prerequisites

To take full advantage of this tutorial, ensure the following tools are available or installed on your local development environment:

Access to Fauna dashboard
Basic knowledge of React and React Hooks
Have create-react-app installed as a global package or use npx to bootstrap the project.
Node.js version >= 12.x.x installed on your local machine.
Ensure that npm or yarn is also installed as a package manager

Database Setup With Fauna

Sign in into your fauna account to get started with Fauna, or first register a new account using either email credentials/details or using an existing Github account as a new user. You can register for a new account here. Once you have created a new account or signed in, you are going to be welcomed by the dashboard screen. We can also make use of the fauna shell if you love the shell environment. It easily allows you to create
and/or modify resources on Fauna through the terminal.

Using the fauna shell, the command is:

npm install --global fauna-shell
fauna cloud-login

But we will use the website throughout this tutorial. Once signed in, the dashboard screen welcomes you:

Now we are logged in or have our accounts created, we can go ahead to create our Fauna. We’ll go through following simple steps to create the new fauna database using Fauna services. We start with naming our database, which we’ll use as our content management system. In this tutorial, we will name our database blogify.

With the database created, next step is to create a new data collection from the Fauna dashboard. Navigate to the Collection tab on the side menu and create a new collection by clicking on the NEW COLLECTION button.

We’ll then go ahead to give whatever name well suiting to our collection. Here we will call it blogify_posts.

Next step in getting our database ready is to create a new index. Navigate to the Indexes tab to create an index. Searching documents in Fauna can be done by using indexes, specifically by matching inputs against an index’s terms field. Click on the NEW INDEX button to create an index. Once in create index screen, fill out the form: selecting the collection we’ve created previously, then giving a name to our index. In this tutorial, we will name ours all_posts. We can now save our index.

After creating an index, now it’s time to create our DOCUMENT, this will contain the contents/data we want to use for our CMS website. Click on the NEW DOCUMENT button to get started. With the text editor to create our document, we’ll create an object data to serve our needs for the website.

The above post object represents the unit data we need to create our blog post. Your choice of data can be so different from what we have here, serving the purpose whatever you want it for within your website. You can create as much document you may need for your CMS website. To keep things simple, we just have three blog posts.

Now that we have our database setup complete to our choice, we can move on to create our React app, the frontend.

Create A New React App And Install Dependencies

For the frontend development, we will need dependencies such as FaunaDB SDK, styled-components and vercel in our React app. We will use the styled-components for the UI styling, use the vercel within our terminal to host our application. The FaunaDB SDK would be used to access our contents at the database we had setup. You can always replace the styled-components for whatever library you decide to use for your UI styling. Also use any UI framework or library you preferred to others.

npx create-react-app blogify
# install dependencies once directory is done/created
yarn add faunadb styled-components
# install vercel globally
yarn global add vercel

The faunadb package is Fauna JavaScript driver for Fauna. The library styled-components allows you to write actual CSS code to style your components. Once done with all the installation for the project dependencies, check the package.json file to confirm all installation was done
successfully.

Now let’s start an actual building of our blog website UI. We’ll start with the header section. We will create a Navigation component within the components folder inside the src folder, src/components, to contain our blog name, Blogify🚀.


import styled from "styled-components";
function Navigation() {
  return (
    <Wrapper>
      <h1>Blogify🚀</h1>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  background-color: #23001e;
  color: #f3e0ec;
  padding: 1.5rem 5rem;
  & > h1 {
    margin: 0px;
  }
`;
export default Navigation;

After being imported within the App components, the above code coupled with the stylings through the styled-components library, will turn out to look like the below UI:

Now time to create the body of the website, that will contain the post data from our database. We structure a component, called Posts, which will contains our blog posts created on the backend.


import styled from "styled-components";
function Posts() {
  return (
    <Wrapper>
      <h3>My Recent Articles</h3>
      <div className="container"></div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  margin-top: 3rem;
  padding-left: 5rem;
  color: #23001e;
  & > .container {
    display: flex;
    flex-wrap: wrap;
  }
  & > .container > div {
    width: 50%;
    padding: 1rem;
    border: 2px dotted #ca9ce1;
    margin-bottom: 1rem;
    border-radius: 0.2rem;
  }
  & > .container > div > h4 {
    margin: 0px 0px 5px 0px;
  }
  & > .container > div > button {
    padding: 0.4rem 0.5rem;
    border: 1px solid #f2befc;
    border-radius: 0.35rem;
    background-color: #23001e;
    color: #ffffff;
    font-weight: medium;
    margin-top: 1rem;
    cursor: pointer;
  }
  & > .container > div > article {
    margin-top: 1rem;
  }
`;
export default Posts;

The above code contains styles for JSX that we’ll still create once we start querying for data from the backend to the frontend.

Integrate Fauna SDK Into Our React App

To integrate the faunadb client with the React app, you have to make an initial connection from the app. Create a new file db.js at the directory path src/config/. Then import the faunadb driver and define a new client.
The secret passed as the argument to the faunadb.Client() method is going to hold the access key from .env file:

import faunadb from 'faunadb';
const client = new faunadb.Client({
  secret: process.env.REACT_APP_DB_KEY,
});
const q = faunadb.query;
export { client, q };

Inside the Posts component create a state variable called posts using useState React Hooks with a default value of an array. It is going to store the value of the content we’ll get back from our database using the setPosts function.
Then define a second state variable, visible, with a default value of false, that we’ll use to hide or show more post content using the handleDisplay function that would be triggered by a button we’ll add later in the tutorial.

function App() {
  const [posts, setPosts] = useState([]);
  const [visible, setVisibility] = useState(false);
  const handleDisplay = () => setVisibility(!visible);
  // ...
}

Creating A Serverless Function By Writing Queries

Since our blog website is going to perform only one operation, that’s to get the data/contents we created on the database, let’s create a new directory called src/api/ and inside it, we create a new file called index.js. Making the request with ES6, we’ll use import to import the client and the query instance from the config/db.js file:

export const getAllPosts = client
  .query(q.Paginate(q.Match(q.Ref('indexes/all_posts'))))
    .then(response => {
      const expenseRef = response.data;
      const getAllDataQuery = expenseRef.map(ref => {
        return q.Get(ref);
      });
     return client.query(getAllDataQuery).then(data => data);
      })
    .catch(error => console.error('Error: ', error.message));

  })
  .catch(error => console.error('Error: ', error.message));

The query above to the database is going to return a ref that we can map over to get the actual results need for the application. We’ll make sure to append the catch that will help check for an error while querying the database, so we can log it out.

Next is to display all the data returned from our CMS, database—from the Fauna collection. We’ll do so by invoking the query getAllPosts from the ./api/index.js file inside the useEffect Hook inside our Posts component. This is because when the Posts component renders for the first time, it iterates over the data, checking if there are any post in the database:

useEffect(() => {
    getAllPosts.then((res) => {
      setPosts(res);
      console.log(res);
    });
  }, []);

Open the browser’s console to inspect the data returned from the database. If all things being right, and you’re closely following, the return data should look like the below:

With these data successfully returned from the database, we can now complete our Posts components, adding all necessary JSX elements that we’ve styled using styled-components library. We’ll use JavaScript map to loop over the posts state, array, only when the array is not empty:

import { useEffect, useState } from "react";
import styled from "styled-components";
import { getAllPosts } from "../api";

function Posts() {
  useEffect(() => {
    getAllPosts.then((res) => {
      setPosts(res);
      console.log(res);
    });
  }, []);

  const [posts, setPosts] = useState([]);
  const [visible, setVisibility] = useState(false);
  const handleDisplay = () => setVisibility(!visible);

  return (
    <Wrapper>
      <h3>My Recent Articles</h3>
      <div className="container">
        {posts &&
          posts.map((post) => (
            <div key={post.ref.id} id={post.ref.id}>
              <h4>{post.data.post.title}</h4>
              <em>{post.data.post.date}</em>
              <article>
                {post.data.post.mainContent}
                <p style={{ display: visible ? "block" : "none" }}>
                  {post.data.post.subContent}
                </p>
              </article>
              <button onClick={handleDisplay}>
                {visible ? "Show less" : "Show more"}
              </button>
            </div>
          ))}
      </div>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  margin-top: 3rem;
  padding-left: 5rem;
  color: #23001e;
  & > .container {
    display: flex;
    flex-wrap: wrap;
  }
  & > .container > div {
    width: 50%;
    padding: 1rem;
    border: 2px dotted #ca9ce1;
    margin-bottom: 1rem;
    border-radius: 0.2rem;
  }
  & > .container > div > h4 {
    margin: 0px 0px 5px 0px;
  }
  & > .container > div > button {
    padding: 0.4rem 0.5rem;
    border: 1px solid #f2befc;
    border-radius: 0.35rem;
    background-color: #23001e;
    color: #ffffff;
    font-weight: medium;
    margin-top: 1rem;
    cursor: pointer;
  }
  & > .container > div > article {
    margin-top: 1rem;
  }
`;

export default Posts;

With the complete code structure above, our blog website, Blogify🚀, will look like the below UI:

Deploying To Vercel

Vercel CLI provides a set of commands that allow you to deploy and manage your projects. The following steps will get your project hosted from your terminal on vercel platform fast and easy:

vercel login

Follow the instructions to login into your vercel account on the terminal

vercel

Using the vercel command from the root of a project directory. This will prompt questions that we will provide answers to depending on what’s asked.

vercel
? Set up and deploy “~/Projects/JavaScript/React JS/blogify”? [Y/n] 
? Which scope do you want to deploy to? ikehakinyemi
? Link to existing project? [y/N] n
? What’s your project’s name? (blogify) 
  # click enter if you don't want to change the name of the project
? In which directory is your code located? ./ 
  # click enter if you running this deployment from root directory
? ? Want to override the settings? [y/N] n

This will deploy your project to vercel. Visit your vercel account to complete any other setup needed for CI/CD purpose.

Conclusion

I’m glad you followed the tutorial to this point, hope you’ve learned how to use Fauan as Headless CMS. The combination of Fauna with Headless CMS concepts you can build great web application, from e-commerce application to Notes keeping application, any web application that needs data to be stored and retrieved for use on the frontend. Here’s the GitHub link to code sample we used within our tutorial, and the live demo which is hosted on vercel.

DEV Community: 17th_streetCode

How to implement Fauna add-on for Netlify applications

Fauna add-on for Netlify

Introduction to FaaS with Fauna and Netlify

Build a notes application with Netlify functions

Setting up Fauna add-on for the Netlify application

Configuring Fauna

Testing our Application

Conclusion

Intro to Doppler: Building Express Application With Doppler And FaunaDB

Introduction to Doppler Secret Management

Set Up Doppler On The Local Environment Using The Doppler CLI

Conclusion

How To Use Fauna And Serverless Framework To Build Serverless Application.

Introduction

Introduction To Fauna And Serverless Framework

Prerequisite

Get started with Serverless Framework

MacOS/Linux

Window

Get started with Fauna

Get started with Our Serverless Application

Conclusion

Resources

Integrating Fauna Into Preact WMR Application

Implementing The Frontend Application

Integrating Fauna Into Our Application

Conclusion

Building Headless CMS With Fauna And Vercel Functions.

Introduction

The Pros And Cons Of Traditional vs Headless CMS

Prerequisites

Database Setup With Fauna

Create A New React App And Install Dependencies

Integrate Fauna SDK Into Our React App

Creating A Serverless Function By Writing Queries

Deploying To Vercel

Conclusion

Related Resources