_ In a rush? Skip to tutorial steps or live demo._
Abstracting infrastructure is in our DNA.
Roads, schools, water supply networks—you get the idea.
Web dev is no exception: serverless architectures are a beautiful expression of that phenomenon.
Static sites, in particular, are turning into dynamic, rich experiences.
Handling static forms, authentication, and backend functions on statically-generated sites is now a thing.
Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on frontend-centric sites & apps. I’ve been meaning to dive into their “backend” features since.
Today, I’m doing just that, using a static Gatsby site and Netlify’s Forms, Identity, and Functions features. This tutorial will show you how to:
- Add static forms to your site
- Add user authentication for password-protected content
- Create an AWS Lambda function
Ready to supercharge a static site with serverless features?
_ Editor’s note: consider checking out Netlify’s React-powered static CMS after this post!_
Static site forms, auth, & AWS Lambda functions
Before diving into the code, let’s detail our use case a bit.
I’ll be using three different Netlify serverless features:
Identity
Identity will be used to create a password-protected, gated content section on the Gatsby site.
Authentication without a backend has long been a pain on static sites. But this neat feature solves it elegantly, allowing developers to:
Manage signups, logins, password recovery, and more — all without rolling your own authentication service.
Forms
Forms will be used to enable user-submitted product reviews on the site.
Dynamic forms can take many forms (see what I did there), from simple contact forms to commenting, quoting & review systems hooked to internal tools.
Now, there’s a plethora of solutions to handle interactive forms on static sites.
But with Forms you can handle them directly within your building and hosting service (Netlify’s core offering). No need for spam traps mailto: links, configuring your own server, setting up serverless functions, or integrating 3rd parties like Formspree or FormKeep.
No JS, APIs or backend needed: just a simple HTML form tagged with Netlify’s attributes.
Functions
Functions will be used to set up a reviews moderation workflow directly in Slack.
Under this feature’s hood are AWS Lambda functions—event-triggered, scalable backend code you can run without your own server. Deploying these with Netlify is as simple as adding a file to a Git repo.
Lambda functions are indeed powerful, but they still require an AWS account and API gateway configuration. Like with Forms, Functions simplify your life by offloading the legwork to Netlify:
Your functions are version-controlled, built, and deployed along with the rest of your Netlify site, and the Netlify API gateway automatically handles service discovery. Plus, your functions benefit from the power of Deploy Previews and rollbacks.
In a nutshell, Functions allow you to enhance site interactivity + bridge the front and backend to let data flow between services.
Serverless Gatsby on Netlify: auth, static forms, & Lambda functions
I’ll jumpstart this tutorial by using a stripped down version of a previous Gatsby site we built.
To learn Gatsby basics, check out the official tutorial. We also have two e-commerce tutorials with Gatsby here and here.
Pre-requisites
For this tutorial, you’ll need:
- A free Netlify account
- Netlify Forms Pro for the Slack integration (optional—paid feature)
1. Forking the Gatsby project
Start by forking the repo: https://github.com/snipcart/gatsby-netlify
I suggest playing around with it to get familiar with the project. Products are in the src/data/products folder—all inside Markdown files. These files are loaded during the build time and used to inject the proper info in our templates. This is done inside the gatsby-node.js file.
#gatsby #forms #serverless