Introduction to the JAMStack
Table of Contents
Course OverviewJason 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.
Render API Data to the DOMJason 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.
Deploy a GitHub RepoJason demonstrates how to deploy a repository to GitHub, and how to use the hub tool. Hub makes deployment more seemless.
Previewing PRs on NetlifyJason 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
Create & Run a Serverless FunctionJason 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.
Setup API URLJason 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.
Setup GatsbyJason 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.
Creating a Form ComponentJason continues building the app started in this section by demonstrating how to create a form component and export it.
Handling Input State with HooksJason 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.
Adding Form StatesJason 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.
Adding a Loading SpinnerJason adds functionality to the form by creating a reset button and adding methods that determine when to set the status of each state.
Sending Data to Serverless FunctionsJason completes the application by adding functionality that fetches and posts data, and building an event handler.
Sending Email with MailGun JSJason concludes this section by adding MailGun JS, a transactional API service to the application.
User Dashboard SPA
Setting Up Dashboard PagesJason live codes the first pages of the dashboard project. This project highlights how to build a login interface using JAMStack.
Setting Up Client Routes in GatsbyJason 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.
Setting Up a Login RouteJason adds login functionality to the dashboard app by creating a route to be able to log into the dashboard for users.
Wiring Up Client-Side RoutesJason 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.
Adding Netlify IdentityJason 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.
Handling Authenticated StatesJason walks through the final step of the authentication functionality for the dashboard app, building modals for the login and logout forms.
Protecting Private RoutesJason 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.
Persist Data with FaunaJason 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.
GraphQL Schema in FaunaJason 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.
Setting Up the Back-EndJason 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.
Wiring Data to the UIJason starts live coding the front-end of the Todos app, and demonstrates how to wire it to the back-end.
Adding Support for Creating DataJason 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.
Saving Updated Toggle StateJason adds the option of toggling items as complete, adding more functionality to the app and showing another example of how to manage state.
Deleting DataJason live codes the last part of the Todos app by adding the deletion functionality, and concludes the section covering data handling with JAMStack.