Learn With Jason
Introduction to Serverless Functions
2 hours, 58 minutes
CC
Course Description
Serverless functions enable you to build dynamic web experiences without the hassle of setting up or maintaining servers! In this course, you'll learn how to create serverless functions to accomplish a variety of tasks that typically require a back-end. Whether that's securely loading data, processing form entries, handling user access, or doing something totally off the wall, serverless functions let you skip the boilerplate and get straight to building your app's logic!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: August 25, 2020
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 16 minutes
Jason Lengstorf gives an overview of his background in the industry, explains what led him to start using serverless functions, and adds that serverless functions allow frontend developers to build robust applications with only a minimal amount of server side work.
Jason gives an overview of the course content, and demonstrates how to clone the course repository, install the Netlify CLI, and run the first application of the course locally.
Serverless Functions
Section Duration: 26 minutes
Jason demonstrates how configure the initial settings of a new file within another TOML file, and how to build a simple serverless function.
Jason continues live coding the application started during the overview segment by creating a new serverless function and checking that the function returns JSON data when Netlify is running.
Jason continues live coding the application started previously, and adds the HTML code to display the JSON data in the UI.
Jason continues live coding the application by creating an echo function that passes in through an event query string parameters, and renders text. This segment explores the how to filter data using serverless functions.
Jason continues live coding the application, and adds a feature to the app to allow users to filter the movies from the JSON file by ID by building a new serverless function that queries movies by ID.
API Data
Section Duration: 53 minutes
Jason demonstrates how to generate an API key, how to make a call to a third party API using a secure API token to access the movie database (OMDb), and explains that serverless functions do not expose their code through browser inspection, and are therefore useful when using private API keys.
Jason fetches data from the OMDb API using an API key stored in a .env file, and demonstrates how to check that the data is fetched correctly by inspecting the network preview in the browser.
Jason fetches and renders movie ratings, or scores, into the UI from the OMDb database and builds a loop to cypher through the various scores for each movie.
Jason demonstrates how to create a database using a third party application called Hasura Cloud, and explains how to add rows to the database table. Hasura allows developers to create a database in Heroku, and uses GraphQL queries to link the UI to the database.
Jason creates a GraphQL query on Hasura through the Hasura sandbox, links Hasura and the application using a GraphQL endpoint and a secret key, refactors the code of one of the serverless functions, and uses the query to fetch the data that is later rendered in the application UI.
Jason continues coding the application started previously by adding a new serverless function that allows the user to add a new element of data from the UI, and demonstrates how to create a mutation on the GraphQL Sandbox in the Hasura application. A GraphQL mutation allows the posting of new data into the database.
Database & Auth
Section Duration: 48 minutes
Jason continues coding the application by adding a new serverless function that allows users to post data to the Hasura database, and uses a GraphQL mutation to link the UI to the database, and allow the posting of new data from the UI to the database.
Jason demonstrates how to launch the application on Netlify and how to configure the app to allow site admins to login and modify data only while logged in.
Jason demonstrates how to add the Netlify identity button to the application developed during the course, and how to log into the application through Netlify.
Jason demonstrates how to add a JSON Web Token (JWT) to enable secure access to the admin page, and demonstrates how to handle logging in, and rerouting the user to the admin page after a successful login.
Jason demonstrates how to use a JSON Web Token (JWT) to check that the code within a serverless function can only run for a user that has a specific role, and demonstrates how to change the role of a user within Netlify for the app.
Jason reviews the different steps that were taken during the course to build the application, and answers questions from the audience about password reset using Netlify Identity, and SSL certification.
Use Cases & Q&A
Section Duration: 29 minutes
Jason introduces a few usecases of serverless functions within contact form submissions, parralel processing, interactive UIs, and explains why serverless functions are best suited to use in these cases.
Jason continues to share usecases of serverless functions, and explains how Starbucks uses serverless functions to strategize about their website and application by being aware of the costs of running specific functions.
Jason answers questions about how to trigger serverless functions, using Fauna with serverless functions, the use of promises within a serverless function, and how to share serverless functions across applications. Common Crawl, an open repository that allows developers to run a 'grep' command across all of the internet, is also mentioned.
Wrapping Up
Section Duration: 4 minutes
Jason wraps up the course, shares resources to take learning about serverless function further, and explains that for the majority of the work done on the web, there is a possibility to refactor or greenfield code using serverless functions.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops