Welcome Component Based Development
A training workshop by Mediacurrent.
This repo includes everything you need to set up a Lando-based local Drupal development environment, along with the required front end tools (Node, Pattern Lab, Gulp, etc.). For best results, follow these steps to get your environment setup.
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)
So far, we have tested only with macOS 10.13 (High Sierra) and 10.14 (Mojave).
1. Install Lando and Docker
Watch the Step-by-step video tutorial to setup your local dev environment. If you want to do it on your own, follow the steps below.
- Install Lando and Docker (Select latest version)
Docker is required
Docker makes it possible to build containers for any of the third party integrations required in your environment. If you already have Docker installed you don't need to install it again as part of Lando's installation.
NOTE: If you are using macOS, you may need to install XCode's Command Line Tools.
2. Clone this repo anywhere in you local system
You can clone or download the repo anywhere in your computer (i.e. Sites, Downloads, Documents, Desktop, etc.).
In your preferred terminal app, run the following command:
git clone firstname.lastname@example.org: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
3. Build the environment:
In your command line type/run
NOTE: This is the default directory generated by cloning the repo. If you changed the directory name when cloning the repo, cd into that directory instead.
WINDOWS USERS: Use Power Shell to run all commands.
This will set up Lando plus pull down Drupal and required contrib modules. This process could take a few minutes to complete, please do not interrupt it. At the end you will see a list of URLs, hold off on clicking any links for now as this will simply take you to a Drupal install page. We will install drupal in the next step.
lando drush si -y config_installer --account-name=admin --account-pass=admin --db-url='mysql://drupal8:drupal8@database/drupal8'
Be sure to run the entire string above as a single command. This will do a basic installation of Drupal with some basic configuration.
cp -r assets/imgs/* web/sites/default/files/
This will copy our sample image assets to Drupal's default files directory.
lando db-import drupal8.export.gz
This will import a custom database that all drupal configuration such as content types, views and sample content.
lando drush cr
This will clear Drupal's caches.
4. Install Front End Tooling
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 patternlab 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.
- When prompted to
Run an initial build of the front end tools and PatternLab.
lando npm run build && lando php patternlab/core/console --generate
WINDOWS USERS ONLY: If you experienced issues with the steps above do the following:
- Skip step #2
- Follow all other steps, but change step #5 by running this command istead:
lando php patternlab/core/console --generate
Preview your site
To see Drupal up and running go to http://nitflex.lndo.site/
Your site's credentials are: username:
You should see Drupal's homepage which includes a list of movies with images, title and other text content.
In some instances, depending on your environment, you may need to append port 8000 to the url (i.e. http://nitflex.lndo.site:8000).
You are done!
🙌 🔥 👊
Time for exercises
Now that your local environment is set, it's time to build and integrate components.
Follow the exercises here
This is the curriculum we will follow during training.
Managing your Lando environment
To shutdown Lando so it is not consuming your machine's resources run
To restart lando run
If you want to rebuild your lando environment run
To destroy your environment completely, run
Learn more about Lando.