Last month we worked in a project where we implemented a progressively decoupled Drupal platform. We needed a React.js frontend to to all kind of magic that was less available in Twig. Also, this way frontend engineers and backend engineers could work more loosely together, which is great.
Main reason we choose progressive decoupled instead of fully decoupled is because we wanted to make use of Drupal's roles, permissions and authentication, plus some other Drupal native stuff that in fully headless would become very cumbersome to deal with.
Check out this blog on 'How to decouple Drupal in 2019' and find out if you also need Drupal beheading or not.
React libraries dynamically in Drupal
The target was to implement the React.js libraries in Drupal pages, so React would load withín Drupal and we could use all native Drupal goodies like authentication.
By the way: you can also use Drupal authentication when fully decoupled, check this article
So, the thing with React is: every time you release a new version of your App, you'll have to render a new build, that sort of looks like this:
More specifically, the .js and .css files we need to load in Drupal are defined in asset-manifest.json:
So, those files need to be loaded in Drupal, and change every time you run a new build in your React App for example with npm run build.
But you can't add these React javascript libraries to your theme's YOURTHEME.libraries.yml because with the next build the links be be different.
hook_library_info_build() to the rescue
Aaaah, so Drupal 8 provides us with hook_library_info_build() that will save our day (づ｡◕‿‿◕｡)づ
Now, how we did this:
Implement the Drupal hook in your .module file (For highlighting's sake, I added .php, loose that. #nobrainer):
As you see, it will read React's asset-manifest.json and registers all .js and .css files of React.js as a library in Drupal.
Next up, you can render this library for example in a Controller like this:
Wrap up
So that's how we integrated React.js within Drupal pages and combined the power of a React frontend with the power of Drupal goodies, in a 'progressively decoupled' way.
Please let me know if you have any questions.
