Swizec Teller - a geek with a hatswizec.com

    Go full-stack in 5min with your first cloud function

    Let's get tactical, how do you build a JavaScript function that runs in the cloud serverlessly?

    As we said earlier, the modern backend is a JavaScript function. You can be a full-stack engineer, no fancy sysadmin skills or kubernetes monstrosities requires ✌️

    There's a few ways to start:

    1. Vercel cloud functions
    2. Netlify cloud functions
    3. AWS Lambda

    Vercel and Netlify are quick and easy, AWS Lambda gives you more control as you grow. All 3 let you take a function like this:

    export const handler = async () => {
    return {
    statusCode: 200,
    body: "Hello πŸ‘‹",
    }
    }

    And turn it into a publicly accessible URL that says hi.

    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 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    d0YNJMgifh7a8ca

    Vercel

    Vercel is among the youngest serverless and JAMStack providers. One of my favs for hosting websites.

    Take a project built in a popular web framework like Create-react-app, Gatsby, Vue, Next, Nuxt, et al, run vercel and it's live on a URL. I'll never get over how easy they've made it 😍

    Hello

    To make a cloud function, you use the /api directory.

    ;/api/ehllo.js
    module.exports = (req, res) => {
    // .status sets the status code
    // .send writes the response
    return res.status(200).send("Hello πŸ‘‹")
    }

    Vercel uses Express-like functions. Express is a popular backend framework in the JavaScript world.

    req is the request object. You'll find params in here, session info, and anything you add in your chain of functions (called middleware).

    res is the response. You use it to set status codes, write the body, add headers ...

    Deploy, and you get a URL.

    Vercel deploy process

    Append /api/<your function> to the URL to call your cloud function. Wakes a server on demand, runs your tiny code, returns the result πŸ‘Œ

    Use Vercel?

    Vercel's cloud functions are fantastic for tiny features. When you need to run secure code on the server, make a calculation that would freeze the browser, or call a 3rd party API or database.

    Primary use-case is for Next.js server-side rendering and generation. When you call getServerSideProps, it's running on one of these cloud functions for you.

    Access to and from the full serverless ecosystem is tricky and discouraged.

    Netlify

    Netlify invented the word JAMStack and they offer Netlify Functions as their cloud function approach.

    Like Vercel, they're great at hosting any project built in a popular web framework. The difference is they're UI first. Not my jam, personally. The GitHub integration works great πŸ‘Œ

    Hai

    To make a cloud function, you add a file to to the /netlify/functions/ directory.

    exports.handler = async () => {
    return {
    statusCode: 200,
    body: "Hello πŸ‘‹",
    }
    }

    Netlify acts as a thin wrapper on AWS Lambda and uses the same syntax. Huzzah πŸ™Œ

    An optional event argument gives you access to params, headers, and other info. You return the response as a JavaScript object.

    There are no middlewares.

    Deploy, and you get a URL.

    Netlify deploy process

    Append /.netlify/functions/<your function> to the URL to call your cloud function. Wakes a server on demand, runs your tiny code, returns the result πŸ‘Œ

    Use Netlify?

    Like Vercel, Netlify cloud functions are fantastic for tiny features. Do something secret, hook up a 3rd party API, ...

    A nice benefit is that Netlify supports event-driven functions that they trigger for you, and there's periodic background functions.

    But that URL looks silly and access to and from the full serverless ecosystem remains hard.

    AWS Lambda

    AWS Lambda is the original serverless provider. Often used as a synonym for serverless as a whole.

    And as you can imagine, AWS gives zero shits about making this easy for anyone. They're a Java shop targeting Java folk aiming at grizzled backend veterans.

    Ask anyone if they enjoy using AWS's native UI tools πŸ˜›

    Hint: why do you think there's so many alternatives running on AWS?

    I like to use the Serverless Framework to deal with AWS. Great balance between making common features easy and powerful features possible. You can drop down to AWS's native config any time ✌️

    Heard great things about arc.codes, haven't tried yet.

    Aloha

    You take the same JavaScript function from Netlify

    // handler.js
    exports.hello = async () => {
    return {
    statusCode: 200,
    body: `Hello πŸ‘‹`,
    }
    }

    And add a configuration file:

    # serverless.yml
    service: hello-world
    provider:
    name: aws
    runtime: nodejs12.x
    stage: dev
    functions:
    hello:
    handler: ./handler.hello
    events:
    - http:
    path: hello
    method: GET
    cors: true

    The provider section defines where and how your function runs. Serverless Framework supports more than AWS.

    You can use this area for shared config between functions.

    The functions section defines your AWS Lambda functions. Each comes with a name, a function to call, and the event (or many) that trigger it.

    The config above creates an API Gateway that listens on a /dev/hello path.

    Watch

    Serverless AWS Lambda deploy

    Take the URL, call your cloud function. Wakes a server on demand, runs your tiny code, returns the result πŸ‘Œ

    Use AWS Lambda

    It's more work than Vercel or Netlify and you'll never outgrow it. Okay, you might turn into a Fortune100 company one day ...

    If you're engineering at a Fortune100, you don't need any of this. There's a department for that πŸ™ƒ

    With AWS you can do everything. The whole ecosystem is easy to access and configurable through serverless.yml.

    You pick this if the backend is at all important to your project my friend.

    What would you pick? hit reply

    Cheers,
    ~Swizec

    PS: don't forget, live Serverless Q&A and new book celebration Monday morning; come say Hi

    Did you enjoy this article?

    Published on March 18th, 2021 in Serverless, Technical

    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 14,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 ❀️