Gatsby: The Definitive Guide: Build and Deploy Highly Performant Jamstack Sites and Applications [1 ed.] 1492087513, 9781492087519

Table of contents :
Copyright
Table of Contents
Foreword
Preface
Who Should Read This Book
Why I Wrote This Book
Navigating This Book
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Part I. Elementary Gatsby
Chapter 1. Gatsby Fundamentals
What Is Gatsby?
Gatsby Pages and Components
Gatsby’s Data Layer: GraphQL and Source Plugins
The Gatsby Ecosystem
Why Gatsby?
Performance
Accessibility
Developer Experience
Security
Gatsby and the Jamstack
Static Site Generators
Distributed Content and Commerce
The Jamstack
JavaScript in Gatsby
Command-Line Interfaces
Modular JavaScript
React in Gatsby
Declarative Rendering with JSX
React Components
React Props
Getting Going with Gatsby
The Command Line
Installing the Gatsby CLI
Creating Your First Gatsby Site
Starting a Development Server
Creating a Production Build
Serving the Production Build Locally
Conclusion
Chapter 2. Core Elements of Gatsby
The Gatsby CLI
Installing and Configuring the Gatsby CLI
gatsby new
gatsby develop
gatsby build
gatsby serve
Other Useful Gatsby CLI Commands
Starters
Official and Community Starters
Modifying Starters
Creating a New Project from a Starter
The gatsby-config.js File
Gatsby Pages and Components
Pages
Components
Linking Between Pages
The Layout Component
Using CSS in Gatsby
Global Styling
Modular Styling with CSS Modules
CSS-in-JS
Extending Gatsby with Plugins
Installing Gatsby Plugins
Loading Local Plugins
Conclusion
Chapter 3. Adding Features to Gatsby Sites
Pages and Routing in Gatsby
Rehydration
Static Pages
Hybrid Application Pages
Client-Only Routes
Differences Between Gatsby Sites and React Applications
Adding Forms
Basic Forms
Handling Form Submissions
Adding Localization and Internationalization
gatsby-plugin-i18n
react-intl
react-i18next
Adding an XML Sitemap
Adding a 404 Page
Adding Analytics
Conclusion
Part II. Data in Gatsby
Chapter 4. GraphQL and the Gatsby Data Layer
GraphQL Fundamentals
GraphQL Queries
GraphQL Fields
GraphQL Arguments
GraphQL Query Variables
GraphQL Directives
GraphQL Fragments
GraphQL Schemas and Types
The Gatsby Data Layer
GraphiQL
GraphiQL Explorer
GraphQL Playground
Page and Component Queries
Page Queries
Component Queries with StaticQuery
Component Queries with the useStaticQuery Hook
Conclusion
Chapter 5. Source Plugins and Sourcing Data
Using Source Plugins
Installing Source Plugins
Setting Up Source Plugins
Using Environment Variables with Source Plugins
Sourcing Data from the Filesystem
Setting Up gatsby-source-filesystem
Working with Files from the Filesystem
Working with Multiple Directories in the Filesystem
Sourcing Data from Database Systems
MongoDB
MySQL
PostgreSQL
Amazon Redshift, SQLite3, Oracle, and MSSQL
Sourcing Data from Third-Party SaaS Services
Airtable
AWS DynamoDB
Google Docs
Sourcing Data from CMSs and Commerce Systems
Contentful
Drupal
Netlify CMS
Prismic
Sanity
Shopify
WordPress
Sourcing Data from Other Sources
Sourcing Data from GraphQL APIs
Sourcing Data from JSON and YAML
Conclusion
Chapter 6. Programmatic Page Creation
Traversing GraphQL Data in Pages
Working with Transformer Plugins
Adding Transformer Plugins
Transforming Markdown into Data and HTML
Adding a List of Markdown Pages
Working with gatsby-node.js
Creating Slugs for Markdown Pages
Adding a Template
Adding Markdown Pages with createPages
Conclusion
Chapter 7. Assets in Gatsby
Working with Assets
Types of Assets in Gatsby
Importing Assets Directly with Webpack
Querying for Assets with gatsby-source-filesystem
Importing Assets with the static Folder
Working with Images
The gatsby-plugin-image Plugin (Gatsby 3.0)
The gatsby-image Component (Gatsby 2.0)
Working with Videos
Creating Custom Components for Hosted Videos
Querying Videos from Markdown Using GraphQL
Self-Hosting Your Own Videos
Working with Fonts
Adding Local Fonts
Adding Web Fonts
Conclusion
Chapter 8. Adding Data-Driven Features to Gatsby Sites
Adding Site Search
Implementing Site Search with Algolia
Configuring gatsby-plugin-algolia
Querying Pages with GraphQL for Indexing
Adding a Commenting System
Adding Taxonomy to Blog Posts
Adding Tags and Querying for All Tags
Adding a Tag Page Template
Programmatic Tag Page Creation with gatsby-node.js
Adding a Tag Index Page
Adding Pagination
Preparing for Pagination in Page Templates
Generating Paginated Pages with gatsby-node.js
Adding an RSS Feed
Adding an RSS Feed to a Markdown Blog
Adding an RSS Feed for Non-Markdown Content
Adding Authentication
Preparing for Authentication
Creating Client-Only Routes
Managing Private Routes
Providing Privileged Data to Routes
Conclusion
Part III. Extending Gatsby
Chapter 9. Gatsby Plugins and Starters
Creating Gatsby Starters
Gatsby Starter Requirements
Enabling Starter Configuration
Starter Performance and Accessibility
Licensing, Testing, and Releasing Starters
Creating Gatsby Plugins
Plugin Nomenclature
Initializing a New Plugin Project
Plugin Configuration with Options
Interacting with Gatsby Lifecycle APIs
Creating Source Plugins
Initializing Projects for Source Plugin Development
Installing the Source Plugin
Creating GraphQL Nodes
Querying and Sourcing Remote Data
Establishing Foreign Key Relationships
Using Plugin Options to Allow Customization
Creating Transformer Plugins
Reviewing an Example: gatsby-transformer-yaml
Ensuring Needed Data Is Sourced
Transforming Nodes
Establishing the Transformer Relationship
Creating New Nodes from Derived Data and Querying
Publishing and Maintaining Plugins
Submitting Plugins to the Gatsby Plugin Library
Maintaining Plugins
Conclusion
Chapter 10. Gatsby Themes
Gatsby Themes in Context
Differences from Plugins and Starters
Deciding Between Using and Creating a Theme
Using Gatsby Themes
Starting a New Site from a Theme
Using a Theme in an Existing Site
Using Multiple Gatsby Themes
Creating Gatsby Themes
Creating New Themes
Gatsby Theme Conventions
Converting Starters into Themes
Theme Shadowing
Theme Shadowing in gatsby-theme-blog
Shadowing Other Files
Extending Shadowed Files
Conclusion
Part IV. Production Gatsby
Chapter 11. Debugging and Testing Gatsby
Testing Gatsby
Unit Testing with Jest
Testing React Components
Visual Testing with Storybook
End-to-End Testing with Cypress
Debugging Gatsby
Debugging Static Builds
Debugging the Build Process
Debugging Server-Side Rendering Issues
Debugging Cache Issues
Debugging Asynchronous Lifecycle Methods
Conclusion
Chapter 12. Deploying Gatsby
Environment Variables
Defining Environment Variables
Using Environment Variables
Using Path and Asset Prefixes
Path Prefixes
Asset Prefixes
Deploying to Hosting Services
Netlify
Vercel
Gatsby Cloud
AWS Amplify
Azure
Amazon S3
Heroku
Firebase
GitHub Pages
Conclusion
Part V. Advanced Gatsby
Chapter 13. Advanced Topics in Gatsby
Creating Recipes
Infrastructure as Code
Automating Site Operations with Recipes
Adding Components to Markdown with MDX
Getting Started with MDX
Creating MDX Pages
Importing Components into MDX Files
Customizing Markdown Components
Schema Customization
Explicitly Defining Data Types
Implementing the createResolvers API
Creating Custom Interfaces and Unions
Custom Gatsby Configuration
Babel
Babel Plugin Macros
Webpack
Customizing html.js
ESLint
Proxying API Requests
Performance Optimization
Caching Gatsby Sites
Adding a Progressive Web App Manifest File
Adding Offline Support with Service Workers
Profiling with React Profiler
Performance Tracing for Gatsby Builds
Conditional Page Builds
Conclusion
Chapter 14. Gatsby Internals
APIs and Plugins in Gatsby
Loading Configured Plugins
The apiRunInstance Object
Executing Plugins and Injecting Arguments
The Gatsby Build Lifecycle
Node Creation
Schema Generation
Schema Inference
Schema Root Fields and Utility Types
Page Creation
Query Extraction and Execution
Writing Out Pages
Bundling Gatsby
Generating the JavaScript Bundle
The production-app.js file
Enabling Code Splitting and Prefetching
Conclusion
Appendix A. The Gatsby CLI
Gatsby Cheat Sheet
Common CLI Commands
Quick Start Commands
Helpful File Definitions
Top Documentation Pages
Gatsby CLI Commands
new
develop
build
serve
info
clean
plugin
repl
Appendix B. Gatsby Component APIs

Usage
Active Styles for
Working with Props in
navigate
gatsby-plugin-image
StaticImage
GatsbyImage
Image Options
Helper Functions
Appendix C. Gatsby Configuration APIs
Config APIs
siteMetadata
plugins
flags
pathPrefix
polyfill
mapping
proxy
developMiddleware
Node APIs
createPages
createPagesStatefully
createResolvers
createSchemaCustomization
onCreateBabelConfig
onCreateDevServer
onCreateNode
onCreatePage
onCreateWebpackConfig
onPostBootstrap
onPostBuild
onPreBootstrap
onPreBuild
onPreExtractQueries
onPreInit
pluginOptionsSchema
preprocessSource
resolvableExtensions
setFieldsOnGraphQLNodeType
sourceNodes
unstable_onPluginInit
unstable_shouldOnCreateNode
Index
About the Author
Colophon