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 back on his Be An Expert bullshit avatarSwizec Teller back on his Be An Expert bullshit@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.


    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 15,883+ engineers learning lessons from my "raw and honest from the heart" emails.

    4.5 stars average rating

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help πŸ‘‰ swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers πŸ‘‰ ServerlessHandbook.dev

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

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

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

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    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 by Swizec with ❀️