Swizec Teller - a geek with a hatswizec.com

    Build simple backends with Gatsby Serverless Functions

    Until recently adding a little backend to your Gatsby site meant 2 options:

    1. Climbing the AWS learning curve
    2. Rewrite with NextJS

    With version 3.7 Gatsby gained the /api directory. Pop a JavaScript or TypeScript file in src/api, export a handler, and you've got a serverless function.

    // src/api/hello.js
    module.exports = function handler(req, res) {
    return res.status(200).json({ hello: req.query.name });
    };

    You can call that as an API request from your site. Great for 3rd party integrations with secret tokens, user reactions, authentication, and anything else you can't do in the browser.

    I joined Queen Raae on a bonus episode of her Gatsby Summer Functions webinar series to explore how all this works.

    Architecting your Gatsby Serverless Functions
    Architecting your Gatsby Serverless Functions

    We started with my crappy implementation of a function that takes a form submission and:

    • sends an email
    • sends a few texts
    • saves your message to a firestore

    We refactored this serverless function so it's faster and more reliable. While refactoring we talked about:

    • how to architect your functions
    • when to put code on the frontend or the backend
    • why distributed transactions are hard
    • when you should worry about absolute correctness
    • when's it make sense to leverage AWS
    • how using small functions gives you greater flexibility

    And I drew a sketch, live 🤘

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    with event listeners, your database can be a queue
    Tweet media

    Enjoy the webinar, hit reply if you have questions.

    And if you'd like a deeper introduction to serverless, the Serverless Handbook is full of sketches like that.

    Cheers,
    ~Swizec

    PS: yes, there's options between AWS and NextJS like Firebase or Netlify cloud functions. And even tougher climbs like hosting your own servers. Adding those made the intro too long ✌️

    Did you enjoy this article?

    Published on August 24th, 2021 in Serverless, Podcasts, Gatsby

    Want to dive into serverless? Not sure where to begin?

    Serverless Handbook was designed for people like you getting into backend programming.

    360 pages, 19 chapters, 6 full projects, hand-drawn diagrams, beautiful chapter art, best-looking cover in tech. ✌️

    Serverless Handbook on your bookshelf
    Serverless Handbook on your bookshelf

    Learn how to choose the right database, write cloud functions, think about scalability, gain the architecture mindsets for robust systems, and more.

    Leave your email to start with a free chapter and email crash course 👇

    Serverless Handbook for Frontend Engineers – free chapter

    Dive modern backend. Understand any backend.

    Serverless Handbook taught me high-leveled topics. I don't like recipe courses and these chapters helped me to feel like I'm not a total noob anymore.

    The hand-drawn diagrams and high-leveled descriptions gave me the feeling that I don't have any critical "knowledge gaps" anymore.

    ~ Marek C, engineer

    Start with a free chapter and email crash course ❤️

    Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

    Created bySwizecwith ❤️