Join us for a Netlify product demo - July 14. Register Now!

By Phil Hawksworth in Guides & Tutorials β€’

Learn JAMstack with a free 3.5 hour video of demos and examples

In the 5 years since the term “JAMstack” was coined by Netlify co-founders Matt Biilmann and Chris Bach, it has grown in popularity and gained increasingly broad adoption.

Although its core principles are simple, it is also a flexible and far-reaching approach to web development so there are sometimes misunderstandings about its fundamentals.

So, with the help of freeCodeCamp, I’ve put together an extended video to unpack some of the core principles of JAMstack, address some of the common misconceptions, and dive into some examples.

This 3.5 hour video begins with an explanation of the concepts and benefits of the JAMstack and progresses through a variety of examples which start very simple, and gradually build in complexity.

If you’re not planning on making some popcorn and settling in for the full 3.5 hours in one sitting, you might want to dive directly in to one of the sections or examples.

Here’s a breakdown of the video with some resource links to help you get to grips with the JAMstack:

Welcome message

πŸ“Ί 00:00:00

  • Hello from me
  • What is to come in the video

Introduction to the JAMstack

πŸ“Ί 00:01:75

  • What does JAMstack stand for?
  • What does JAMstack mean?
  • Approaches to hosting web sites
  • Evolution of hosting architectures
  • Monoliths and complexity
  • Static assets vs static experiences
  • Comparing JAMstack to LAMP stack
  • Bake, Don’t fry
  • The motivations for generating sites ahead of time
  • Simplifying deployments
  • Some JAMstack advantages
    • Security
    • Performance
    • Security
  • Enablers of the architectural model
    • Static site generators
    • Tooling and automation
    • Browser capabilities
    • Services and the API economy

Example 1 – Simply a static site

πŸ“Ί 00:32:14 – Into the video

  • Markup, potentially enhanced JavaScript and calls APIs
  • The simplest JAMstack site can be just an HTML file!
  • Deploying to a CDN with Netlify Drop

πŸ‘‰ Example repository 1 – All simply static

Example 2 – Adding JavaScript

πŸ“Ί 00:40:40 – Into the video
- Explaining rendering - Client-side rendering - Server-side rendering at build time - Server-side rendering at request time - How “the stack” has moved to the browser - Adding JavaScript to update the view client-side - Deploying and hosting multiple files

πŸ‘‰ Example repository 2 – Changing the DOM with JavaScript

Example 3 – Building with a static site generator

πŸ“Ί 00:52:21 – Into the video

  • Build automation
  • What is a static site generator
  • Choosing a static site generator
  • Managing and installing dependencies
  • Abstracting content from templates
  • Running a local build with npm
  • Running a local build server with hot-reloading
  • Version control as a deployment process, using Git
  • Ignoring assets with .gitignore
  • Running a build in a continuous integration (CI/CD) environment

πŸ‘‰ Example repository 3 – Introducing a static site generator

Example 4 – Generating pages from a content API

πŸ“Ί 00:84:09 – Into the video

  • Using an external API (NewsAPI.org) as a data source
  • Exploring content feeds with curl and jq
  • Stubbing page templates with dummy data
  • Requesting data at build time with Axios
  • Populating pages with an external API at build time
  • Managing API keys with environment variables
    • locally with dotenv
    • in our continuous integration and deployment environments
  • Lightning the load on data sources, by pre-generating instead of per-page view

πŸ‘‰ Example repository 4 – Generating pages from a content API

Example 5 – Localised content and Geo-IP routing

πŸ“Ί 00:113:58 – Into the video

  • Architectural complexity and the benefits of JAMstack and modern CDNs
  • Caching everything
  • Degrees of personalization
    • Universal content
    • Localized content
    • Targeted content
    • Personalized content
  • Requesting localised content from the NewsAPI.org API
  • Generating pages for many locales
  • Routing users to content based on their location
    • CDN GeoIP routing and configuration
    • Generating routing config automatically with a site generator
  • Configuring custom 404s at the CDN
  • Routing users based on their Accept-Language header

πŸ‘‰ Example repository 5 – Generating localized pages, with geo-IP routing at the CDN

Example 6 – Client-side rendering targeted content

πŸ“Ί 00:184:08 – Into the video

  • Browser APIs
  • Getting user location with the browser’s GeoLoaction API
  • Working with HTTPS locally
  • Progressive Enhancement
  • Using the openweathermap.org API
  • Client-side rendering personalised content
  • Being aware of secrets in client-side API requests
  • Safeguarding secrets
  • Creating an API with serverless functions
  • Synchronising our API and our UI throughout our deployments

πŸ‘‰ Example 6 repository – Client-side rendering targeted API content

Demo – Gradual migration to the JAMstack

πŸ“Ί 00:199:50 – Into the video

  • Introducing JAMstack to existing sites and other infrastructure
  • Subdomains
  • Adding static pages
  • Resource shadowing, proxying, and redirects
  • Demo of adding new static views or proxying to existing resources

πŸ‘‰ Proxy demo repository – FCC Proxy Demo

More JAMstack resources to explore

If you are still hungry for more resources to explore about understanding and using the JAMstack, why not take a look at these:

JAMstack community resources

…and if you’d like to talk to people already building projects on, and benefiting from the JAMstack, come and join the conversation in the official JAMstack Slack.