Jumpstart Jamstack Development

Jumpstart Jamstack Development

by Christopher Pecoraro, Vincenzo Gambino
Released May 2021
Publisher(s): Packt Publishing
ISBN: 9781800203495

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Leverage Jamstack principles, techniques, and best practices to build dynamic websites and web apps focused on speed, security, and accessibility

Key Features

  • Understand how JavaScript integrates with reusable application program interfaces (APIs) and browser markup to build a serverless web application
  • Gain a solid understanding of static site development with Gatsby and its importance in Jamstack
  • Find out how to deploy a Jamstack event website directly from GitHub using Netlify

Book Description

Jamstack (JavaScript, API, and Markup) enables web developers to create and publish modern and maintainable websites and web apps focused on speed, security, and accessibility by using tools such as Gatsby, Sanity, and Netlify. Developers working with Jamstack will be able to put their knowledge to good use with this practical guide to static site generation and content management. This Jamstack book takes a hands-on approach to implementation and related methodologies that will have you up and running with modern web development in no time.

Complete with step-by-step explanations of essential concepts, practical examples, and self-assessment questions, you'll begin by building an event and venue schema structure, and then expand the functionality, exploring all that the Jamstack has to offer. You’ll learn how an example Jamstack is built, build structured content using Sanity to create a schema, use GraphQL to expose the content, and employ Gatsby to build an event website using page and template components and Tailwind CSS Framework. Lastly, you’ll deploy the website to both, a Netlify server and the Microsoft Static Web Apps Service, and interact with it using Amazon Alexa.

By the end of this book, you'll have gained the knowledge and skills you need to install, configure, build, extend, and deploy a simple events website using Jamstack.

What you will learn

  • Discover the Jamstack approach and build speedy, secure, and accessible websites and web apps with its component technologies
  • Build an events website by using the Jamstack and the Gatsby static site generator
  • Create and modify your templates and pages to build creative web apps
  • Build, modify, and extend structured content schemas in Sanity
  • Understand Gatsby plugins, project structure, and files, and how it can be used to build Jamstack apps
  • Find out how GatsbyJS uses GraphQL to source content

Who this book is for

This book is for web developers looking to implement Jamstack practically. JavaScript developers who want to build modern speedy and secure web apps will also find this book useful. Familiarity with JavaScript and Database programming is assumed.

