Building Drupal Back-end

Now that our components are built, we can move on to Drupal to build the infrastructure necessary to integrate our components.

Enable Modules

Enable the following modules and their dependencies (if any):

Devel and Kint
Paragraphs
Components Libraries

Components Libraries Module

In order for Drupal to be able to use the Card component we created, we need the Components Libraries module, which allows us to create a namespace for our theme. Using a namespace makes it easier to reference twig templates that are not in the default /templates directory Drupal typically looks for twig templates in.

The namespace typically matches the name of our theme. In our case, the namespace will be @shiny. More on this later.

If you haven't enabled the Components Libraries module please do so now.

Adding a namespace to our theme

The namespace is added in the theme-name.info.yml file. Since we created our theme using Mediacurrent's theme generator, the namespace has already been added. However if you did not use the theme generator, add the following snippet to your .info.yml file:

component-libraries:
  shiny:
    paths:
      - src/components
      - src/layout
      - src/templates

The code above assigns the namespace of shiny which can be referenced by modules and themes within our project. In addition, it assigns multiple paths where Drupal can look for twig templates. By default Drupal 8 only looks for custom twig templates inside the /templates directory, but with the namespace in place, we've added src/components and src/layout as extra directories where twig templates may exist.

All of our components will be stored inside src/components making it possible for Drupal to easily access them using the new namespace.

Enable Twig debugging and disable Drupal's cache

We need to disable CSS and JavaScript aggregation which are on by default in Drupal 8. We also need to enable twig debugging. More on this later, for now follow these steps:

Disable Drupal CSS/JS Aggregation

While logged in as Administrator, Click Configuration | Development | Performance
Clear the Aggregate CSS files and Aggregate JavaScript files checkboxes
Click Save Configuration

Disable Drupal Caching and enable twig debugging

Follow the instructions on this article to disable drupal caching and enable twig debugging.

Enable the custom theme (i.e. shiny)

Enable the shiny theme before proceeding.

Click Appearance
Click on Install and set as default next to the shiny theme (or, your own custom theme)

Back to components

Next exercise: Build Card Paragraph Type

Build