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 Lando, latest Drupal core and required modules, as well as all the front-end tools needed to compile code and other automated tasks.
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 Lando documentation 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.
Install Lando and Docker (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 email@example.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.
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
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,
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
Go to: http://nitflex.lndo.site/user and log in with username:
To access PatternLab, which is where our components will be displayed, go to http://nitflex.lndo.site/themes/custom/nitflex_dev_theme/dist/style-guide/
You are done! 🙌 🔥 👊