JAMstack Bootcamp

The JAMstack is a modern industry trend representing an approach to building websites that consolidates many new technology capabilities. An acronym for JavaScript, APIs, and Markup, it is rapidly growing in popularity for its many benefits including better performance, improved security, and a lower cost of scaling than conventional alternatives.

GatsbyJS is a static Progressive Web App (PWA) generator built on React that allows developers to build blazing fast websites. It uses graphQL for sourcing data and comes with an ecosystem of thousands of plugins for added functionality. Gatsby is a top choice for developers looking for a future-proof, scalable, and highly performant option.

NetlifyCMS is a free and open-source headless content management system (CMS) that pairs very well with GatsbyJS. The real-time preview, unlimited user-roles, and rich plugin ecosystem make this an ideal choice to add some dynamic content management to our JAMstack solution.

Through this course students will learn the basics of setting up a Gatsby site, including navigation and installing plugins, followed by a deep dive into Gatsby APIs and graphQL queries. Students will learn about Gatsby’s image processing capabilities and how Gatsby allows for improved SEO. Finally, you will configure your site with NetlifyCMS and deploy changes through the CMS editor UI.

Cost: $499 CAD / $499 USD
Duration: 1 day
Dates:
Pre-requisites
  • Comfortable with JavaScript
  • Familiar with ReactJS
  • Have a Git account and are familiar with Git
  • Comfortable using an editor to build web pages

Hasan Ahmad

Our JAMstack Instructors

This JAMstack Bootcamp was designed and developed by DEV6 web application developers who use JAMstack in real-life projects. The course is highly interactive and features significant number of student exercises.

Course Modules

Module 1: Overview of JAMstack

  • Overview of what JAMstack is
  • Overview of Gatsby, Netlify, and NetlifyCMS
  • Exercise: Set up environment and tools to use for the course

Module 2: Introduction to Gatsby

  • Overview of the schema of Gatsby
  • Overview of sourcing content and data for Gatsby
  • Project structure overview
  • Exercise: Create an “About” page

Module 3: Configuring Gatsby

  • Overview of Gatsby APIs (provide usage of the API files)
  • Overview of Gatsby plugins and describe most popular plugins for project
  • Exercise: Set up configuration of schema and plugins based on repo

Module 4: Data Management in Gatsby

  • Introduction to GraphQL in Gatsby
  • Using GraphQL query options and GraphiQL
  • Creating and modifying pages
  • Static queries versus page queries
  • Exercise: Use GraphQL to create page(s) and fetch data from file system

Module 5: GraphQL Capabilities in Gatsby

  • Deep dive into using GraphiQL and generating GraphQL queries
  • Pagination using GraphQL
  • Exercise: Use GraphQL to implement pagination and filtering for shirts

Module 6: GraphQL and Images in Gatsby

  • Using images in Gatsby
  • Exercise: Use GraphQL to provide image resources

Module 7: GraphQL and SEO in Gatsby

  • SEO
  • Exercise: Create an SEO component and static query

Module 8: Netlify Build and Deployment

  • Deployment using Netlify
  • Exercise: Add the configurations for setting up the NetlifyCMS

Module 9: NetlifyCMS Setup

  • Explain all configuration options for NetlifyCMS
  • Creating and configuring CMS templates
  • Exercise: Add the configurations for setting up the NetlifyCMS

View Our Other Courses

a11y logo

A11Y

VR for Enterprise Developers Icon

VR for Enterprise Developers

Angular 7 Logo

Angular 8

React Training Course Logo

ReactJS

React Training Course Logo

React Native

Electron Training Course

Electron

NodeJS

Node.js

Vue.js Training Course

Vue.js

Sign-up for our React course

Build a complete ReactJS application as the course is being taught.

View Course Details