Local Setup

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.

VERY IMPORTANT!

Your local environment should be setup prior to arriving for training.

1. Install Lando and Docker

Lando is a free, open source, cross-platform, local development environment tool built on Docker container technology.

System requirements

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.

Run the installer

• 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.

2. Clone this repo anywhere in your computer

• In your preferred terminal app, run the following command: git clone [e-mail]: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 your Lando environment

WINDOWS USERS: Use Power Shell to run the commands below.

Run the following commands from the root level of the repository.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. lando drush cr This will clear the Drupal caches.

4. Install Front End Tooling including PatternLab

1. cd web/themes/custom/nitflex_dev_theme

2. 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.

3. Move into the pattern-lab directory cd patternlab

4. 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.

5. Run an initial build of the front end tools and PatternLab.

   1. cd ../ Make sure you're at the root level of the theme,

   2. then run lando npm run build && lando php patternlab/core/console --generate

WINDOWS USERS: If you experienced issues with the steps above, do this:

1. Skip step #2

2. Change the command on step #5.2 to lando php patternlab/core/console --generate

Login to the site and preview the final results

• Go to: http://nitflex.lndo.site/user and log in with username: admin, pw: admin.

• 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! 🙌 🔥 👊

Don't want to use Lando?

The environment we have put together has been extensively tested and we expect everyone to use it during this training workshop. If you wish to use your own development environment you are on your own and we will not support or provide assistance if issues arise.