How to Add Web Components to Drupal
- Last updated
- 1 minute read
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:
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.
./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:
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.
composer require 'drupal/component'
Now that the module has been added to our project, we can enable Component and Component example.
drush en component component_example -y
-
Display the React Calculator
The Component example module includes four components available as blocks, Example blank, Example Config, Example React Calculator, and Example Tabs.
Below you can see the Example React Calculator placed in the Olivero sidebar.
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.