Hi all, just a quick follow up to my previous post, we’ve implemented Elements into Drupal as a proof of concept and found that it all works well, please see the below guide we’ve put together, which we’ll soon be adding to our Storybook.
Run Elements on Drupal application
Before jumping into the Drupal configuration, it’s important to have a React application running the Elements wanted so it can be used within a Drupal application. This application is a wrapper to be used as a module in Drupal. You can read more about how to create simple React application and add the Elements to it in our storybook.
Installing the modules
Once your React app is finished then you can move to integrate with Drupal. Assuming you Drupal application is running, it can have Glisser Elements available as content block. There may be a few ways to run React in your project however the quickest is by installing JS Component as a module under ‘Extend’. This will allow your React app with the Elements to also be run as a module.With the JS Component installed, we can move to install your React app. Simply place the contents of your app into modules/custom/custom_react_app (this is a suggested path, feel free to place whenever is necessary). If you prefer, you can create the react app directly in the module folder rather than move the contents there.Now with your custom React project in modules folder, you need to add two files in order to make the custom modules available to Drupal.The first step is to create an info file. The name of the file needs to follow the pattern custom_react_app.info.yml. This file needs to be at the root of modules/custom/custom_react_app. Here’s a suggested content of your info file:
type: module
name: Glisser Elements
description: A Glisser Elements module for Drupal
core_version_requirement: ^8.7.7 || ^9
package: React Drupal Sample
dependencies:
- js_component
Then the other yml file required is the one which will connect your custom Elements React app build javascript file to be bundled with your Drupal application.
Again, following the same name pattern, it needs to be named custom_react_app.yml and the content will be:
custom_react_app:
label: Glisser Elements
description: Glisser Elements with Drupal App
root_id: root
libraries:
js:
/components/build/static/js/build.js: {}
Note that the /build/static/js/main.js points to the name of your React Elements build entry point. This name will vary depending on the javascript bundler (webpack, parcel, etc) used. It’s very likely that you will need to manually change this everytime you build either because some bundlers may hash the file name or the build entry point is not main.js.
Install modules in Drupal
After all the files are in the correct place and the configuration is matching with the file names, we can move to Drupal dashboard to install the modules.Go to your ‘Extend’ tab and search for ‘JS Component’ to install. Tick the box next to it and click on install. It should take a few minutes. Once it’s installed, we can do the same for the custom Elements React app.
Add the content block to a page
With both modules installed, now it’s time to add the actual React app to the page. There may be a number of ways to do this so you can choose how to add it. You can do it by going to ‘Structure’ and ‘Block layout’. Now find the area in the page where you want to add the custom Elements React app and click ‘Place Block’. This should list all available blocks. Find your custom app there and add the block. Now you can save the blocks and the custom app with Glisser Elements should be available in your page.