React Mount Node

Introduction

With headless and decoupled apps becoming more and more popular due to the built in REST API of Drupal 8, there has been a greater need to find ways to connect the front end to the back end. There are several different ways to decouple an app, but two of the biggest are Fully Decoupled and Progressively Decoupled. In this blog post Dries describes them both, but TL;DR: in fully decoupled the front end and back end are completely different. In progressively decoupled, they share some, but remain separate.

This module creates a content type specifically for creating a mount node (DOM node, not Drupal node) for a React app to grab onto and render. This can possibly be used with other front end libraries and frameworks, but was built to connect to a React app.

Installation

composer require drupal/reactjs_mount

If composer isn't your thing (it should be) see https://www.drupal.org/documentation/install/modules-themes/modules-8
for instructions on how to install or update Drupal modules.

Configuration

There is no configuration needed in the admin side. This module creates a content type with 3 fields: Title, Div ID, and Library.

Usage

To use this module, create a new node with the content type "React Mount Node" and you'll see the three fields mentioned above.

Title: The title of the node that you are attaching the React Library to.
Div ID: An ID for a <div> element that the React App can grab onto. This is usually defined in the React App in index.js in a snippet similar to

ReactDOM.render(<App />, document.getElementById('drupal-react'));
registerServiceWorker();

where 'drupal-react' is the ID
Library: This is the name of a library that is defined in a .YML file. For my purposes, I placed the library inside my custom theme and defined it in themename.libraries.yml

react-app:
  js:
    libraries/react-app/react-app.js: {}

The code itself lives in the folder themename/libraries/react-app although you can place the library anywhere that seems fit for your purposes, including a module folder or the /libraries folder. This documentation goes into placing libraries a little further.

Depending on your settings, you may have to, and probably should, clear caches every time you make a change to your React App in case things get lost in aggregation.

Maintainers

Current maintainer:
JD Flynn - https://www.jamesdflynn.com