Drupal 8 and Lando

Overview

Below are steps to setup a local Drupal 8 composer based environment using Lando.

Prerequisites

You need to have Lando installed using these instructions.

Steps

Create a local folder. <app> will be the name of your application folder and Lando instance.

mkdir <app>

Position your working directory as your new folder

cd <app>

Initialize Lando and answer a few questions. This utility creates a .lando.yml file in your working directory. When you start Lando in the next step, this file is used to define the Lando configuration.

lando init
Choose: current working directory
Choose: Drupal8
Enter for webroot: web
Enter for app: <app>

Start Lando

lando start

Install Drupal code using composer. Note – Drupal is being install in a Docker container, not on your local computer.

Drupal 8.8 and Later:

lando composer create-project drupal/recommended-project blah -n

Prior to Drupal 8.8:

lando composer create-project drupal-composer/drupal-project:8.x-dev blah -n

The above command uses composer to install Drupal and it’s dependencies into a folder called ‘blah’. Now, the files/folders in ‘blah’ will be move up one level into your directory and the ‘blah’ folder will be removed.

mv blah/* .
mv blah/.* .
rm -rf blah

Rebuild Lando containers.

lando rebuild -y

On a success rebuilt on Lando, it’s time to install Drupal 8. Goto the local URL for your Drupal 8 website.

https://<app>.lndo.site  

Follow the steps in the Drupal installation Wizard. When the database page appears, use ‘drupal8’ for the database name, username and password. Also, use ‘database’ for the host name (under the Advanced settings.

You should be up and running,

Updates

12/10/2019 – As of Drupal 8.8.0, Composer project templates are now available as part of Drupal core. The composer create-project command was updated to reflect this change.

Backstop JS and Lando

I’ve recently started using Backstop JS for visual regression testing. You can add the following settings to your Lando configuration, .lando.yml, to include Backstop JS.

services:
   node:
     type: node:10
     globals:
       backstopjs: "latest"
     command: npm start
     run_as_root:
       - apt-get -y update && apt-get -y install software-properties-common
       - wget https://dl-ssl.google.com/linux/linux_signing_key.pub && apt-key add linux_signing_key.pub
       - add-apt-repository "deb http://dl.google.com/linux/chrome/deb/ stable main"
       - apt-get -y update && apt-get -y install google-chrome-stable
 tooling:
   backstop:
     service: node

You will need to use the .internal URL from Lando to access the local website. For example:

  "scenarios": [
    {
      "label": "Homepage",
      "url": "http://appserver_nginx.your-site-name.internal"
    }

The backstop commands will be run through Lando tooling:

lando backstop reference
lando backstop test