The Gatsby FuncJam Challenge

Laci Texter
Laci Texter
August 31st, 2021

Gatsby FuncJam logo.Functions on Gatsby Cloud bring sites to life and even as the summer begins to wind down, we’re not ready to stop celebrating what that means for your sites, projects, and wallets. That’s why we’re extending the FuncJam campaign through September 30th. That’s an additional four-week extension to create and submit your idea for a Gatsby Function!

To enter the contest, create your own Gatsby Function and submit it to the FuncJam website by September 30th, 2021. Every person who enters the challenge will receive a limited edition Gatsby FuncJam sticker once the contest is over and three grand prize winners will get to choose between a M1 Mac Mini, MOMENTUM Wireless Headphones from Sennheiser, or a $500.00 USD donation in their name to a certified 501c3 charity of their choosing. 

Getting started with Gatsby Functions

What are Gatsby Functions? 

Functions are a simpler way to build APIs for your Gatsby site as you develop, test, and deploy them alongside your frontend code. By removing the hassle of maintaining separate infrastructure to add dynamic functionality to a Gatsby site, Functions makes it possible to add forms, authentication, email triggers, and more with just a few lines of code so you save time and stay in your workflow! You can find more information in the Functions section of Gatsby’s documentation, including sections on Getting Started, Routing, and Middleware & Helpers.

How to Build Your Gatsby Function

Tired of reading and ready to get started? Let’s do it! There are several resources available to you that you might find helpful: 

  • Review the FuncJam example submission repo which includes a submission example and the full submission requirements checklist. 
  • Read the Gatsby functions docs.
  • Don’t miss the “Byte-size” videos section below that we’ll be updating regularly, too!
  • We’ll also be adding short video tips to this blog post so keep an eye out here and on the Gatsby Twitter page for updates. 👀

And for inspiration…

  • Take a look at the Functions Use Cases we’ve already shared. 
  • Watch and learn: Grayson Hicks, Senior Software Engineer on the Gatsby Customer Success team, breaks down how he was able to use Functions including Auth, Sever-Side API, Heavy Computations, and Email for “pet” project, “Pup Snuggles”. 

Get Func-y!

Turn up the volume on the Gatsby FuncJam Spotify playlist and get ready to make your own song contribution to it when you make your submission! It’s the last (and optional) question on the submission form. 💃🏾🕺🏾

How to Participate in FuncJam

Ready to build your own Gatsby Function and enter to win? Simply follow these steps and you’re on your way!

Submissions will be judged on a range of criteria including code quality and legibility, documentation, and creativity. You can review the complete list of contest rules and other details by visiting https://www.gatsbyjs.com/func-jam-21/.

 

The whole Gatsby team is wishing everyone the best of luck and we hope you have some Func-y good fun with this one, friends! 

 

FuncJam Byte-size

We’ll be updating this blog post with helpful tips and examples of different ways Gatsby Functions can be used to integrate with third party services.  Wanna send an Email with SendGrid, no problem! Wanna store data in Google Sheets, we’ll show you how.

Follow @GatsbyJs for updates or pop back here where we’ll share more info.

Looking for more details on what can be achieved using Gatsby Functions? You’re in luck! We’ve prepared a Byte-size GitHub repository you can use for reference which contains examples and some functional best practices.

TypeScript

In this example we’ll show you how to use the Gatsby’s type definitions to type your request and response objects. You can find the src code here: src/api/typescript-function.ts

Getting started with Gatsby Functions and TypeScript

 

Post Body Parameters using fetch

In this video we’ll show you how to send data to your Gatsby Function using fetch’s POST method. You can find the src code here:  src/api/post-body-params-with-fetch.js

POST body parameters using fetch

 

Validate Email addresses server-side using Yup

In this video we’ll show you how to double-down on the details. Email address validation is typically performed client-side but with Gatsby Functions it’s possible to perform these same checks server-side too. You can find the src code here: src/api/validate-email.js

Validate Email address server-side using Yup

 

Restrict access using CORS middleware

Did you know you can use your functions across multiple sites? Cross Origin Resource Sharing can be a little tricky and in this video we’ll show you how to configure CORS to allow access from a defined list of allowed origins.You can find the src code here:  src/api/custom-middleware.js

Restrict access using CORS middleware

 

 

Send and store data using Google Sheets

Data storage needn’t require complex database solutions! In this video we’ll show you how to use Google Sheets as a database using google-spreadsheet

Send and store data using Google Sheets

Laci Texter
Written by
Laci Texter

Runner of rivers and city blocks, car-a-oke queen, and very fond of snail mail. Enjoys the art/science/sport of communication. Senior Brand Marketing Manager for Gatsby.

Follow Laci Texter on Twitter

Get creative with Functions on Gatsby Cloud for a chance to win exclusive swag and prizes!