Learn With Jason
Introduction to the JAMStack
4 hours, 8 minutes
CC
Course Description
Front-end developers have significantly more power and autonomy to create full-featured apps as the back-end is being moved more and more into services. In this course, you'll learn how the different parts of the JAMstack fit together, from building apps out of only static assets to handling asynchronous interactions with serverless functions. You'll also set up advanced features like authentication and store and retrieve information from databases, then ship your new site to production!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 16, 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: 17 minutes
Jason Lengstorf explains that JAMStack stands for JavaScript, APIs, Markup and is a way for building static pages using a CDN instead of a server. Using a CDN allows front-end engineers to avoid writing API proxies, or need a server, to ship code faster, and to ensure better security and performance.
Jason explains that the course's agenda is to create a basic JAMStack site, to deploy a JAMStack site, to learn how to use serverless functions, to protect content with authentication, and to handle reading and writing persisted data.
Vanilla JAMStack
Section Duration: 32 minutes
Jason starts the first course project, a vanilla JAMStack project, live codes the HTML and CSS for a new JAMStack project, and commits the project. This project demonstrates how to use vanilla JavaScript while using JAMStack.
Jason continues to work on the JAMStack project, and more specifically, adds JavaScipt and fetches data from
Jason demonstrates how to render API data to the DOM with JAMStack and explains that this is why JAMStack is useful: having some static assets, hitting a third party API, getting data, and displaying it on the screen.
Jason demonstrates how to deploy a repository to GitHub, and how to use the hub tool. Hub makes deployment more seemless.
Jason demonstrates how to install Netlify, and explains that Netlify is a powerful tool that can be used by front-end engineers to easily deploy code and make it viewable to the public.
Serverless Contact Form
Section Duration: 1 hour, 12 minutes
Jason talks about the practicability of serverless applications that only require a JavaScript function, and explains that this course will use Netlify as the serverless platform.
Jason demonstrates how to write a function that uses a handler, and how to build a toml file that communicates with Netlify and informs Netlify about the location of the serverless functions. A serverless function can be programmed to exclusively communicate with one specific domain using a hidden key.
Jason demonstrates how to set up the API's endpoint using a redirect, and answers a question from the audience regarding database setup in the context of a serverless application.
Jason starts building a form that uses serverless functions. demonstrates how to build a form using Gatsby, and how to set up Gatsby. Gatsby is used because it has ready to use React boilerplates.
Jason continues building the app started in this section by demonstrating how to create a form component and export it.
Jason continues to build the app by using React, demonstrates that hooks manage the different states of the form, and explains how to use a curried function to update the different fields within the form.
Jason improves the form from the previous section by adding different states indicating if the form was sent or if there was any error. The goal of this section is to demonstrate how to create and use different states within the same form to indicate the success or failor of the send functionality.
Jason adds functionality to the form by creating a reset button and adding methods that determine when to set the status of each state.
Jason completes the application by adding functionality that fetches and posts data, and building an event handler.
Jason concludes this section by adding MailGun JS, a transactional API service to the application.
User Dashboard SPA
Section Duration: 48 minutes
Jason live codes the first pages of the dashboard project. This project highlights how to build a login interface using JAMStack.
Jason explains that in order for the dashboard app to respect the client-side routes in Gatsby, an API hook needs to be used, and demonstrates how to set up private routing in the dashboard application.
Jason adds login functionality to the dashboard app by creating a route to be able to log into the dashboard for users.
Jason continues to work on the dashboard application by linking the dashboard to the server-side and client-side routes.This is redirecting the dashboard app to the login page.
Jason demonstrates how to link the dashboard app to Netlify to be able to deploy it easily. Netlify is used because it works well with serverless functions and makes deploying code easy for front end engineers.
Jason walks through the final step of the authentication functionality for the dashboard app, building modals for the login and logout forms.
Jason demonstrates how to protect user data available on the dashboard app, and live codes secret routes within the application. This concludes the section about JAMStack and authentification.
Persisting Data
Section Duration: 1 hour, 12 minutes
Jason introduces the last section of this course about how to handle databases in JAMStack using Fauna. Fauna is designed to be compatible with the serverless world and GraphQL.
Jason introduces the Todos app that will be built in this section, demonstrates how to import a GraphQL document from the TodosApp, and live codes a GraphQL query and mutation.
Jason live codes the backend of the Todos app by by building a handler, and linking the app to the Fauna server. In this section, serverless functions are called to load in the list of todos.
Jason starts live coding the front-end of the Todos app, and demonstrates how to wire it to the back-end.
Jason adds more functionality to the Todos app, demonstrates how pull data from a query, and builds a mutation that changes data in the form. This section demonstrates how to fetch and update data when using JAMStack.
Jason adds the option of toggling items as complete, adding more functionality to the app and showing another example of how to manage state.
Jason live codes the last part of the Todos app by adding the deletion functionality, and concludes the section covering data handling with JAMStack.
Wrapping Up
Section Duration: 5 minutes
Jason wraps up the course, thanks the audience, and mentions that JAMStack is not a replacement for other tools used to build web applications. However, it outsources some of the heavy back-end work with the help of serverless functions.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops