Skip to main content

Emulsify, Drupal 8, and Lando

Submitted by Sean Robertson on Sun, 07/21/2019 - 12:37

This post builds on my previous post about Lando and PatternLab. This post assumes some familiarity with Lando, so you may wish to review the documentation first or reference back to it as you read through this example. This example is built around Emulsify, a PatternLab-based base theme from Four Kitchens. For information about the theme and creating your own custom theme from it, see the Emulsify Wiki on Github. To get this setup working well with Lando, I used the Pantheon recipe and then added an extra PHP service with node added to handle the PatternLab style guide. Here's our complete .lando.yml (with site name and the theme name in my case both being webolutionary - replace with your own):

  1. name: webolutionary
  2. recipe: pantheon
  3. config:
  4.   framework: drupal8
  5.   site: webolutionary
  6.   # Replace with your Pantheon site ID or omit.
  7.   id: [pantheon-site-id]
  8.   drupal: true
  9. services:
  10.   appserver:
  11.     build:
  12.       - "rm -rf ~/.terminus/plugins"
  13.       - "mkdir -p ~/.terminus/plugins"
  14.       - "cp -rf /app/terminus.config.yml ~/.terminus/config.yml"
  15.       - "terminus auth:login"
  16.       - "composer create-project -d ~/.terminus/plugins pantheon-systems/terminus-build-tools-plugin:~1"
  17.       - "composer create-project --no-dev -d ~/.terminus/plugins pantheon-systems/terminus-drupal-console-plugin:~1"
  18.       - "terminus self:clear-cache"
  19.       - "cd /app && composer install"
  20.   patterns:
  21.     type: php:7.1
  22.     via: cli
  23.     build_as_root:
  24.       - "apt-get update && apt-get -y install \
  25.          libatk-bridge2.0-0 \
  26.          libasound2 \
  27.          libgtk-3.0 \
  28.          libnss3 \
  29.          libx11-6 \
  30.          libx11-xcb1 \
  31.          libxss1 \
  32.          libxtst6"
  33.       - "curl -sL | bash - && apt-get install -y nodejs"
  34.       - "nodejs -v"
  35.       - "cd /app/web/themes/custom/webolutionary && npm install"
  36.     overrides:
  37.       ports:
  38.         - 3000:3000
  39. proxies:
  40.   patterns:
  41.     -
  42. tooling:
  43.   drush:
  44.     service: appserver
  45.     cmd: "drush --root=/app/web --uri="
  46.   watch:
  47.     service: patterns
  48.     cmd: "npm start --prefix=/app/web/themes/custom/webolutionary"

Now, let's break that down. This first part, of course, is the standard Pantheon recipe. This alone would be enough to get a site up and running locally without any additional Lando tweaks:

  1. name: webolutionary
  2. recipe: pantheon
  3. config:
  4.   framework: drupal8
  5.   site: webolutionary
  6.   # Replace with your Pantheon site ID or omit.
  7.   id: [pantheon-site-id]
  8.   drupal: true

This block customizes the existing default appserver service. This is the service that actually runs your application (in this case Drupal, but could also be WordPress). All we're doing here is adding Terminus stuff and then running composer install using the composer.json in our application root:

  1. services:
  2.   appserver:
  3.     build:
  4.       - "rm -rf ~/.terminus/plugins"
  5.       - "mkdir -p ~/.terminus/plugins"
  6.       - "cp -rf /app/terminus.config.yml ~/.terminus/config.yml"
  7.       - "terminus auth:login"
  8.       - "composer create-project -d ~/.terminus/plugins pantheon-systems/terminus-build-tools-plugin:~1"
  9.       - "composer create-project --no-dev -d ~/.terminus/plugins pantheon-systems/terminus-drupal-console-plugin:~1"
  10.       - "terminus self:clear-cache"
  11.       - "cd /app && composer install"

Now, we add a new service called patterns. This is the service that will actually build and run our PatternLab stuff. In our case, we're setting this up as a PHP CLI service and adding node to that. The reason for that is that Emulsify uses the Standard Edition of Pattern Lab for Twig which needs PHP to compile the Twig templates. On a previous project, I had done this the other way around, adding PHP to a custom node service, but it turns out that was far more complicated and required tons more libraries to get running. Here, we're using the build_as_root step to add the libraries required to install Node (as well as some extras required for the Chromium build used by PatternLab), followed by the node install itself. Note that build_as_root will only run with a lando rebuild.

  1.   patterns:
  2.     type: php:7.1
  3.     via: cli
  4.     build_as_root:
  5.       - "apt-get update && apt-get -y install \
  6.          libatk-bridge2.0-0 \
  7.          libasound2 \
  8.          libgtk-3.0 \
  9.          libnss3 \
  10.          libx11-6 \
  11.          libx11-xcb1 \
  12.          libxss1 \
  13.          libxtst6"
  14.       - "curl -sL | bash - && apt-get install -y nodejs"
  15.       - "nodejs -v"
  16.       - "cd /app/web/themes/custom/webolutionary && npm install"

Here we add an override to the patterns service to open up the port that PatternLab will use for BrowserSync, along with a proxy to give it a nice domain:

  1.     overrides:
  2.       ports:
  3.         - 3000:3000
  4. proxies:
  5.   patterns:
  6.     -

Finally, we add some custom tooling so we can run lando drush ... and lando watch and have them execute the commands in the correct places on the correct service.

  1. tooling:
  2.   drush:
  3.     service: appserver
  4.     cmd: "drush --root=/app/web --uri="
  5.   watch:
  6.     service: patterns
  7.     cmd: "npm start --prefix=/app/web/themes/custom/webolutionary"

Hopefully, the above will help show a bit of how Lando works and some of the kinds of custom things you can do to make local development easier.