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:
Do try this at home!
Check out my repository on GitLab:
If you already have Lando installed, then all you have to do is
- Download the repository:
git clone https://gitlab.com/benjifisher/lando-gatsby-drupal.git
- Change to the new directory:
- Start Docker (on Mac or Windows).
- Start Lando:
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.
- Enable the JSON:API module in Drupal.
- Add the Drupal source plugin to Gatsby.
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/:
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:
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
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
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-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.