Using Lando with Emulsify

lando-emulsify.md

I have had a few requests for more information about using Lando with Drupal 8, the Emulsify theme and Gulp. In order to put what I've learned in one place, I'm adding my notes here.

My initial problem was reported here, but since then I have discovered a few additional things worth noting.

Once you have a working site on Lando and are ready to install Emulsify use the following directions instead of what has provided by the Emulsify developers. These instructions assume you have used Composer to install Drupal and that the root Drupal files are in the /web directory.

---

NOTE: To follow these instructions, you will need to run NPM commands from your host machine, which means you must have Node and NPM installed. Fortunately, they are installed together in one installation. If you wish to confirm you have them installed, run node -v and npm -v. To install, visit nodejs.org and follow the instructions.

---

Install Emulsify.

• From inside the /web/themes/custom/ directory, install the files using Lando's Composer command.
• lando composer require fourkitchens/emulsify

Enable Emulsify and its dependencies with Lando's Drush command.

• lando drush en emulsify components unified_twig_ext -y

Create a custom clone of Emulsify.

• lando drush emulsify "YOUR THEME"
• This will place your new theme in the web/themes/custom/ directory.

Go to your custom theme's directory.

• cd [your-theme]

Add a new file local.gulp-config.js file.

• The easiest way is to make a copy of web/themes/custom/YOUR-THEME/node_modules/emulsify-gulp/gulp-config.js and place it in the root of your theme.
• Alter this file as needed. For now, you only need to alter the Browsersync section to get it to work in Lando.

browserSync: {
  enabled: true,
  baseDir: './',
  startPath: '',
  // Uncomment below if using a specific local url
  domain: ‘YOUR-SITE.lndo.site',
  notify: true,  // optional
  openBrowserAtStart: true, // optional
  reloadOnRestart: true,
  ui: false,
  proxy : 'YOUR-SITE.lndo.site:8000',
  browserSyncPort : 3003,
  reloadDelay: 2000,
},

Now run npm install from the command line.

• This will break near the end, which is expected.
• Notice that unlike other Lando commands, you should not run as lando npm install.

Edit the file scripts/pattern_lab.sh, changing line 8 to:

• lando composer create-project drupal-pattern-lab/edition-twig-standard pattern-lab
• This change removes the flag for a non-interactive clone, which may get in your way when trying to make a clone. You will probably need to provide your Github credentials to continue with the clone.

Run from the command line in your theme:

• .scripts/pattern_lab.sh && ./scripts/twig_functions.sh

Enable your new theme and disable Emulsify.

• lando drush en [your-theme] -y
• lando drush pm-uninstall emulsify -y

Run from the command line in your theme:

• npm start
• When the Gulp command finishes running and you have set openBrowserAtStart: true in your local Gulp config file, you should see a new browser tab open with your site loaded in it.

Whenever you need to run npm or gulp commands, don’t use lando gulp or lando npm, just gulp or npm.

Until it is resolved, a bug in Lando may give you trouble when viewing Pattern Lab pages.

• See Non-Drupal directories containing index.html file don't display unless file name is in URL #556

Jim - are you by chance using the component libraries module with PatternLab? I've had a hard time getting this to work within lando. I'm not sure if Drupal is able to communicate with the PatternLab public directory of if I may be doing something wrong. See lando/lando#799

Component module is a requirement because without it, Drupal will expect all Twig files to live in the /templates directory. To my knowledge and experience, there shouldn't be any problem within a Lando installation.

In the second step, Emulsify needs to be enabled separately using lando drush then emulsify -y (enabling a theme). Then use lando drush en components unified_twig_ext -y to enable those two modules.