Progressive Decoupled Drupal Setup

In the era of a realtime, fast, performant web application, one cannot overlook the superpowers of ReactJS and the wonders it can do when used right.

The beauty of ReactJS is that it can be easily integrated with any other framework. Let’s have a look at how to integrate ReactJS with Drupal 8 and Drupal 7.

We rely on ReactJS to handle the heavy UI and leave the rest to Drupal.

These are the steps we will follow. [The steps will be elaborated later in the blog]

       
1. Create a custom module that creates a custom block. The custom block has the codebase for ReactJS.
       
2. Develop your React application.
       
3. Once done, run

`npm run build` or `yarn run build`

       
• This will create a build folder with the root directory.
       
• This build directory has minified files that can be used as static files.
       
• The custom block must have a div with id “root”.
       
• If you want to give it a different id, update /src/index.js to

ReactDOM.render(, document.getElementById(‘YourId’));

DRUPAL 8 SETUP

       
• Include min files in the mentioned order.
       
• I have renamed the generated files to runtime.js, chunk.js, and main.js.
       
• The generated files have self-generated names concatenated with runtime, chunk or main.
       
• Add other third party CSS libraries you want to include in the way it is demonstrated above.
       
• Lets Automate:

npm install -- save renamer

Add the following in the ‘scripts’ package.json

"renameRuntimeJS": "renamer --find \"/runtime.*.js$/\" --replace \"runtime.js\" \"build/static/js/*\"",
"renameChunkJS": "renamer -f \"/^(?!.*main).*chunk.js/\" -r \"chunk.js\" \"build/static/js/*\"",
"renameMainJS": "renamer -f \"/main.*.js$/\" -r \"main.js\" \"build/static/js/*\"",
"renameCSS": "renamer -f \"/.*chunk.css/\" -r \"chunk.css\" \"build/static/css/*\"",
"renameAll": "npm run renameRuntimeJS && npm run renameChunkJS && npm run renameMainJS && npm run renameCSS"

Your package.json should now look like this:

npm run renameAll

Voila!!!

After creating this, I enabled the module that I created programmatically. Then in the Block Layout in the Content region, I placed this custom block.

Once all of this is done, visit the respective drupal page. It should have the React application within. Theme the block and React application as you wish. You have now completed the basic setup of Progressively Decoupled Drupal 8 with ReactJS.

DRUPAL 7 SETUP

Note: notice

array(‘scope’ => ‘footer’)

It is important to load the JS files at the footer of the block or else it will be added at the beginning of the block. It will look for a div with the respective id and since the HTML is not yet rendered, it won’t find one resulting in `Uncaught Invariant Violation: Minified React error`

‍

notice array(‘scope’ => ‘footer’)

Loads the JS files at the footer, avoiding the above-mentioned error.