Skip to main content

Lando setup with Drupal 8 and front-end tooling

Submitted by Sean Robertson on Tue, 05/15/2018 - 03:00

This post builds on my previous introduction to Lando. Lando is a local devops tool that was created to solve a common set of problems, specifically the need to create a local development environment that functions similarly to a production environment on anyone's computer without relying on a lot of external dependencies. It's entirely self-contained and includes a lot of scripting that automates common Docker setups. Even more, it has close integration with Pantheon and is configured with a very easy to read YAML file. It is highly recommended that you read the previous post before this one.

This post picks up where the last one left off. Now we'll take a Lando instance generated from a Pantheon site and add some additional tooling to it, to handle both front-end and back-end tools.  Here is our new .lando.yml file, with some stuff added beyond the default Pantheon recipe. I'm using "example" as the site/theme name throughout - you'd replace this with yours.

  1. name: example
  2. recipe: pantheon
  3. config:
  4.   framework: drupal8
  5.   site: example
  6.   # Replace with your Pantheon site ID or omit.
  7.   id: [pantheon-site-id]
  8.   drupal: true
  9. services:
  10.   appserver:
  11.     build:
  12.       # See https://pantheon.io/docs/terminus/configuration/ - it is recommended
  13.       # to have an example.terminus.config.yml in the repo that developers would
  14.       # copy to a gitignored terminus.config.yml and enter their machine-token.
  15.       - "cp -rf /app/terminus.config.yml $HOME/.terminus/config.yml"
  16.       - "terminus auth:login"
  17.       - "rm -rf $HOME/.terminus/plugins"
  18.       - "mkdir -p $HOME/.terminus/plugins"
  19.       - "composer create-project -d $HOME/.terminus/plugins pantheon-systems/terminus-build-tools-plugin:~1"
  20.       - "composer create-project --no-dev -d $HOME/.terminus/plugins pantheon-systems/terminus-drupal-console-plugin:~1"
  21.       - "terminus self:clear-cache"
  22.       # This step will build the app using your composer.json
  23.       - "cd /app && composer install"
  24.   node:
  25.     type: 'node:8.4'
  26.     globals:
  27.       gulp-cli: "latest"
  28.     extras:
  29.       - "apt-get update -y"
  30.       # This will install items necessary for Composer on the node service which
  31.       # is required to install the PatternLab Drupal integration - this list
  32.       # could possibly be reduced.
  33.       - "apt-get install -y \
  34.          curl \
  35.          php5-cli \
  36.          git \
  37.          unzip \
  38.          gconf-service \
  39.          libasound2 \
  40.          libatk1.0-0 \
  41.          libcups2 \
  42.          libdbus-1-3 \
  43.          libgconf-2-4 \
  44.          libgtk-3-0 \
  45.          libnspr4 \
  46.          libx11-xcb1 \
  47.          libxcomposite1 \
  48.          libxcursor1 \
  49.          libxdamage1 \
  50.          libxfixes3 \
  51.          libxi6 \
  52.          libxrandr2 \
  53.          libxss1 \
  54.          libxtst6 \
  55.          libappindicator1 \
  56.          libnss3 \
  57.          lsb-release"
  58.       - "curl -sS https://getcomposer.org/installer -o composer-setup.php"
  59.       - "php composer-setup.php --install-dir=/usr/local/bin --filename=composer"
  60.       - "rm -f composer-setup.php"
  61.     build:
  62.       # This section references a custom theme with the same name as the site.
  63.       # Remove directories to prevent prompts from halting npm build steps.
  64.       - "rm -rf /app/web/themes/custom/example/pattern-lab /app/web/themes/custom/example/node_modules"
  65.       # Installs npm packages and PatternLab
  66.       - "cd /app/web/themes/custom/example && npm install -y"
  67.       - "cd /app/web/themes/custom/example && npm run install-pattern-lab"
  68.       - "cd /app/web/themes/custom/example && npm run sass"
  69.     overrides:
  70.       services:
  71.         ports:
  72.           # Adjust as needed, using ports in the 80** range.
  73.           - 8088:8088
  74. proxy:
  75.   node:
  76.     # Needs to be the same port as above.
  77.     - patterns.example.lndo.site:8088
  78. tooling:
  79.   node:
  80.     service: node
  81.   npm:
  82.     service: node
  83.   # This sets up `lando run [script]` to run `npm run [script]` inside the node
  84.   # service with the correct path prefix.
  85.   run:
  86.     service: node
  87.     user: root
  88.     cmd:
  89.       - "npm"
  90.       - "run"
  91.       - "--prefix=/app/web/themes/custom/example"
  92.   # This sets up `lando drush [command]` to run within the appserver service on
  93.   # the correct path and Drupal URI.
  94.   drush:
  95.     service: appserver
  96.     cmd:
  97.       - "drush"
  98.       - "--root=/app/web"
  99.       - "--uri=https://example.lndo.site"

Note that we've added some stuff to the services array (appserver adds some build commands to the existing appserver provided by the pantheon recipe, and node adds a new service for front-end tools) and a section for tooling. I tried to comment everything inline so you can see what's going on.

The build task under the appserver service adds some useful Pantheon specific stuff related to their terminus CLI tool and then runs [bash]composer install[/bash] as the final step to grab any new packages that have been added (this latter can be run via [bash]lando composer install[/bash] but we include it here to save effort in some cases.

The extras section on the node service installs php-cli and related packages and then installs composer. Composer is required to build the assets for our theme. The theme I created in this example is a renamed clone of the Shila Drupal Theme which includes integration with PatternLab.