book

Gatsby: The Definitive Guide

Name: Gatsby: The Definitive Guide
Author: Preston So
ISBN: 9781492087519

by Preston So

September 2021

Intermediate to advanced

539 pages

12h 41m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Foreword
Preface
Who Should Read This BookWhy I Wrote This BookNavigating This BookConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
I. Elementary Gatsby
1. Gatsby Fundamentals
What Is Gatsby?Gatsby Pages and ComponentsGatsby’s Data Layer: GraphQL and Source PluginsThe Gatsby EcosystemWhy Gatsby?PerformanceAccessibilityDeveloper ExperienceSecurityGatsby and the JamstackStatic Site GeneratorsDistributed Content and CommerceThe JamstackJavaScript in GatsbyCommand-Line InterfacesModular JavaScriptReact in GatsbyDeclarative Rendering with JSXReact ComponentsReact PropsGetting Going with GatsbyThe Command LineInstalling the Gatsby CLICreating Your First Gatsby SiteStarting a Development ServerCreating a Production BuildServing the Production Build LocallyConclusion
2. Core Elements of Gatsby
The Gatsby CLIInstalling and Configuring the Gatsby CLIgatsby newgatsby developgatsby buildgatsby serveOther Useful Gatsby CLI CommandsStartersOfficial and Community StartersModifying StartersCreating a New Project from a StarterThe gatsby-config.js FileGatsby Pages and ComponentsPagesComponentsLinking Between PagesThe Layout ComponentUsing CSS in GatsbyGlobal StylingModular Styling with CSS ModulesCSS-in-JSExtending Gatsby with PluginsInstalling Gatsby PluginsLoading Local PluginsConclusion
3. Adding Features to Gatsby Sites
Pages and Routing in GatsbyRehydrationStatic PagesHybrid Application PagesClient-Only RoutesDifferences Between Gatsby Sites and React ApplicationsAdding FormsBasic FormsHandling Form SubmissionsAdding Localization and Internationalizationgatsby-plugin-i18nreact-intlreact-i18nextAdding an XML SitemapAdding a 404 PageAdding AnalyticsConclusion
II. Data in Gatsby
4. GraphQL and the Gatsby Data Layer
GraphQL FundamentalsGraphQL QueriesGraphQL FieldsGraphQL ArgumentsGraphQL Query VariablesGraphQL DirectivesGraphQL FragmentsGraphQL Schemas and TypesThe Gatsby Data LayerGraphiQLGraphiQL ExplorerGraphQL PlaygroundPage and Component QueriesPage QueriesComponent Queries with StaticQueryComponent Queries with the useStaticQuery HookConclusion
5. Source Plugins and Sourcing Data
Using Source PluginsInstalling Source PluginsSetting Up Source PluginsUsing Environment Variables with Source PluginsSourcing Data from the FilesystemSetting Up gatsby-source-filesystemWorking with Files from the FilesystemWorking with Multiple Directories in the FilesystemSourcing Data from Database SystemsMongoDBMySQLPostgreSQLAmazon Redshift, SQLite3, Oracle, and MSSQLSourcing Data from Third-Party SaaS ServicesAirtableAWS DynamoDBGoogle DocsSourcing Data from CMSs and Commerce SystemsContentfulDrupalNetlify CMSPrismicSanityShopifyWordPressSourcing Data from Other SourcesSourcing Data from GraphQL APIsSourcing Data from JSON and YAMLConclusion
6. Programmatic Page Creation
Traversing GraphQL Data in PagesWorking with Transformer PluginsAdding Transformer PluginsTransforming Markdown into Data and HTMLAdding a List of Markdown PagesWorking with gatsby-node.jsCreating Slugs for Markdown PagesAdding a TemplateAdding Markdown Pages with createPagesConclusion

