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.
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!
- Read the contest rules on the FuncJam site.
- Review and fork the example submission repo.
- Build your Function on Gatsby Cloud!
- Complete the Function submission checklist.
- Submit your FuncJam function here by Thursday, September 30th, 2021 at 11:59pm PT!
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
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
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
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
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 emails using SendGrid
Contact us without the contact fuss! In this video we’ll show you how to use SendGrid to send emails from a webpage to an inbox.
Collect users reactions using Fauna
Data needn’t be boring. In this video we’ll show you the lighter side of databases using the fantastic Fauna to store users’ reactions.
