Gatsby + Drupal (in Lando)

This post will document how to get Gatsby to talk to Drupal when Drupal is running in Lando.

For whatever reason, trying to get Gatsby to access Drupal in a Lando container doesn't work. I'm not sure if it's localhost or localhost:PORT that Gatsby has trouble with, but we can work around that limitation by using ngrok. ngrok lets us access localhost URLs from a public URL. I installed it on my Mac using Homebrew (cask), but you can visit the downloads page for other methods of installation. You'll also have to register on the ngrok website, but their free account will work just fine.

Once you have ngrok installed, set up Lando as usual. In my particular instance, I used the pantheon recipe, but any recipe should work.

Start up your Lando app (lando start). Once it has successfully started, Lando will provide you with a handful of URLs you can use to access Drupal within Lando. I've found the best results when using the non https localhost:PORT URL. As a side note, this port changes every time your Lando app is restarted.

Open up a terminal, and type in

ngrok http http://localhost:PORT

where PORT equals your Lando app's port as noted above.

Once ngrok has started, you'll get a few more URLs, but the one you want is labeled "Forwarding" and starts with http://.

If using gatsby-source-drupal, put this URL in the baseUrl option in gatsby-config.js (or use a .env.development file):

...
plugins: [
  {
    resolve: `gatsby-source-drupal`,
    options: {
      baseUrl: `http://xxxxxxxxxxxx.ngrok.io`,
      apiBase: `jsonapi`,
    },
  },
]
...

You can now start Gatsby (npm run develop).

One little tip: in your Gatsby package.json, add this to your scripts section:

"scripts": {
  "refresh": "curl -X POST http://localhost:8000/__refresh",
}

You will need to create a .env.development file at the root of your Gatsby project if you don't already have one, and add the following:

ENABLE_GATSBY_REFRESH_ENDPOINT=true

This will allow you to grab new content from Drupal without having to stop and restart Gatsby:

npm run refresh