I recently recorded a video series tutorial about progressive Drupal decoupling. In this series I take two of the official React app examples and turn them into widgets. Your Drupal editorial team can then embed those React applications (a calculator, and an emoji selector) as blocks in a page, as a field in a content type, as an embedded entity in the body field using the WYSIWYG, …
#1 Embed Any JavaScript Application
In this first video in the series we will take one of the offical examples from react and we will turn it into a widget ready to be embedded in Drupal (or anywhere else).
Steps
- Create new repository from template.
- Migrate source to new repo.
- Copy new source files.
- Adapt index.js (including render function).
- Combine package.json.
- Find & replace «widget-example».
- Remove / add specific features.
- Reformat and execute tests.
- Execute locally.
- Deploy application.
#2 The Registry & the App Catalog
The widget registry is the place where you aggregate your widgets (and other people’s widgets you want to use) to make them discoverable to Drupal and other CMS integrations.
This piece plays a fundamental role in the governance of your project(s). You can choose to have a single registry for all your Drupal installations, or one registry per project. You can use the pull requests to gatekeep what versions are added to the registry and who can publish them. The idea is that the owner of the widget-registry project has the authority of accepting PRs to add/update widgets so they are available in the registry (and therefore in Drupal).
#3 Set up Progressive Decoupled Drupal
In this video we will learn how to connect Drupal and the widget registry to let editors embed JS applications all over Drupal (that includes support for i18n!).
You can, for instance, embed JS applications as blocks, as a field for a content type, in the body field as an entity embed, …
Photo by Shifaaz shamoon on Unsplash