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: Jan 23, 2020 — Jan 23, 2020 Feb 20, 2020 — Feb 20, 2020 Mar 26, 2020 — Mar 26, 2020
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

VR for Enterprise Developers Icon Dec 9/2019

VR for Enterprise Developers

a11y logo Dec 16/2019

A11Y

Angular 7 Logo Jan 13/2020

Angular 8

React Training Course Logo Dec 11/2019

ReactJS

React Training Course Logo Dec 12/2019

React Native

Electron Training Course Dec 12/2019

Electron

Dec 16/2019

Node.js

Vue.js Training Course Jan 21/2020

Vue.js

Sign-up for our React course

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

View Course Details