hemeda3 / advanced-components

Welcome Componenbe-based theming with Twig

A training workshop by Mediacurrent.

Getting Started

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.

Prerequisites

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)

IMPORTANT

• 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 [email protected]: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:

1. In your command line type/run cd component-based-development
   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.

2. Run lando start
   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.

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

4. Run cp -r assets/imgs/* web/sites/default/files/
   This will copy our sample image assets to Drupal's default files directory.

5. Run lando db-import drupal8.export.gz
   This will import a custom database that all drupal configuration such as content types, views and sample content.

6. Run lando drush cr
   This will clear Drupal's caches.

4. Install Front End Tooling

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

   • First run cd ../
     

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

   • Done!

     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: admin, password: admin

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
  lando poweroff

• To restart lando run
  lando restart

• If you want to rebuild your lando environment run
  lando rebuild

• To destroy your environment completely, run
  lando destroy

Learn more about Lando.