Table of Contents
Introduction
Introduction
Jason Lengstorf introduces the course by providing some personal background, briefly discusses Jamstack architecture, course resources, and an overview of the material that will be covered in this course. Gatsby is built on ReactJS and GraphQL, is opinionated on file structure, has a focus on faster load times, and is a great option to build static websites fast.
Course Code Setup
Jason discusses which requisite pieces are needed for the course repo including GitHub, GitHub CLI, Netlify, Netlify CLI, and Yarn. A walkthrough of the contents of course repository files and scripts is also provided in this segment.
Monorepo & Deployment Setup
Jason walks through setting up the course monorepo package.json, installing dependencies, linking the monorepo to Netlify, and starting a development environment on local host. A student's question regarding if Gatsby will recursively detect which dependencies need to be installed, is also covered in this segment.
Understanding Gatsby APIs
Add Custom Pages
Jason demonstrates how to build custom pages by using a special gatsby-node.js folder, which holds and exports functions, and the Node API createPages action createPage. The custom page template takes in the pageContext prop as an argument and passes over the custom set data from the context field of createPage.
Add Custom Data
Jason walks through adding custom data to Gatsby's GraphQL layer by using the sourceNodes API to pull in data from objects set in a .json file. The basic Gatsby node structure and how to determine if the node has changed is also covered in this segment.
Create Data Relationships
Jason demonstrates how to create relationships between two Gatsby nodes by writing GraphQL schema to be used by createTypes API. Creating custom relationships between Gatsby nodes allows for the creation of more specific GraphQL queries.
Create Custom Resolvers for Data Types
Jason live codes custom resolvers using Gatsby's createResolver API to define a new field on the Book type, then use some of the data each book contains to build a custom buy link. A resolver in GraphQL is a function that returns data for a given field.
Handle Remote Images
Jason demonstrates how to handle image optimization from custom data that has images from external URLs by using node-fetch and gatsby-source-filesystem. Gatsby can pull in and optimize external images at build time by creating what's called a "remote file node".
Working With Custom Data
Create Pages with Custom Data Automatically
Jason walks through using Gatsby's file-based routing and the helper package slugify to automatically create pages with custom data. A student's question regarding how to add the page slug as a property in the GraphQL tree is also covered in this segment.
Create Pages with Custom Data Manually
Jason demonstrates manually creating pages using the createPages API and custom logic, adding styling in a CSS module, and creating the page template for the createPages API. Gatsby being able to run APIs synchronously or asynchronously by simply omitting or including the async keyword is also discussed in this segment.
Build Custom Themes
Setting Up Gatsby Theme Development
Jason provides a brief recap of the project's progress so far, discusses what a Gatsby theme is, and live codes creating and connecting a Gatsby theme. Gatsby themes can extend the gatsby config to allow for adding plugins, provide components that can wrap, shared styles, and assist in creating foundations for use in multiple websites.
Create a Layout
Jason live codes building custom layout styling, global styles, and a scoped module for the layout. Implementing the layout styling, how to automatically wrap the layout on every page, and how to pull in the layout as a plugin is also covered in this segment.
Add a Shared Nav Component
Jason walks through creating a configurable shared navigation component by using the site metadata section of gatsby-config.js. Adding styling to the navigation bar and importing the navigation component are also covered in this segment.
Configure a Gatsby Theme & File Shadowing
Jason demonstrates how to customize the nav items in the shared nav theme by adding them to the site's gatsby-config.js site metadata and the concept of file shadowing. Gatsby supports a concept called "shadowing" which gives the ability to selectively override any file in a theme from within the site.
App-Like Features of Gatsby
Client-Only Routes & Dynamic Pages
Jason live codes building a search component with dynamically generated content, a catch-all dynamic route, and a client-only fallback route. A catch-all dynamic route will cause every URL that starts with the folder name to be routed to this component.
Serverless Function Setup
Jason discusses and briefly demonstrates Gatsby's built-in support for serverless functions which allow the ability to quickly write small chunks of server-like functionality that can run safely as if it were running on a server.
Auth Serverless Function
Jason walks through building three small serverless functions to fake logging in and out of the Gatsby app by setting cookies values accordingly. Setting cookies for a user's logged in status can help keep sessions alive and avoid sending requests to authentication servers.
Protected Pages
Jason live codes how to use serverless functions to create protected routes, building a login page, account dashboard, and client-only catch all route. Using the previous built auth management with serverless functions to demonstrate the ability to protect routes based on auth status in Gatsby is also covered in this segment.
Deployment
Course Recap
Jason provides a general recap of the material covered so far in the course. A student's question regarding why Jason organized the data pull plugin as it is in the Gatsby project is also covered in this segment.
Deploying a Dynamic Site to Netlify
Jason walks through adding proper build configuration to the netlify.toml, adding the Gatsby Netlify plugin, and deploying the site using the Netlify CLI. Brief discussion of some of the processes involved when Netlify is deploying the site is also covered in this segment.
Managing Environment Variables
Jason demonstrates how to manage environment variables in Gatsby and expands on the benefits of using serverless functions. Client-side code can't see all environment variables, it can only see those prefixed with GATSBY_, this is a security measure so sensitive variables are not accidentally used in client-side code.
