Supercharge Your JAMstack With FaunaDB and React.js

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

Indrek Lasn
Dec 6, 2019 · 6 min read
Image for post
Image for post
Photo by Tudor Baciu on Unsplash

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.

Image for post
Image for post
FaunaDB signup page

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

Image for post
Image for post

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.

Image for post
Image for post
Creating a FaunaDB database

Create Your Secret FaunaDB Key for the Database

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

Image for post
Image for post
Creating a database key — this key is used to access the database

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
Image for post
Image for post
Bootstrap a FaunaDB Instance

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.

Image for post
Image for post
React app running locally — http://localhost:3000/

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

Querying FaunaDB 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.

Image for post
Image for post
Rendering data with React — http://localhost:3000/

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.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Indrek Lasn

Written by

Software engineer, tech journalist, startups. Stay up to date https://thewholesome.dev, www.startupscrushing.com Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software engineer, tech journalist, startups. Stay up to date https://thewholesome.dev, www.startupscrushing.com Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store