Setup Gatsby with Netlify Functions

Apr 24, 2019

In this tutorial we’re going to build an application that submits a form with React.js and triggers an AWS Lambda function with Netlify.

tl;dr - Source code on GitHub.

Create Gatsby app with Netlify Functions

 

In this tutorial we’re going to build an application that submits a form with React.js and triggers an AWS Lambda function with Netlify. We'll learn about the Gatsby site generator and running Netlify Functions locally.

If you’ve been keeping up with trends in web development you’ve undoubtedly heard about the serverless revolution in computing. Services like AWS Lambda and Google Cloud Functions are able to provide server infrastructure for the life of a network request. This means developers can create functions instead of maintaining their own cloud servers. Serverless computing means having millions of servers on demand, not no servers altogether.

With the rise of this ecosystem new services, apps and layers of abstraction have emerged to make new developers more productive. The goal, as always is to be able to build services for end users quickly, at low cost and that can scale as our business grows.

In this tutorial we’re going to use an open source front end web framework called Gatsbyjs and Netlify for hosting.

Install and create a Gatsby application

Gatsby is a tool for building websites with React.js. It started out as one of many static site generators but has distinguished itself by the large and growing community as well as the commitment of the open source maintainers.

The Gatsby docs are comprehensive. I recommend checking out the Quick Start guide.

$ npm install -g gatsby-cli
$ gatsby new sales-commission
$ cd sales-commission
$ gatsby develop

Trigger a Serverless Function with React.js and Netlify

What we need to do next is send a POST request from our Gatsby application that triggers a Netlify Function. Netlify offers services to help us trigger AWS Lambda functions without even setting up or configuring an AWS account.

Read more about Netlify Functions in their documentation

This request will eventually save a new salesperson to our Fauna database. For now we’ll have it trigger a function to return the request data as JSON.

The first step is to build a form into our application using React.js

Please note, this example does not handle authentication so anyone on the web would be able to submit this form. For a working example of authentication with Netlify Identity and Fauna database check this GitHub repo.

Now that the form is created we need it to trigger a serverless function.

Each Netlify Function will live in its own file within a ./functions directory. The primary requirement for functions is that they must have a handler method. Your app can make a total of 125,000 function calls per month for free. Functions on Netlify can be written in Node.js or Go.

Our placeholder function looks like this:

exports.handler = function(event, context, callback) {
    callback(null, {
      statusCode: 200,
      body: "Hello Netlify Functions!!"
    });
}

Configuring Gatsby with Netlify Functions can be a bit tricky. I recommend this helpful post on the Gatsby blog that outlines the steps for configuring Netlify Functions locally on Gatsby.

Pro tip: Use the netlify-lambda npm package and set up a proxy with http-proxy-middleware We’ll need to specify a netlify.toml file that specifies to Netlify how it will build and deploy our site. Mine looks like this:


[build]

 functions = "functions-build"

 command = "npm run build"

 publish = "public"

[template.environment]

 FAUNADB_SERVER_SECRET = "Your FaunaDB Server Secret"

The full netlify.toml reference is here.

Conclusion

This function is rudimentary, but the potential is huge. Our function sends us a static JSON response. In the future we could connect to something like FaunaDB as a relational NoSQL data store. Fauna supports GraphQL, another hot trend in web development right now.

Netlify is a great option for deploying static sites. The Netlify Identity service provides the potential to incorporate authentication. Netlify Functions can be used to read and write to databases, send emails or other common web server tasks.

I'm looking forward to exploring this technology more!

Have you ran into problems with setting up serverless architecture? What would you like to see next?

Namaste 🙏

Let Bay Area companies find you

Join candidate network