This project outlines the steps to build components with Twig and KSS Node which then are integrated with Drupal.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Component Based Development in Drupal 8

The component based development training is broken down into 3 parts:

  1. Building stand-alone components in Twig using KSS Node.

  2. Building Drupal's back-end.

  3. Integrating the components with Drupal.

Local Development Environment Setup

This repo includes everything you need to set up a Lando-based local develop environment of Drupal, along with the required front end tools (Node, Gulp, etc.) For best results, follow these steps for completing the setup of your local development environment.

1. Install Lando, along wth dependencies (Docker).

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

NOTE: If you are using OSX, you may need to install XCode's Command Line Tools.

2. Clone the training repository anywhere in you local system.

git clone

3. After cloning this repo locally, run the following commands from the root level of the repository in your preferred terminal app:

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

  • 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 placeholder content for the demo site we'll use in the training exercises.

  • lando drush cr
    This will clear the Drupal caches.

After following these steps, you should have an unstyled Drupal site available locally at:
Depending on your setup, you may not need port :8000)

Install Front End Tooling

  • cd web/themes/custom/nitflex_dev_theme

  • Run: lando npm install
    This will install the required front end tools (Node, Gulp, etc.)

Log into the site and preview the final results

  • Go to: and log in with username: admin, pw: admin.
    IMPORTANT: Your Drupal site URL my be different. In some instances the :8000 part of the URL is not needed.

    Done! 🙌 🔥 👊

Training Exercises

Follow these training exercises to build the full project covered during training.

Not using Lando?

Although we highly encourage you to use the already tested setup above, you are free to use your existing Drupal development workflow. This however will require you complete several manual tasks so you can be up to speed and ready to follow along during training.

  1. Download or clone the provided repo to access the assets you will need to follow along.

  2. Copy web/themes/custom/nitflex_dev_theme into your own Drupal themes location (i.e. web/themes/custom/).

  3. Copy all images from this repo's /assets/imgs/ into your Drupal's files directory (i.e. web/sites/default/files/).

  4. Make sure the following modules (plus their dependencies) are installed:

  5. Import drupal8.export.gz (found in the root of this repo) into your own Drupal database. WARNING: this will override your current database. This creates all the Drupal infrastructure we need for the training (content types, views, view modes, image styles, etc.), plus some sample content. For more advanced users, you can find site configuration files in /config/sync/, but you will be on your own for generating sample content. This would be an extremely time consuming process if you opt to do it by hand so we highly recommend you use the provided database dump.

  6. If you successfully followed all the steps, you can login to your site using admin and admin as username/password.

NOTE: This is a full class and assistance with your local environment may be limited. We are leveraging Lando to help streamline the setup of a consistent local development environment.

Component based development exercises.