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:

Vercel cloud functions
Netlify cloud functions
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.

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,

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Learn more

20% off this week

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

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 ❤️

Senior Mindset Book

Start with a free chapter

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

Serverless Handbook for Frontend Engineers – free chapter

Vercel

Hello

Use Vercel?

Netlify

Hai

Use Netlify?

AWS Lambda

Aloha

Use AWS Lambda

Did you enjoy this article?

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

Serverless Handbook for Frontend Engineers – free chapter

Senior Mindset Book