Here’s how you can bring your JAMStack to the next level with FaunaDB and React.js

Indrek Lasn

Follow

Dec 6, 2019 · 6 min read

JAMstack (JavaScript, APIs, Markup) is a pleasure to work with for static sites and dynamic single-page applications (SPAs). We use JavaScript for interactivity, Markup for the templates, and APIs for server-side processes or database action. Even the most basic dynamic application uses a database to store its information. This is where FaunaDB comes in. In this article, I’ll show you how to turbocharge your JAMstack knowhow using FaunaDB.

Why FaunaDB

• Fast and scales well — The FaunaDB architecture lets your database instance scale according to the demand and load balance. Much like a CDN, your data will be distributed among many FaunaDB instances over the world so your users and servers will always access the closest instance. Any change will be replicated on all the instances.
• FaunaDB supports transactions and follows the ACID convention (Atomicity, Consistency, Isolation, Durability) — If you’re curious, read this post for an in-depth dive into how FaunaDB operates.
• Security guaranteed — Once a transaction commits, it’s guaranteed that any subsequent transaction — no matter which replica is processing it — will read all data that was written by the earlier transaction. Other NoSQL systems and even most SQL systems can’t guarantee global replica consistency.
• Ease of use — With FaunaDB as the datastore for our JAMStack, we don’t have to think about consistency, scale, replication, redundancy, etc. FaunaDB and React.js work nicely together and are easy to set up. We can focus on the core application instead of doing the grunt work of setting up our environment. On top of that, it’s completely free to build quick prototypes with the previously mentioned stack.
• DBaaS —Save time by using pre-existing infrastructure that lets you scale. Then, you can use that time to work on your application. Instead of putting the time into spinning up your own database cluster, use Database-as-a-Service (DBaaS).

This page includes more information about FaunaDB concepts and allows you to deep dive into the concepts.

Without further ado, let’s get started exploring our JAMstack where we use FaunaDB and React.

Getting Started With FaunaDB

First, you have to sign up on Fauna. Visit the registration page, and the following sign-up screen should show up.

Install FaunaDB Shell

Once your account is set up, open a terminal and install the FaunaDB Shell. If you’re on a PC, you can use:

Using NPM

npm i -g fauna-shell

If you don’t have NPM installed, you can follow this guide here to get it set up.

If you’re on a Mac, you can use Homebrew:

brew install fauna-shell

Login to Your FaunaDB account

Creating a FaunaDB Instance

Creating a new database with FaunaDB is very straightforward. Press the “New Database” button in the dashboard, or click here. Once you’re at the section, give the database a name and press save.

Create Your Secret FaunaDB Key for the Database

The key is used to access the database for create, read, update, and delete actions (CRUD).

FaunaDB key system

Access to the FaunaDB API uses secrets that correspond to access keys, which authenticate connections as having particular permissions. The access key system applies both to administrator-level and server-level connections, as well as to object-level and user-level connections.

More information about FaunaDB keys and security can be found here in the docs.

Using the FaunaDB Key

Copy the database access key’s secret and save the secret somewhere safe. The key is visible only once.

Run the following command

export FAUNADB_SERVER_SECRET=FaunaDBSecretHere

Replace FaunaDBSecretHere with the value of the secret that you copied in the previous step.

export is a Bash command to set an environment variable for Bash. All variables set with this command would be inherited by all processes that this Bash would create.

Add the /scripts/bootstrap-faunadb.js to the root directory of the project. This is an idempotent script that you can run one million times and have the same result (one todos database).

Next up, add the bootstrap command to npm scripts in your package.json file:

{
  "scripts": {
    "bootstrap-faunadb": "node ./scripts/bootstrap-faunadb.js"
  }
}

Now, we can run the bootstrap command to set up our FaunaDB database in our FaunaDB account.

npm run bootstrap-fauna

Now, we should be good to go to use FaunaDB! If you ran into issues or got lost, check out the Github repository for this tutorial.

Create-React-App Setup

In order to get started, create a new React app with the following command:

npx create-react-app faunadb-react-app && cd faunadb-react-app && npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions.)

Then, open http://localhost:3000 to see your app.

In case you’re curious, here’s the create-react-app repository — use it to learn more about the setup.

Setting Up FaunaDB for Local Development

Installing the dependencies

• faunadb NPM package — The official JavaScript driver for FaunaDB.

npm i faunadb 

Setting Up the .Env File

Create a .env file and place the FaunaDB secret key there. This is a secure way we can use our token without any possible security leaks.

FAUNADB_SERVER_SECRET=

Connecting to FaunaDB Database

Create the fauna directory. This the directory where all FaunaDB related functionality will live.

mkdir fauna

Before we can start making queries, we need to make a connection to the database. Let’s do that.

fauna/db.js

const faunadb = require('faunadb');
/* configure faunaDB Client with our secret */const q = faunadb.queryconst client = new faunadb.Client({  secret: process.env.FAUNADB_SERVER_SECRET})export { q, client } 

Now that we’ve made a connection to the FaunaDB instance, we can start fetching our collections from the database.

Next, create the fauna/get-all-products.js file in our fauna directory. This is where we’ll do our FaunaDB queries.

As of now, the FaunaDB Database has dummy data for sample purposes.

Notice the FaunaDB specific syntax here. It’s called FQL (Fauna Query Language).

Fauna Query Language (FQL)

The Fauna Query Language (FQL) is the native API for querying FaunaDB.

The language is expression-oriented: all functions, control structures, and literal return values. So it’s easy, for example, to group multiple results together by combining them into an Array or Object. Or, you can map over a collection and compute a result — ​possibly fetching more data — ​for each member.

FaunaDB Supports Native GraphQL

The FaunaDB has first level GraphQL API support. The FaunaDB GraphQL API should work with most GraphQL libraries.

Head here for more information on how to use FaunaDB with GraphQL support.

Call the FaunaDB Query Inside a React Component

Notice that we’re using React Hooks. If this is a new concept, I wrote about this earlier.

And if we look at our browser, we should see our data printed out.

Well done! You made it to the end. Next up, we’re going to use all of this knowledge to build useful applications.

Check out the source code if you see ways to improve it or got stuck with the setup.

Conclusion

Stay tuned for the next chapter where we’ll be using FaunaDB to build a note-taking application to demonstrate some of its cool features.

Thanks for reading, I hope you learned something new and grew as a developer. I hope you try FaunaDB, Netlify, and React and see how well they work together.

Here’s the source code for the starter-kit. Check it out and let us know if you see ways to improve it.

Special thanks to the FaunaDB team and the React official docs for the technical support while time writing this article.