Add Web Components to Drupal

Goal

Add JavaScript components to a Drupal application as blocks.

Prerequisites

• Composer must be installed on your local machine.

Overview

For this tutorial, we are going to do the following:

• Install Acquia CMS Community using the Acquia Drupal Recommended Project
• Add the Component and Component examples modules
• Add a React Calculator component to our site as a block

Note: If you have an existing Drupal application, you can skip to step 3. The Component module works with Drupal 8 and above. You do not have to start with Acquia CMS.

• Create a Drupal application with Acquia Drupal Recommended Project

  Create a new project using Composer:

  copy

   composer create-project --no-interaction acquia/drupal-recommended-project

  You can learn more about Creating a new Drupal application with Composer from Matthew Grasmick's tutorial.

• Install Acquia CMS Community

  Now that we have created our project; we can install the Acquia CMS Community starter kit.

  copy

   ./vendor/bin/acms acms:install

  This will ask you several questions about the starter kit you want to start from and any “add-ons” you want to add:

  copy

   Please choose bundle from one of the above use case [acquia_cms_community]: > acquia_cms_community

• Add the Component module

  To add components to our Acquia CMS Community application, we need to add the Component module.

  copy

   composer require 'drupal/component'

  Now that the module has been added to our project, we can enable Component and Component example.

Adding an example component is only the beginning. The real value comes when you can start creating your own components. The example components are provided as a reference architecture. They provide examples of adding form options to the component so site builders can modify it as they would any Drupal block, how to use shared libraries with React via CDN, and how to use that library to create a React component. They also show how to use vanilla JavaScript to create a Tabs component.

If you want inspiration for your custom component, consider browsing Codepen. One of my favorites in the Impossible Checkbox. Using the calculator example as a guide, see if you can add the Impossible Checkbox to your Drupal application.

Additional Resources

• Acquia Drupal Recommended Project
• Creating a new Drupal application with Composer
• Component module