Component Based Development in Drupal 8
The component based development training is broken down into 3 parts:
Building stand-alone components in Twig using KSS Node.
Building Drupal's back-end.
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 https://docs.devwithlando.io/installation/installing.html
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 email@example.com:mariohernandez/component-based-development.git
3. After cloning this repo locally, run the following commands from the root level of the repository in your preferred terminal app:
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.
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: http://nitflex.lndo.site:8000/
Depending on your setup, you may not need port
Install Front End Tooling
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: http://nitflex.lndo.site:8000/user and log in with username:
IMPORTANT: Your Drupal site URL my be different. In some instances the
:8000part of the URL is not needed.
🙌 🔥 👊
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.
Download or clone the provided repo to access the assets you will need to follow along.
web/themes/custom/nitflex_dev_themeinto your own Drupal themes location (i.e. web/themes/custom/).
Copy all images from this repo's
/assets/imgs/into your Drupal's files directory (i.e. web/sites/default/files/).
Make sure the following modules (plus their dependencies) are installed:
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.
If you successfully followed all the steps, you can login to your site using
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.