20+ Serverless Resources for Web Developers in 2021

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Netlify makes developing serverless functions easy with the netlify-cli (`ntl` for short). You'll be able to build and test functions locally as well as publish your functions from the CLI. 

We will install netlify-cli globally and create a `netlify.toml` file that will configure where the CLI should look to run functions that we define, in our case `functions/`. When the application is served up, Netlify runs functions under `/.netlify/functions/`.

Set up a Local Development Environment for Serverless Functions Using Netlify

Netlify makes deploying to production a breeze by configuring your Netlify CLI to your Netlify account and integrating with GitHub.

We'll log in to Netlify through the CLI and initialize a site by completing all the options that the CLI runs us through. Once this is done, Netlify will trigger new builds for your site every time you push to GitHub.

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: `id`, `name`, `favoriteSong` for each corgi. 

[http://no-cors-api.netlify.app/api/corgis](http://no-cors-api.netlify.app/api/corgis)

We will also use `node-fetch` a light-weight module that brings the `fetch` API to fetch the data into our application.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions 

There are a few ways you can run Netlify serverless functions while you are developing them. 

You can: 

- Navigate to the directory under the `/.netlify/functions/` path
- Curl them using the full URL
- Use an app like Postman

Manually Trigger Netlify Serverless Functions Locally

Environment variables set in a `.env` file can be imported using the Netlify CLI with the following command: `netlify env:import`.

This allows you to manage environment variables directly on Netlify, providing the benefit of security and flexibility of sharing environment variables with your team. 

From inside Netlify, you can access the environment variables in:

`Site settings` > `Build & deploy` > `Environment` > `Environment variables`

Topics

Instructors

Content Type

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

Set up a Local Development Environment for Serverless Functions Using Netlify

Deploy Serverless Functions to Production on Netlify using the Netlify CLI

Circumvent CORS when Accessing a Third-Party API using Netlify Functions

Manually Trigger Netlify Serverless Functions Locally

Import and Set Environment Variables from a .env file using Netlify CLI