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)

What this book covers

Chapter 1, History of the Jamstack, gives you an overview of the history of web design and development and the problems faced with backend-driven websites, namely security, speed, accessibility, hosting, and deployment issues.

Chapter 2, Introduction to Sanity, teaches you how to create a Sanity.io website using the web-based example project creation tool.

Chapter 3, Exploring Sanity Studio, introduces you to Sanity Studio, a structured content management tool. Then, you will learn how to configure the website and create, modify, and delete content.

Chapter 4, Sanity Configuration and Schemas, helps you understand the nomenclature and syntax of Sanity.io's content schemas and how they define the structure of content. You will also learn how to define one-to-one relationships and one-to-many relationships between entities.

Chapter 5, Sanity's GROQ Language, teaches you about GROQ, Sanity.io's proprietary way to query its data. Its similarities and differences with standard SQL will be shown, and various examples will be detailed.

Chapter 6, Sanity's GraphQL Playground, introduces you to Sanity.io's GraphQL playground, how to start it up, and how it differs from standard GraphQL. You will learn how to obtain either a single type of record or multiple.

Chapter 7, Gatsby – An Introduction, teaches you about the J part of the Jamstack. You will learn about GatsbyJS, a static generator based on ReactJS, why it was created, how it was built, and the problem it solves. Finally, you will learn about the configuration file and key files involved (such as ssr and node).

Chapter 8, Gatsby and GraphQL, introduces you to Gatsby's GraphQL tool and how it differs from standard GraphQL. This chapter will help you understand how GraphQL is used to connect and serve up, through the Gatsby source code, the sourced content to the static site generator.

Chapter 9, Gatsby Source Plugins, will introduce you to the various plugins that are being built by the Jamstack community that allow GatsbyJS to connect to various types of well-known backend systems, from the filesystem to existing CMS frameworks such as Drupal.

Chapter 10, Building Gatsby Components, will introduce you to the M part of the Jamstack, markup, and the building blocks of Gatsby, components, as well as learning how pages, templates, and partials are structured and how they differ. You will learn how to create, edit, and extend components.

Chapter 11, APIs – Extending Gatsby, teaches you about the A part of the Jamstack, APIs, and 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.

Chapter 12, APIs – Alexa Skills, teaches you how to build the Jumpstart Jamstack Alexa skill. As an example, you would be able to ask for the upcoming five events. Through this example, you will be able to extend the current skill by retrieving past events, or all events, and you will also be able to create a new skill for any other application you have.

Chapter 13, Tying It All Together, teaches you how to modify the CSS and the final elements of the website, and how to configure and release a GatsbyJS production build.

Chapter 14, Deployment Using Netlify and Azure, will introduce the Netlify serverless continuous deployment hosting service. You will learn how to connect your websites' repositories to Netlify and how Netlify prepares and combines the various files into a fast, efficiently performing, single static file.

Chapter 15, Conclusion, will summarize the concepts learned throughout the book, discuss how the pieces fit together, and explore how the Jamstack community is evolving. The chapter will discuss various external projects and how to contribute to them.