Drupal
JavaScript
min read

Progressive Decoupled Drupal Setup

Progressive Decoupled Drupal Setup
Table of contents

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.        
  3. Develop your React application.
  4.        
  5. 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

Progressively Decoupled Drupal

 

Progressively Decoupled Drupal
           
  • 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.

Publish date
August 23, 2019
Last update
November 7, 2019
Written by
Artwork by
No art workers.
We'd love to talk about your business objectives