Jumpstart Jamstack Development

Build and deploy modern websites and web apps using Gatsby, Netlify, and Sanity

Christopher Pecoraro, Vincenzo Gambino

• Publisher: Packt Publishing
• Year: 2021
• Print ISBN: 9781800203495
• eBook ISBN: 9781800205901
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

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.

Chapter 1: History of the Jamstack

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.

A technology stack represents a specific collection of languages, databases, and operating systems, such as the LAMP stack. The acronym LAMP stands for Linux, an operating system; Apache, a web server; MySQL, a database; and PHP, a programming language. The Jamstack is actually not a stack in this sense, but rather a new methodology and toolset to produce websites and web applications.

In this chapter, we're going to first look at the history of the web, introduce the Jamstack, and discuss its advantages. To understand how the Jamstack evolved into what it is today, we need to look back at the more-than-two-decade history of the World Wide Web. Web design and web development, the two main industries that evolved from the World Wide Web, developed into two very popular and lucrative occupations, but it wasn't always that way.

These are the main topics that we will cover in this chapter:

• The evolution of the Jamstack
• The rise of the Jamstack
• Our Jamstack
• Getting started with the Jamstack

The evolution of the Jamstack

The evolution of the Jamstack can be easily explained by looking at how the World Wide Web evolved, starting with its most central component, HyperText Markup Language (HTML).

HTML

The very first web pages were simply comprised of text with HTML tags, providing markup instructions with the ability to link pages together. In fact, HTML is often mistaken by the average person as a programming language, but it was, at the most fundamental level, a series of symbols that represented formatting instructions. It still gets included in programming language lists, together with actual programming languages such as C and Java. It is merely a markup language, though, despite having evolved rapidly to now include accessibility and semantic features. This means that it is not much more than markup. In its earliest versions, however, it simply provided general formatting instructions.

For example, we could use an h1 tag to represent the header of a page, which would make the text appear larger, or a bold tag to make the text bold. Each page would consist of text, links, and HTML tags.

The following code snippet provides an example of this:

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage.</h1>

</body>

<html>

As the number of web pages on websites grew, weekly—or even daily—tasks involved updating up to 50 pages manually. Every time a change was needed in a shared part of a web page (such as the header, footer, or navigation pane), these repeated actions proved to be quite tedious.

Let's investigate some solutions that were devised for this problem.

Server-side includes

One attempt to remedy this repeated manual work was called a server-side include, or SSI. This markup element was created to allow web designers to include pieces of pages (for example, the header) without having to repeat content and markup. Then, when the page was generated, the tag would be replaced with the resultant HTML output.

For example, three links on a web page, Home, About Us, and Contact Us, would have the following markup:

<a href="home.html">Home</a>

<a href="about_us.html">About Us</a>

<a href="contact_us.html">Contact Us</a>

This HTML could be placed inside a file called navigation.ssi. The include would be called as follows:

<!--#include virtual="navigation.ssi" -->

After the web server processed this, the result shown on the page would be the same as that shown in the preceding example. Next, another similar approach was used to allow for dynamic content to be produced.

The Common Gateway Interface

The Common Gateway Interface or CGI, allowed programs written in languages such as Perl to be included in a web page, providing added functionality such as a page counter. The actual place in the HTML page that called this code would again be replaced with the resulting HTML output.

A Perl script that counted the number of page visitors was placed into the cgi-bin directory and called as follows:

<p>This page has been visited

<!--#exec cgi="/cgi-bin/counter.pl"--> times.</p>

This would produce the following result on the web page:

<p>This page has been visited 5349 times.</p>

The number 5349 was produced by this code and displayed on the page.

Forms

Another important part of the history of web development was forms. Forms allowed a simple web page to transform itself into an actual web application. Web forms replicated the functionality of traditional forms found in desktop applications. Web forms also enabled end users, as opposed to the webmaster, to add content—for example, in forums, submission forms were used.

On the public-facing portion of a website, submissions from these forms added even more content as websites grew quickly in size. Sites soon effectively became software applications, more than just a collection of files with markup. Soon, more than just serving simple pages, web server modules were created to preprocess entire pages as programs.

Web page preprocessors

Another interesting part of the evolution of modern web development was the ability to use whole page preprocessors, such as PHP. In fact, this language, recursively called PHP: Hypertext Preprocessor, explains exactly what it does. These files had a different file extension, and the web server (such as Apache) could process the entire page as an actual program and output the result as HTML tags and content.

Next, let's move into the modern era: Content Management Systems (CMS).

Content Management Systems

Soon, databases such as MySQL were included in affordable web hosting plans so that webmasters could easily use them. Database tables could be queried, and the results would enrich and add meaning t...

Table of contents

• Jumpstart Jamstack Development
• Foreword
• Preface
• Chapter 1: History of the Jamstack
• Chapter 2: Introduction to Sanity
• Chapter 3: Exploring Sanity Studio
• Chapter 4: Sanity Configuration and Schemas
• Chapter 5: Sanity's GROQ Language
• Chapter 6: Sanity's GraphQL Playground
• Chapter 7: Gatsby – An Introduction
• Chapter 8: Gatsby and GraphQL
• Chapter 9: Gatsby Source Plugins
• Chapter 10: Building Gatsby Components
• Chapter 11: APIs – Extending Gatsby
• Chapter 12: APIs – Alexa Skills
• Chapter 13: Tying It All Together
• Chapter 14: Deployment Using Netlify and Azure
• Chapter 15: Conclusion
• Other Books You May Enjoy