Acquia Developer Portal Logo

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:

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.

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

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

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

  4. Display the React Calculator

    The Component example module includes four components available as blocks, Example blank, Example Config, Example React Calculator, and Example Tabs.

    example components

    Below you can see the Example React Calculator placed in the Olivero sidebar.

    example react calculator

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

Similar Tutorials