Drupal+Gatsby Quick Start with Lando

Benji Fisher

March 5, 2019

What is Gatsby?

Gatsby (https://www.gatsbyjs.org/) is a “static” site generator.

It creates a high-performance React app based on sources:

  • Files: HTML, Markdown, JSON, …
  • Anything it can query with GraphQL
  • Drupal, WordPress, …

How Drupal works with Gatsby

  1. Add the JSON:API module to Drupal.
  2. Add the Drupal source plugin to Gatsby.
  3. Profit.

Umami home page

Drupal home page (Umami demo install)
Drupal home page (Umami demo install)

JSON:API

Drupal with JSON:API module
Drupal with JSON:API module

I have a browser plugin that prettifies the JSON.

GraphQL queries

GraphQL queries from Gatsby develop
GraphQL queries from Gatsby develop

Gatsby home page

Gatsby default starter page
Gatsby default starter page

Gatsby blog list

Bare blog list in Gatsby
Bare blog list in Gatsby

Gatsby blog page

Bare blog post in Gatsby
Bare blog post in Gatsby

Lando configuration

What’s new?

  • 2018-09-17: Gatsby 2.0.0
  • 2019-01-07: JSON:API module for Drupal 8.x-2.0
  • 2019-01-11: gatsby-source-drupal@3.0.18
  • 2019-02-01: Lando v3.0.0-rc.2

All of these projects have more recent releases.

The above versions are the minimal requirements to get this all to work together.

Do try this at home!

Check out my repository on GitLab:

File a bug report or help with one of the existing issues!

Copyleft

Creative Commons License
This slide deck by Benji Fisher is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at https://gitlab.com/benjifisher/slide-decks.