Table of contents

  1. Jumpstart Jamstack Development
  2. Foreword
  3. Contributors
  4. About the authors
  5. About the reviewers
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Reviews
  7. Chapter 1: History of the Jamstack
    1. The evolution of the Jamstack
      1. HTML
      2. Server-side includes
      3. The Common Gateway Interface
      4. Forms
      5. Web page preprocessors
      6. Content Management Systems
      7. WordPress
      8. Ajax
      9. JavaScript frameworks
      10. The rise of the cloud
      11. High-speed access
    2. The rise of the Jamstack
      1. The Jamstack acronym explained
      2. Jamstack advantages
    3. Our Jamstack
      1. GatsbyJS
      2. Sanity.io
      3. Netlify
    4. Getting started with the Jamstack
      1. Installation
      2. Prerequisites
    5. Summary
  8. Chapter 2: Introduction to Sanity
    1. Technical requirements
    2. Account setup
    3. Introduction to Sanity.io
      1. What is GROQ?
    4. Creating a project
    5. Introducing Sanity Manage
      1. Sanity.io project pages
    6. Sanity Studio overview
      1. Navigation
    7. Summary
  9. Chapter 3: Exploring Sanity Studio
    1. Technical requirements
    2. Modifying the example author
      1. Modifying the existing author
      2. Creating an additional author
    3. Removing and adding articles
      1. Removing example articles
      2. Creating a new article
    4. Modifying the website settings and redeploying the website
      1. Setting the website name
      2. Redeployment through Netlify
    5. Summary
  10. Chapter 4: Sanity Configuration and Schemas
    1. Technical requirements
    2. Modeling content with schemas
      1. Cloning the project
      2. Exploring the project's folders
    3. Schema relationships
      1. A one-to-one relationship
      2. A one-to-many relationship
    4. Extending, modifying, and deploying the schema
      1. The event schema
      2. The venue schema
      3. The schema file
      4. Deploying the schema
    5. Summary
  11. Chapter 5: Sanity's GROQ Language
    1. Technical requirements
    2. Why GROQ?
      1. Installing Vision
    3. GROQ versus SQL
    4. Basic queries with GROQ
      1. Selecting all events
      2. Selecting all upcoming events
      3. Selecting all past events
      4. Selecting upcoming virtual conference and non-virtual conferences
      5. Selecting specific event fields
      6. Selecting specific fields from relationships
    5. Advanced GROQ
      1. Getting events by venues
      2. Formatting the response
      3. Count result
    6. Summary
  12. Chapter 6: Sanity's GraphQL Playground
    1. Technical requirements
    2. An introduction to GraphQL
      1. Deploying the GraphQL API
      2. Basic GraphQL syntax
    3. GROQ versus GraphQL
    4. GraphQL playground basics
      1. Query parameters
    5. Summary
  13. Chapter 7: Gatsby – An Introduction
    1. Technical requirements
    2. Gatsby, built on React
    3. Gatsby basic project structure
      1. gatsby-config.js
      2. dotenv
      3. Key Gatsby files
      4. Gatsby folders
    4. The gatsby develop command
    5. Summary
  14. Chapter 8: Gatsby and GraphQL
    1. Technical requirements
    2. GraphQL in GatsbyJS
    3. GraphiQL, a GraphQL navigator
    4. Summary
  15. Chapter 9: Gatsby Source Plugins
    1. Technical Requirements
    2. Understanding plugins
      1. Node Package Manager
      2. Semantic versioning
      3. Installing a package from npm
    3. Searching, installing, and configuring plugins
      1. The Gatsby Plugin Library
      2. Searching for a plugin
      3. Installing and configuring the gatsby-source-filesystem plugin
      4. Installing and configuring the gatsby-transformer-remark plugin
      5. Installing and configuring the gatsby-source-drupal plugin
    4. Summary
    5. Further reading
  16. Chapter 10: Building Gatsby Components
    1. Technical requirements
    2. React components
      1. Tag convention
    3. Understanding the types of components
      1. Gatsby page components
      2. Gatsby template components
      3. Gatsby partial components
    4. Summary
  17. Chapter 11: APIs – Extending Gatsby
    1. Technical requirements
    2. Introduction to APIs
    3. Gatsby – APIs
      1. Creating a Netlify form
      2. Configuring a token form in Sanity
      3. Configuring a Netlify function
    4. Summary
  18. Chapter 12: APIs – Alexa Skills
    1. Technical requirements
    2. Alexa skill life cycle
      1. Skill interface
      2. Skill service
    3. Creating the skill
    4. Configuring the skill through the skill interface
      1. Build
      2. Code
      3. Test
    5. Summary
  19. Chapter 13: Tying It All Together
    1. Technical requirements
    2. Gatsby.js layout modifications
      1. Introducing Tailwind CSS
      2. Installing the Tailwind CSS framework
      3. Using the Tailwind CSS framework
      4. Improving and formatting the event list
    3. Preparing for deployment
      1. Cleaning up the code
      2. Toggling the venue visibility
    4. Summary
  20. Chapter 14: Deployment Using Netlify and Azure
    1. Technical requirements
    2. Introduction to Netlify
    3. Netlify plugins
      1. HTML Minify
    4. Advanced configuration through the netlify.toml file
    5. Netlify deployment via the command line
    6. Azure Static Web Apps deployment
      1. Static web app creation
      2. Static web app continuous deployment
    7. Summary
  21. Chapter 15: Conclusion
    1. Summary of concepts
    2. The Jamstack's future
      1. Jamstack, JAMstack, and JAM Stack
    3. The Jamstack community resources
    4. Contributing to Jamstack projects
      1. Contributing to Sanity
      2. Contributing to Gatsby
      3. Contributing to Netlify
    5. Final thoughts
    6. Why subscribe?
  22. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think

Product information

  • Title: Jumpstart Jamstack Development
  • Author(s): Christopher Pecoraro, Vincenzo Gambino
  • Release date: May 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800203495