JAM-Stack; Serving Frontends to the web in the 21st century

Install and sign up for the required tools and accounts, including GitHub, and install Node.js, npm, and nvm to follow along with the jam stack course.

Set up a GitHub account, install Git and the GitHub CLI, generate SSH keys, and prepare an AWS account with the AWS CLI for future repository work.

Sign up for aws and create your account, using the free tier; verify payment, sign in, enable security credentials, and install the aws cli for your jamstack setup.

Create an IAM user for programmatic access, attach S3 full access and CloudFront policies, securely store the access and secret keys, and prepare to configure Seal AI with those credentials.

install and configure the aws cli for jam stack development, using the stable v1 release and a compatible python version, then set up credentials and a test S3 bucket.

Compare classical web server architectures with the jam stack, explore pain points, and preview building a jam stack app from backend to frontend using templates, terraform, and CI pipelines.

Examine the old school web server approach where backend rendering fills templates with data, and discuss scaling and latency challenges Jamstack seeks to avoid.

Examine the drawbacks of classical web servers, including provisioning, templating, scaling, and high costs, and see how jam stack principles address these issues.

Build a simple Express-based web server to fetch employee data from a mock API, generate an HTML template, and serve it to the client, illustrating a JAM stack frontend setup.

Learn static templating in a JAM stack setup by building a node server, enabling auto reload with nodemon, and rendering dynamic user data via a main template using template strings.

Explore dynamic templating by fetching employee data from a mock API, injecting it into a template, and rendering a list of names, while serving static CSS for styling.

Examine the drawbacks of the classic web server model, then embrace jam stack by shifting templating to the client for faster delivery and easier scaling.

Explore the jam stack theory, combine JavaScript frameworks with cloud providers, and learn to build scalable, reusable jam stack templates using infrastructure as code with Terraform.

Explore jam stack theory, defining JavaScript, API, and markup, and examine how serverless frontends deliver fast, scalable web apps by separating front end from back end.

Jam stack visualized shows a distributed architecture built on cloud storage and a content delivery network, delivering static resources with no server-side computation and enabling the client to perform work.

Demo a practical JAM stack by scaffolding a Create React App, provisioning an S3 bucket for assets, and configuring a CloudFront distribution to deliver static resources via a CDN.

Scaffold a jamstack app with Create React App, run a local development server, edit src to hello world, and build production-ready assets in the built directory for deployment.

Provision infrastructure by creating a scalable S3 bucket for the React app and configuring a CloudFront distribution to serve the data globally from the origin.

Push a production-ready React app to an S3 bucket, deliver it via CloudFront, and control access with cache invalidation and Lambda functions for a fast, globally distributed JAM stack.

Explore template Terraform for setting up the backend store in a jam stack, creating infrastructure as code with an s3 backend, buckets, and a state file.

Define terraform code for an AWS S3 bucket named jam bucket, with force destroy and a policy document to control get and list access for a CloudFront distribution.

Create a CloudFront distribution with Terraform to serve an S3 bucket, configure origin access identity, default root object, and custom error responses for single page applications.

Plan and apply Terraform to provision an AWS S3 bucket and CloudFront distribution, configure cache behavior, allowed methods, and query strings. Validate bucket policy and origin settings as deployment completes.

Push a jam stack app to the infrastructure using terraform, upload the react build to an s3 bucket, and serve it through cloudfront.

Execute terraform destroy to remove the deployed jam stack infrastructure, including the CloudFront distribution and the S3 bucket. Track the state and resource destruction as the process completes.

Wrap up the jam stack deployment by using terraform to automate infrastructure, destroy cloudfront distributions and s3 buckets, manage state, and prepare a ci/cd pipeline for publishing code.

Build production assets on push and deploy to AWS via the CI/CD pipeline. Automatically invalidate CloudFront caches to deliver the latest content and wire up GitHub, Travis CI, and webhooks.

Learn to set up a jam stack repository on GitHub, authorize Travis CI, and configure a CI/CD pipeline, clone the repo, and validate builds.

Configure travis ci to automatically build production sources with npm run build, deploy to S3, and invalidate CloudFront cache after pushes to GitHub.

Configure travis ci for a javascript jamstack project by creating a hidden .travis.yml and defining before_install, npm install, npm test, npm run build, and after_success steps.

Learn to build a post-build ci/cd deployment script that syncs the built site to an S3 bucket, invalidates CloudFront cache, and manages environment keys with Travis.

This lecture guides setting deploy script permissions, enabling CI/CD with Travis, configuring AWS access keys, and provisioning the S3 bucket and CloudFront distribution via Terraform for production deployment.

Explore a jam stack ci/cd workflow by building, deploying to S3, invalidating CloudFront, and validating production-ready outputs, with Travis CI and Terraform enabling multi-environment deployment.