Book Image

Jumpstart Jamstack Development

By : Christopher Pecoraro, Vincenzo Gambino
Book Image

Jumpstart Jamstack Development

By: Christopher Pecoraro, Vincenzo Gambino

Overview of this book

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.
Table of Contents (17 chapters)

Introduction to Sanity.io

"Sanity.io is the platform for structured content."

https://www.sanity.io/docs

Sanity.io is a data storage service where you can manage content, making use of Sanity's Application Programming Interfaces (APIs), tools, and libraries. You can easily build a centralized content repository for your projects.

Sanity at its core is the data store and its query language is GROQ.

Since Sanity Studio is an open source single-page application, it can be freely modified and themed. Built using the JavaScript language, you can easily define your content structure. Then, using the ReactJS library, you are able to extend Sanity Studio's functionality with your own ReactJS components. Also, Sanity Studio enables workflow personalization for a project's content editors. Since Sanity Studio uses npm, you may contribute a plugin by creating a public package hosted on https://www.npmjs.com/, to extend its functionality.

Sanity's content is stored and accessed via its data store, which is accessible using either the Sanity.io client library or via a HyperText Transfer Protocol (HTTP) API call. Sanity.io manages the data store, which is cloud-hosted.

What is GROQ?

GROQ is a query language created by Sanity. It is used to retrieve information from the data store. GROQ is easy to learn and powerful—for example, different sets of documents can be queried into a single response.

Now that we have a high-level overview of Sanity.io, we will create our first project.