Local Setup
Last updated
Was this helpful?
Last updated
Was this helpful?
This training workshop is most effective when following along with the exercises. In an effort to provide a seamless and bug free development environment, we have put together an automated environment which will build everything for you including a container-based development environment running on , latest Drupal core and required modules, as well as all the front-end tools needed to compile code and other automated tasks.
VERY IMPORTANT!
Your local environment should be setup prior to arriving for training.
Lando is a free, open source, cross-platform, local development environment tool built on Docker container technology.
This is only going to work if you have a fairly new computer. According to the you will need one of the following:
macOS 10.10+ (May need to install command line tools)
Windows 10 Pro+ (or equivalent) with Hyper-V running
Linux (with kernel version 4.x or higher)
10GB+ of available disk space
So far, we have tested only with macOS 10.13 (High Sierra) and 10.14 (Mojave).
As a precaution, shutdown your localhost if it is running. On Mac this can be done by running sudo apachectl stop.
(Select latest version)
At least on a Mac, this installs Lando along with Docker. Optionally, you can install Docker first: the Lando installer has not been updated with the latest version of Docker.
In your preferred terminal app, run the following command: git clone git@github.com:mariohernandez/component-based-development.git
If you experience issues with the command above, try this one: git clone https://github.com/mariohernandez/component-based-development.git
Run the following commands from the root level of the repository.
cd component-based-development This is the default directory generated by cloning the repo. If you changed the directory name when cloning the repo, cd into that directory and run the following commands from it.
lando start This will set up Lando plus pull down Drupal and required contrib modules. This process could take a few minutes to complete. After following these steps, you will see a list of URLs. Hold off to clicking any links for now.
lando drush si -y config_installer --account-name=admin --account-pass=admin --db-url='mysql://drupal8:drupal8@database/drupal8' This will do a basic installation of Drupal with some custom configuration.
cp -r assets/imgs/. web/sites/default/files/. This will copy our sample image assets to the default files directory for your local installation of Drupal.
lando db-import drupal8.export.gz This will import a custom database that includes content types, paragraph types, views and placeholder content for the demo site we'll use in the training exercises.
lando drush cr This will clear the Drupal caches.
cd web/themes/custom/nitflex_dev_theme
Run: lando npm install This will install the required front end tools (Node, Gulp, etc.) Note: You may see npm warnings about a missing "repository" or "license" field, as well as a message about vulnerabilities. For our purposes, all of these messages can be ignored, and you do not need to run any of the "audit" commands it suggests.
Move into the pattern-lab directory cd patternlab
Run: lando composer install This will install PatternLab
When prompted to update the config option twigAutoescape, reply with n.
When prompted that the path ./../dist/style-guide/ already exists, reply with M
When prompted to update the config option styleguideKitPath, reply with Y.
Run an initial build of the front end tools and PatternLab.
cd ../ Make sure you're at the root level of the theme,
then run lando npm run build && lando php patternlab/core/console --generate
Skip step #2
Change the command on step #5.2 to lando php patternlab/core/console --generate
You are done! 🙌 🔥 👊
Go to: and log in with username: admin, pw: admin.
To access PatternLab, which is where our components will be displayed, go to