Preface
The 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 the 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 Jamstack has to offer. You'll learn how an example Jamstack is built, build structured content using a schema, use GraphQL to expose the content, and employ Gatsby to build an event website using page and template components. Lastly, you'll deploy the website to a Netlify server.
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 by using the Jamstack.
Who this book is for
This book is for web developers looking to implement the 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.
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.
To get the most out of this book
Note:
At the time of writing, latest versions of Gatsby, React, Netlify and Sanity have been used. Any future updates for them will be pushed and updated to the GitHub repository.
If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to copy/pasting of code.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packt.com.
- Select the Support tab.
- Click on Code Downloads.
- Enter the name of the book in the Search box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR/7-Zip for Windows
- Zipeg/iZip/UnRarX for Mac
- 7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Jumpstart-Jamstack-Development. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800203495_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
{
resolve: "gatsby-source-sanity",
options: {
...clientConfig.sanity,
token: process.env.SANITY_READ_TOKEN,
watchMode: !isProd,
overlayDrafts: !isProd
}
}
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)
Any command-line input or output is written as follows:
npm install –g gatsby
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Tips or important notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.