7. Assets in Gatsby
Working with AssetsTypes of Assets in GatsbyImporting Assets Directly with WebpackQuerying for Assets with gatsby-source-filesystemImporting Assets with the static FolderWorking with ImagesThe gatsby-plugin-image Plugin (Gatsby 3.0)The gatsby-image Component (Gatsby 2.0)Working with VideosCreating Custom Components for Hosted VideosQuerying Videos from Markdown Using GraphQLSelf-Hosting Your Own VideosWorking with FontsAdding Local FontsAdding Web FontsConclusion
8. Adding Data-Driven Features to Gatsby Sites
Adding Site SearchImplementing Site Search with AlgoliaConfiguring gatsby-plugin-algoliaQuerying Pages with GraphQL for IndexingAdding a Commenting SystemAdding Taxonomy to Blog PostsAdding Tags and Querying for All TagsAdding a Tag Page TemplateProgrammatic Tag Page Creation with gatsby-node.jsAdding a Tag Index PageAdding PaginationPreparing for Pagination in Page TemplatesGenerating Paginated Pages with gatsby-node.jsAdding an RSS FeedAdding an RSS Feed to a Markdown BlogAdding an RSS Feed for Non-Markdown ContentAdding AuthenticationPreparing for AuthenticationCreating Client-Only RoutesManaging Private RoutesProviding Privileged Data to RoutesConclusion
III. Extending Gatsby
9. Gatsby Plugins and Starters
Creating Gatsby StartersGatsby Starter RequirementsEnabling Starter ConfigurationStarter Performance and AccessibilityLicensing, Testing, and Releasing StartersCreating Gatsby PluginsPlugin NomenclatureInitializing a New Plugin ProjectPlugin Configuration with OptionsInteracting with Gatsby Lifecycle APIsCreating Source PluginsInitializing Projects for Source Plugin DevelopmentInstalling the Source PluginCreating GraphQL NodesQuerying and Sourcing Remote DataEstablishing Foreign Key RelationshipsUsing Plugin Options to Allow CustomizationCreating Transformer PluginsReviewing an Example: gatsby-transformer-yamlEnsuring Needed Data Is SourcedTransforming NodesEstablishing the Transformer RelationshipCreating New Nodes from Derived Data and QueryingPublishing and Maintaining PluginsSubmitting Plugins to the Gatsby Plugin LibraryMaintaining PluginsConclusion
10. Gatsby Themes
Gatsby Themes in ContextDifferences from Plugins and StartersDeciding Between Using and Creating a ThemeUsing Gatsby ThemesStarting a New Site from a ThemeUsing a Theme in an Existing SiteUsing Multiple Gatsby ThemesCreating Gatsby ThemesCreating New ThemesGatsby Theme ConventionsConverting Starters into ThemesTheme ShadowingTheme Shadowing in gatsby-theme-blogShadowing Other FilesExtending Shadowed FilesConclusion
IV. Production Gatsby
11. Debugging and Testing Gatsby
Testing GatsbyUnit Testing with JestTesting React ComponentsVisual Testing with StorybookEnd-to-End Testing with CypressDebugging GatsbyDebugging Static BuildsDebugging the Build ProcessDebugging Server-Side Rendering IssuesDebugging Cache IssuesDebugging Asynchronous Lifecycle MethodsConclusion
12. Deploying Gatsby
Environment VariablesDefining Environment VariablesUsing Environment VariablesUsing Path and Asset PrefixesPath PrefixesAsset PrefixesDeploying to Hosting ServicesNetlifyVercelGatsby CloudAWS AmplifyAzureAmazon S3HerokuFirebaseGitHub PagesConclusion
V. Advanced Gatsby
13. Advanced Topics in Gatsby
Creating RecipesInfrastructure as CodeAutomating Site Operations with RecipesAdding Components to Markdown with MDXGetting Started with MDXCreating MDX PagesImporting Components into MDX FilesCustomizing Markdown ComponentsSchema CustomizationExplicitly Defining Data TypesImplementing the createResolvers APICreating Custom Interfaces and UnionsCustom Gatsby ConfigurationBabelBabel Plugin MacrosWebpackCustomizing html.jsESLintProxying API RequestsPerformance OptimizationCaching Gatsby SitesAdding a Progressive Web App Manifest FileAdding Offline Support with Service WorkersProfiling with React ProfilerPerformance Tracing for Gatsby BuildsConditional Page BuildsConclusion
14. Gatsby Internals
APIs and Plugins in GatsbyLoading Configured PluginsThe apiRunInstance ObjectExecuting Plugins and Injecting ArgumentsThe Gatsby Build LifecycleNode CreationSchema GenerationSchema InferenceSchema Root Fields and Utility TypesPage CreationQuery Extraction and ExecutionWriting Out PagesBundling GatsbyGenerating the JavaScript BundleThe production-app.js fileEnabling Code Splitting and PrefetchingConclusion
A. The Gatsby CLI
Gatsby Cheat SheetCommon CLI CommandsQuick Start CommandsHelpful File DefinitionsTop Documentation PagesGatsby CLI Commandsnewdevelopbuildserveinfocleanpluginrepl
B. Gatsby Component APIs
<Link /><Link /> UsageActive Styles for <Link />Working with Props in <Link />navigategatsby-plugin-imageStaticImageGatsbyImageImage OptionsHelper Functions
C. Gatsby Configuration APIs
Config APIssiteMetadatapluginsflagspathPrefixpolyfillmappingproxydevelopMiddlewareNode APIscreatePagescreatePagesStatefullycreateResolverscreateSchemaCustomizationonCreateBabelConfigonCreateDevServeronCreateNodeonCreatePageonCreateWebpackConfigonPostBootstraponPostBuildonPreBootstraponPreBuildonPreExtractQueriesonPreInitpluginOptionsSchemapreprocessSourceresolvableExtensionssetFieldsOnGraphQLNodeTypesourceNodesunstable_onPluginInitunstable_shouldOnCreateNode
Index

Overview

Get the definitive guide on Gatsby, the JavaScript framework for building blazing fast websites and applications. Used by Nike, Costa Coffee, and other companies worldwide, Gatsby is emerging as one of the key technologies in the Jamstack (JavaScript, APIs, and markup) ecosystem. With this comprehensive guide, you'll learn how to architect, build, and deploy Gatsby sites independently or with CMSs, commerce systems, and other data sources.

Author Preston So begins by showing you how to set up a Gatsby site from scratch. From there, you'll learn ways to use Gatsby's declarative rendering and GraphQL API, build complex offline-enabled sites, and continuously deploy Gatsby sites on a variety of platforms, including Gatsby Cloud.

Discover how Gatsby integrates with many data sources and plug-ins
Set up, configure, and architect Gatsby sites using Gatsby's CLI, React, JSX, and GraphQL with high performance out of the box
Build an independent Gatsby site based on Markdown and data- and content-driven Gatsby sites that integrate with CMSs and commerce platforms
Deploy Gatsby sites with full CI/CD and test coverage on a variety of platforms, including Netlify, Vercel, and Gatsby Cloud

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Foundation Gatsby Projects: Create Four Real Production Websites with Gatsby

Publisher Resources

ISBN: 9781492087502Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills