Cover image for Jumpstart Jamstack Development

Jumpstart Jamstack Development

Release Date: 2021/05/01
ISBN: 9781800203495
Topic:
0%
20
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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.

Table of Contents

  1. Jumpstart Jamstack Development
  2. Foreword
  3. Contributors
  4. About the authors
  5. About the reviewers
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Reviews
  7. Chapter 1: History of the Jamstack
    1. The evolution of the Jamstack
    2. HTML
    3. Server-side includes
    4. The Common Gateway Interface
    5. Forms
    6. Web page preprocessors
    7. Content Management Systems
    8. WordPress
    9. Ajax
    10. JavaScript frameworks
    11. The rise of the cloud
    12. High-speed access
    13. The rise of the Jamstack
    14. The Jamstack acronym explained
    15. Jamstack advantages
    16. Our Jamstack
    17. GatsbyJS
    18. Sanity.io
    19. Netlify
    20. Getting started with the Jamstack
    21. Installation
    22. Prerequisites
    23. Summary
  8. Chapter 2: Introduction to Sanity
    1. Technical requirements
    2. Account setup
    3. Introduction to Sanity.io
    4. What is GROQ?
    5. Creating a project
    6. Introducing Sanity Manage
    7. Sanity.io project pages
    8. Sanity Studio overview
    9. Navigation
    10. Summary
  9. Chapter 3: Exploring Sanity Studio
    1. Technical requirements
    2. Modifying the example author
    3. Modifying the existing author
    4. Creating an additional author
    5. Removing and adding articles
    6. Removing example articles
    7. Creating a new article
    8. Modifying the website settings and redeploying the website
    9. Setting the website name
    10. Redeployment through Netlify
    11. Summary
  10. Chapter 4: Sanity Configuration and Schemas
    1. Technical requirements
    2. Modeling content with schemas
    3. Cloning the project
    4. Exploring the project's folders
    5. Schema relationships
    6. A one-to-one relationship
    7. A one-to-many relationship
    8. Extending, modifying, and deploying the schema
    9. The event schema
    10. The venue schema
    11. The schema file
    12. Deploying the schema
    13. Summary
  11. Chapter 5: Sanity's GROQ Language
    1. Technical requirements
    2. Why GROQ?
    3. Installing Vision
    4. GROQ versus SQL
    5. Basic queries with GROQ
    6. Selecting all events
    7. Selecting all upcoming events
    8. Selecting all past events
    9. Selecting upcoming virtual conference and non-virtual conferences
    10. Selecting specific event fields
    11. Selecting specific fields from relationships
    12. Advanced GROQ
    13. Getting events by venues
    14. Formatting the response
    15. Count result
    16. Summary
  12. Chapter 6: Sanity's GraphQL Playground
    1. Technical requirements
    2. An introduction to GraphQL
    3. Deploying the GraphQL API
    4. Basic GraphQL syntax
    5. GROQ versus GraphQL
    6. GraphQL playground basics
    7. Query parameters
    8. Summary
  13. Chapter 7: Gatsby – An Introduction
    1. Technical requirements
    2. Gatsby, built on React
    3. Gatsby basic project structure
    4. gatsby-config.js
    5. dotenv
    6. Key Gatsby files
    7. Gatsby folders
    8. The gatsby develop command
    9. Summary
  14. Chapter 8: Gatsby and GraphQL
    1. Technical requirements
    2. GraphQL in GatsbyJS
    3. GraphiQL, a GraphQL navigator
    4. Summary
  15. Chapter 9: Gatsby Source Plugins
    1. Technical Requirements
    2. Understanding plugins
    3. Node Package Manager
    4. Semantic versioning
    5. Installing a package from npm
    6. Searching, installing, and configuring plugins
    7. The Gatsby Plugin Library
    8. Searching for a plugin
    9. Installing and configuring the gatsby-source-filesystem plugin
    10. Installing and configuring the gatsby-transformer-remark plugin
    11. Installing and configuring the gatsby-source-drupal plugin
    12. Summary
    13. Further reading
  16. Chapter 10: Building Gatsby Components
    1. Technical requirements
    2. React components
    3. Tag convention
    4. Understanding the types of components
    5. Gatsby page components
    6. Gatsby template components
    7. Gatsby partial components
    8. Summary
  17. Chapter 11: APIs – Extending Gatsby
    1. Technical requirements
    2. Introduction to APIs
    3. Gatsby – APIs
    4. Creating a Netlify form
    5. Configuring a token form in Sanity
    6. Configuring a Netlify function
    7. Summary
  18. Chapter 12: APIs – Alexa Skills
    1. Technical requirements
    2. Alexa skill life cycle
    3. Skill interface
    4. Skill service
    5. Creating the skill
    6. Configuring the skill through the skill interface
    7. Build
    8. Code
    9. Test
    10. Summary
  19. Chapter 13: Tying It All Together
    1. Technical requirements
    2. Gatsby.js layout modifications
    3. Introducing Tailwind CSS
    4. Installing the Tailwind CSS framework
    5. Using the Tailwind CSS framework
    6. Improving and formatting the event list
    7. Preparing for deployment
    8. Cleaning up the code
    9. Toggling the venue visibility
    10. Summary
  20. Chapter 14: Deployment Using Netlify and Azure
    1. Technical requirements
    2. Introduction to Netlify
    3. Netlify plugins
    4. HTML Minify
    5. Advanced configuration through the netlify.toml file
    6. Netlify deployment via the command line
    7. Azure Static Web Apps deployment
    8. Static web app creation
    9. Static web app continuous deployment
    10. Summary
  21. Chapter 15: Conclusion
    1. Summary of concepts
    2. The Jamstack's future
    3. Jamstack, JAMstack, and JAM Stack
    4. The Jamstack community resources
    5. Contributing to Jamstack projects
    6. Contributing to Sanity
    7. Contributing to Gatsby
    8. Contributing to Netlify
    9. Final thoughts
    10. Why subscribe?
  22. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think
3.14.70.203