Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Lando with Emulsify

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.

@thamas

This comment has been minimized.

Copy link

@thamas thamas commented Feb 26, 2018

Thanks for this summary, Jim!

@brooke-heaton

This comment has been minimized.

Copy link

@brooke-heaton brooke-heaton commented Mar 21, 2018

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

@startinggravity

This comment has been minimized.

Copy link
Owner Author

@startinggravity startinggravity commented Mar 21, 2018

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.

@amyh

This comment has been minimized.

Copy link

@amyh amyh commented Oct 29, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment