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. This book takes a hands-on approach and will have you up and running with modern web development in no time. 

Jumpstart Jamstack Development

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Programming

Preface

Welcome to the Jamstack . This completely new web development paradigm has excited the information technology industry and is becoming steadily more popular, with new companies constantly forming around it. This book is one of the first of a few tutorials available focused on practical and hands-on experience with the Jamstack.

History of the Jamstack

Throughout this book, we will build a news and events website and make use of Sanity.io as a structured content framework. We will explore how to create and manage content and new types of content by adding custom fields, defining validation rules for the fields, and customizing Sanity Studio. We will also learn how to source our content to a frontend framework through the Graph-Relational Object Queries ( GROQ ) Sanity.io query language and GraphQL.

Introduction to Sanity

Now that we have a basic Jamstack application installed and configured and have learned about the basic sections of the dashboard and desk, we will begin to build a news and events website based on the example blog that is created.

Exploring Sanity Studio

In the previous chapter, we learned how to use Sanity Studio. In this chapter, we will learn how to clone the project from GitHub, install its dependencies, learn how to start up the local development environment, and examine the file structure. Then, we will learn how schemas are constructed, and how to modify them, learning about relationships. This will allow you to easily make modifications to the schema, testing the schema locally by viewing it in the hosted version in the browser.

Sanity Configuration and Schemas

In this chapter, we are going to explore GROQ, Sanity's open source query language. We will learn why GROQ was created and how to use GROQ and the Vision plugin to interact with our Sanity Studio dataset. We will also do a comparison between GROQ and SQL, and after that, we will run basic and advanced queries with GROQ.

Sanity's GROQ Language

This chapter introduces GraphQL, a powerful query language. Sanity's GraphQL API enables external programs to interact with its structured content while following the standard that it provides. This allows developers to leverage the rich GraphQL ecosystem of tools and practices that are available in the development community. Both GraphQL and GROQ, which is Sanity's proprietary query language, are open source and can be used to interact with Sanity. However, while GROQ is specific to Sanity, GraphQL is universally used by many applications.

Sanity's GraphQL Playground

Gatsby is the second part of the three-part Jamstack system used in this book. The definition that Gatsby gives for itself is as follows:

Gatsby &ndash; An Introduction

In this chapter, we'll begin to bring content into Gatsby through GraphQL. GraphQL is a good starting point for learning about how Gatsby works, since Gatsby sources content using GraphQL. As we learned in Chapter 6 , Sanity's GraphQL Playground , Sanity exposes its information through a GraphQL Application Programming Interface ( API ), so Gatsby can easily use Sanity's content through GraphQL.

Gatsby and GraphQL

In this chapter, we are going to explain how to extend the functionalities of Gatsby by using plugins. We will start by exploring the basics of a plugin, and then look at how to install and maintain a plugin. We will explore where to find a plugin and how Gatsby manages its plugins. At the end of the chapter, we will install and configure two new plugins to our Gatsby application.

Gatsby Source Plugins

This chapter introduces the M component of the Jamstack; that is, Markup . Markup is most often used to render, or produce, the content that the end user will view in the browser, decorated with some formatting. Code modularity in Gatsby is achieved through the use of components, which are its building blocks. Each component building block that is built using JavaScript and JSX will accept input and return HTML and web content to the browser. In this chapter, we will learn how to create, edit, and extend these components – the building blocks of the site.

Building Gatsby Components

In this chapter, you will learn about the A part of the Jamstack—that is, Application Programming Interfaces ( APIs ). We will learn how to use them within the dynamic portion of a compiled web page to recreate the functionality that web developers are familiar with in traditional server-based web development. We are going to create a custom Propose an event form using a Netlify form, and we are going to manage submissions through Netlify functions. We will also see how to connect a third-party service to our Gatsby application.

APIs &ndash; Extending Gatsby

Alexa is the Amazon Virtual Assistant that can perform tasks or services for an individual, and it uses natural language processing and machine learning to convert voice input to an executable command. Alexa can provide a wide variety of services, from music playback to creating to-do lists, playing audiobooks, and providing weather, traffic, and news. Alexa is also capable of controlling many smart devices, allowing you to build an automation system for your home. An Amazon user can install skills, which are functionalities, similar to apps, that are available in the Alexa Skills Store to extend Alexa's capabilities.

APIs &ndash; Alexa Skills

In the last few chapters, we learned about the ways in which our web application can interact with third-party systems. Now, we'll return to our web application and improve the visual aspects of the website to make the user interface modern and more appealing.

Tying It All Together

In the last chapter, we prepared our website for deployment. We added style to the components using Tailwind CSS. Lastly, we cleaned up the layout and refactored the code to components. Now, we can look more closely at the last component of the Jamstack used in this book: Netlify . Netlify is used as the default platform for the Blog with Gatsby example that was created at https://sanity.io/create . At the time of writing this book, Microsoft has added the Static Web Apps service, providing yet another option for deployment. Since GitHub and Azure are both owned by Microsoft, there is an excellent integration between the Static Web Apps service and GitHub.

Deployment Using Netlify and Azure

This closing chapter summarizes the concepts learned throughout the book and how the Jamstack community is evolving. The chapter will discuss the various external projects and how to contribute to them. The main topics that we will cover in this chapter are as follows:

Jumpstart Jamstack Development

Details

Description

Creators

Christopher Pecoraro

Vincenzo Gambino

Content

Reviews

Frequently Asked Questions

Jumpstart Jamstack Development