Drupal+Gatsby Quick Start with Lando
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:
cd lando-gatsby-drupal - Start Docker (on Mac or Windows).
- 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.
- Enable the JSON:API module in Drupal.
- Add the Drupal source plugin to Gatsby.
- 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.