Netlify + FaunaDB    

Example of using FaunaDB with Netlify functions

• About this application
• Setup & Run Locally
• TLDR; Quick Deploy
• Tutorial
  • 1. Setup FaunaDB
  • 2. Create a function

About this application

This application is using React for the frontend, Netlify Functions for API calls, and FaunaDB as the backing database.

Setup & Run Locally

1. Clone down the repository

   git clone git@github.com:netlify/netlify-faunadb-example.git

2. Install the dependencies

   npm install

3. Bootstrap your FaunaDB table

   npm run bootstrap

4. Set your Fauna API key value in your terminal enviroment

   You can create faunaDB keys here: https://dashboard.fauna.com/db/keys

   In your terminal run the following command:

   export FAUNADB_SECRET=YourFaunaDBKeyHere

5. Run project locally

   npm start

TLDR; Quick Deploy

1. Sign up for free FaunaDB account,
2. Grab your FaunaDB API key
3. Click the Deploy to Netlify Button

Tutorial

Lets run through how to create Netlify functions and connect them to our frontend application.

0. Create React app
1. Setup FaunaDB
2. Create a function
3. Connect the function to the frontend app

0. Create React app

1. Install create react app

   npm install create-react-app -g

2. Create the react app!

   create-react-app my-app

3. The react app is now setup!

   # change directories into my-app
   cd my-app
   # start the app
   npm start

1. Setup FaunaDB

First things first, we need to setup a FaunaDB account and get our API key we will use to scaffold out our todos database.

Head over to https://app.fauna.com/sign-up to create a free Fauna Account.

1. Sign up

   

2. Create a key

   

3. Name your key and create

   

4. Copy this API key for later use, or Deploy to Netlify Button and plugin this API key.

   

5. Create your FaunaDB database

   Set the FaunaDB API key locally in your terminal

   # on mac
   export FAUNADB_SECRET=YourFaunaDBKeyHere
   # on windows
   set FAUNADB_SECRET=YourFaunaDBKeyHere

   Add the /scripts/bootstrap-fauna-database.js to the root directory of the project. This is an idempotent script that you can run 1 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": "node ./scripts/bootstrap-fauna-database.js"
     }
   }

   Now we can run the bootstrap command to setup our Fauna database in our FaunaDB account.

   npm run bootstrap

   If you login to the [FaunaDB dashboard](https://dashboard.fauna.com] you will see your todo database.

2. Create a function

Now, lets create a function for our app.

1. Create a ./functions directory with there

   # make functions directory
   mdkir functions

2. Install netlify-lambda

   Netlify lambda is a tool for locally emulating the serverless function for development and for bundling our serverless function with third party npm modules (if we are using those)

   npm i netlify-lambda --save-dev
   

   To simulate our function endpoints locally, we need to setup a proxy for webpack to use.

   In package.json add:

   {
     "name": "react-lambda",
     ...
     "proxy": {
       "/.netlify/functions": {
         "target": "http://localhost:9000",
         "pathRewrite": {
           "^/\\.netlify/functions": ""
         }
       }
     }
   }

   This will proxy requests we make to /.netlify/functions to our locally running function server at port 9000.

3. Add the build and serve command to npm scripts.

   {
     "name": "netlify-fauna",
     "scripts": {
       "bootstrap": "node ./scripts/bootstrap-fauna-database.js",
       "docs": "md-magic --path '**/*.md' --ignore 'node_modules'",
       "checkForFaunaKey": "node ./scripts/check-for-fauna-key.js",
       "start": "npm-run-all --parallel checkForFaunaKey start:app start:server",
       "start:app": "react-scripts start",
       "start:server": "netlify-lambda serve functions -c ./webpack.config.js",
       "prebuild": "echo 'setup faunaDB' && npm run bootstrap",
       "build": "npm-run-all --parallel build:**",
       "build:app": "react-scripts build",
       "build:functions": "netlify-lambda build functions -c ./webpack.config.js",
       "test": "react-scripts test --env=jsdom"
     },
     "devDependencies": {
       "markdown-magic": "^0.1.21",
       "netlify-lambda": "^0.4.0",
       "npm-run-all": "^4.1.3"
     },
     "proxy": {
       "/.netlify/functions": {
         "target": "http://localhost:9000",
         "pathRewrite": {
           "^/\\.netlify/functions": ""
         }
       }
     }
   }
   
   

Lambda functions have this signature:

exports.handler = (event, context, callback) => {
  // event has informatiom about the path, body, headers etc of the request
  console.log('event', event)
  // context has information about the lambda environment and user details
  console.log('context', context)
  // The callback ends the execution of the function and returns a reponse back to the caller
  return callback(null, {
    statusCode: 200,
    body: JSON.stringify({
      data: '⊂◉‿◉つ'
    })
  })
}

We are going to be using the FaunaDB sdk to call into our todos index.

/* Import faunaDB sdk */
import faunadb from 'faunadb'

const q = faunadb.query
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SECRET
})

exports.handler = (event, context, callback) => {
  const data = JSON.parse(event.body)
  console.log("Function `todo-create` invoked", data)
  const todoItem = {
    data: data
  }
  /* construct the fauna query */
  return client.query(q.Create(q.Ref("classes/todos"), todoItem))
  .then((response) => {
    console.log("success", response)
    return callback(null, {
      statusCode: 200,
      body: JSON.stringify(response)
    })
  }).catch((error) => {
    console.log("error", error)
    return callback(null, {
      statusCode: 400,
      body: JSON.stringify(error)
    })
  })
}

3. Connect the function to the frontend app