Drupal+Gatsby Quick Start with Lando

Benji Fisher // May 2019

Gatsby (https://www.gatsbyjs.org/) is a static site generator. It creates a high-performance, static site based on sources:

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

Gatsby is rapidly being adopted in the Drupal community, and more widely.

I am not at all an expert with Gatsby, but I thought it would be fun to set up a local development environment running both Drupal and Gatsby, with Gatsby pulling in data from the Drupal site.

I did this using Lando, which I have written about before. I am pretty close to my goal, which is to get Drupal and Gatsby running together with a single command: lando start.

Do try this at home!

Check out my repository on GitLab:

If you already have Lando installed, then all you have to do is

  1. Download the repository: git clone https://gitlab.com/benjifisher/lando-gatsby-drupal.git
  2. Change to the new directory: cd lando-gatsby-drupal
  3. Start Docker (on Mac or Windows).
  4. Start Lando: lando start

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

Umami home page

In a few minutes you should have Drupal and Gatsby running together. Here is what the Drupal home page (using the Umami demo) looks like, at https://drupal.lgd.lndo.site/:

How Drupal works with Gatsby

There are a few ways to get Drupal to work with Gatsby. One way is to expose a JSON endpoint with all the information that Gatsby needs. With the release of Drupal 8.7.0, we can do this just by enabling the JSON:API module. Until that release, the JSON:API was available as a contrib module.

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

JSON:API

Here is what the JSON endpoint looks like, at https://drupal.lgd.lndo.site/jsonapi. I have a browser plugin that prettifies the JSON.

Gatsby home page

The home page of the standard Gatsby starter (nothing to do with Drupal) is at https://gatsbydrupal.lgd.lndo.site/:

Gatsby blog list

It is not much to look at, since there is no styling yet, but you can see that Gatsby is getting all the Articles from the Drupal site and listing them at http://gatsbydrupal.lgd.lndo.site/blog/:

Gatsby blog page

Follow a link, and you will see a similarly un-styled blog page, for example http://gatsbydrupal.lgd.lndo.site/blog/let-s-hear-it-for-carrots/:

GraphQL queries

You can also run Gatsby in “develop” mode: see the GitLab repo for instructions. Once you do that, you can explore the JSON feed the same way Gatsby does, using the GraphQL explorer at https://gatsby.lgd.lndo.site/___graphql:

Drupal and Gatsby configuration

The Drupal and Gatsby configuration are pretty standard. The drupal/ subdirectory has an installation based on the Composer template for Drupal projects.

The gatsby/ subdirectory has some code based on Ryan Bateman’s blog post.

Lando configuration

The fun part of this project is the way it configures Lando to run both sites. There are a couple of nginx configuration files, but the interesting part is the file .lando.yml:

name: lando-gatsby-drupal

recipe: drupal8
config:
  via: nginx
  webroot: drupal/web
  php: 7.2
  database: mariadb

proxy:
  nodejs:
    - gatsby.lgd.lndo.site:8000
  appserver_nginx:
    - drupal.lgd.lndo.site
    - gatsbydrupal.lgd.lndo.site

services:
  appserver:
    build:
      - cd drupal && composer install
    run:
      - echo "Install Drupal with drush."
      - cd drupal/web && drush --yes site:install demo_umami --db-url=mysql://drupal8:drupal8@database:3306/drupal8 --account-pass=admin --site-name='Drupal-Gatsby'
      - cd drupal/web && drush --yes pm:enable jsonapi
      - cd drupal/web && drush --yes pm:uninstall contact
  nodejs:
    type: node
    ssl: true
    globals:
      gatsby-cli: "2.5.12"
      yarn: "1.15.2"
    run:
      - echo "Installing Gatsby with yarn."
      - cd gatsby && yarn install
  appserver_nginx:
    type: nginx
    build_as_root:
      - cp /app/conf/nginx/drupal.lgd.lndo.site.conf /opt/bitnami/nginx/conf/vhosts/.
      - cp /app/conf/nginx/gatsbydrupal.lgd.lndo.site.conf /opt/bitnami/nginx/conf/vhosts/.

events:
  post-start:
    - nodejs: echo "Building the Gatsby site from Drupal."
    - nodejs: cd gatsby && gatsby build
    - nodejs: rm -rf gatsbydrupal/* && cp -R gatsby/public/* gatsbydrupal

tooling:
  npm:
    service: nodejs
  node:
    service: nodejs
  gatsby:
    service: nodejs
  yarn:
    service: nodejs

What's new?

Here are the minimal requirements to get this all to work together:

  • 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.

As I said before, the JSON:API module is now part of Drupal core, so consider 2019-05-01 (the release of Drupal 8.7.0) as part of that timeline.