Application progressivement découplée avec React sur Drupal

Pour comprendre le terme « découplé », nous devons comprendre ce qu’est « couplé ». Un CMS couplé (également appelé « traditionnel » ou « monolithique ») relie le front-end et le back-end. Travaillant à partir de la même application, les développeurs et les gestionnaires de contenu effectuent des ajustements sur le back-end pendant que les utilisateurs interagissent avec le front-end, mais les deux expérimentent, visualisent et interagissent avec le même système.

Dans un CMS découplé, le front-end et le back-end sont séparés. Le CMS gère le back-end et un système de livraison gère le front avec une interface de programmation d’application (API) qui les connecte pour la publication.

Réagir JS

React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Lancé en 2013, React a rapidement gagné en popularité en raison de son style déclaratif et de son manque d’hypothèses sur votre pile technologique. Au cours des dernières années, un vaste écosystème s’est développé autour de React. Cela inclut des bibliothèques de haute qualité, des conférences et une demande accrue de développeurs ayant des compétences React.

Drupal

Drupal est un système de gestion de contenu open source doté d’une suite d’outils robustes pour modéliser les données, mettre en œuvre des flux de travail éditoriaux et coder une logique d’application personnalisée. Il existe également un excellent support pour l’API JSON ou les services Web GraphQL, ce qui en fait un bon choix comme backend pour votre application React.

Avec une multitude d’avantages, ReactJS est devenu un framework frontal populaire. Malheureusement, intégrer React dans un site Drupal n’est pas simple. Dans cet article, j’espère vous montrer une méthode relativement simple pour le faire.

La méthode que je vais démontrer dans cet article fait quelques hypothèses que vous connaissez Drupal. Drupal 8/9 est déjà installé chez vous. Je ne montrerai pas comment utiliser React pour une expérience Drupal sans tête. Au lieu de cela, je vais démontrer ce qu’on a appelé une expérience vaguement découplée. L’approche de cette méthode rendra votre application React dans un bloc Drupal. Une autre hypothèse est que nous avons un moyen de détecter notre environnement local. Mon exemple est une façon, mais il y a d’autres façons de le faire.

Approfondissons les détails techniques de la création d’applications progressivement découplées à l’aide de React sur un site Web Drupal 8/9.

Pourquoi opter pour cette approche

Avec la popularité croissante de ReactJS, les bibliothèques et frameworks JavaScript s’avèrent utiles pour créer des applications complexes en s’intégrant de manière transparente sur un site Drupal, combinant ainsi la robustesse d’un CMS basé sur l’API avec une interface React simple et rapide pour céder collectivement la place à des expériences numériques incroyables ainsi que des versions à l’épreuve du temps.

Ne pas utiliser create-react-app

Si vous n’êtes pas familier avec create-react-app, c’est un bel outil qui génère un échafaudage pour une application React. Ce n’est pas non plus idéal pour créer des blocs React que vous prévoyez d’intégrer dans Drupal, car ces types d’applications React sont moins complexes. Par exemple, vous n’avez pas besoin du dossier public fourni par create-react-app, ni de beaucoup de ses dépendances. Certains d’entre eux peuvent interférer avec la possibilité d’utiliser les outils de développement React et peuvent également causer d’autres confusions.

Que faire

Il s’avère qu’il n’est pas très difficile de générer votre propre projet de réaction avec uniquement les dépendances dont vous avez besoin. Tout d’abord, décidez où votre composant React vivra dans votre base de code. Je le mets généralement dans un module personnalisé car nous devons écrire du code côté serveur pour intégrer le composant. Vous pouvez également mettre le composant React dans le thème.

Ce qui suit est une méthode étape par étape pour créer une application React et l’intégrer à un module personnalisé Drupal.

Étape 1 : Créer un module personnalisé dans Drupal

Dans votre dossier de module personnalisé (généralement web/modules/custom), créez un nouveau dossier pour le module personnalisé. Appelons-le react_example.
Dans le nouveau dossier, ajoutez un fichier info.yml pour enregistrer votre module. Puisque notre module est react_example, il sera nommé react_example.info.yml.
Remplissez votre fichier info.yml avec au moins les informations minimales. Voici un exemple :

Étape 2 : Créez une application de réaction de base

Créez maintenant le dossier js/react/ dans ce module personnalisé react_example. Je crée généralement un dossier js/react/appname. Faites-le comme bon vous semble et accédez à ce dossier à l’aide de la CLI. Ensuite, commençons par initialiser un nouveau projet.

Cela générera un package de base.json et quelques échafaudages.

Ensuite, vous voudrez définir une version de nœud. Pour cela, je recommande nvm. Vous voulez probablement la dernière version stable de node.

npm install node

node -v > .nvmrc

Il est maintenant temps d’installer les packages requis. Voici un résumé de ce dont vous aurez besoin :

Le type de dépendance indique si le module est nécessaire pour la version de production réelle avec laquelle les utilisateurs finaux interagiront.

Pour installer ces packages, commencez par les dépendances de développement :

npm install --save-dev @babel/cli @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Ensuite, installez les dépendances de production

npm install react react-dom

Étape 3 : Ajouter une configuration Webpack

Si vous avez déjà travaillé avec React, il est probable que vous ayez utilisé Webpack pour créer votre projet. La configuration Webpack nécessaire ici est assez basique :

const path = require('path');
const config = {
  entry: './src/index.js',
  devtool: (process.env.NODE_ENV === 'production') ? false : 'inline-source-map',
  mode: (process.env.NODE_ENV === 'production') ? 'production' : 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
         test: /\.js$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader'
         }
      }
   ]
 },
};

module.exports = config;

Cela va dans un fichier appelé webpack.config.js. Je vais vous expliquer les parties importantes :
Entrée : Dans webpack, le point d’entrée est le fichier qui importe tous vos autres packages, en haut de l’arborescence de votre application. Si vous avez affaire à React, c’est le fichier dans lequel vous utilisez react-dom pour attacher votre script de réaction à un élément DOM.
Outil de développement : Selon que nous réalisons une version de production ou de développement, nous disons au bundle d’utiliser une carte source. Cela gonfle beaucoup le bundle, vous ne voulez donc pas ajouter de carte source à la construction de la production. La comparaison NODE_ENV entre en jeu plus tard lorsque nous avons npm exécuté notre script webpack.
Production : Le chemin d’accès à votre bundle, contenant l’ensemble de l’application (par exemple, tous les composants React et les importations dont vous avez besoin). Habituellement, cela se trouve dans un dossier « dist ».
Module : Cela indique à webpack d’utiliser babel pour transpiler votre JS afin que le navigateur puisse exécuter React.

Il y a deux choses que vous devez faire :

Configurez vos scripts

Vous devrez ajouter ce qui suit au niveau supérieur de package.json :

"scripts": {
"build": "NODE_ENV=production webpack",
"watch": "webpack --watch --progress"
},

Cela indique à Webpack de faire un développement (watch) ou une production (build). Comme nous l’avons noté précédemment, nous utilisons une variable d’environnement pour déterminer s’il faut utiliser une carte source (ce qui gonfle le paquet mais facilite le débogage).

Configurer Babel

Un autre rôle joué par package.json est de vous permettre de configurer le fonctionnement de Babel. Vous devez ajouter ceci :

"babel": {

"presets": [

[

"@babel/preset-env",

{

"targets": {

"browsers": [

"IE >= 11",

"last 3 versions"

]

}

}

],

"@babel/preset-react"

]

Étape 5 : Créer une application React « Hello World »

Vous trouverez ci-dessous une application React simple qui vous permettra de tester des choses. Mettez ceci dans src/index.js :

import React from 'react';

import { render } from 'react-dom';

const Root = () => {

return (

<>Hi there</>

)

}

render(<Root/>, document.querySelector('#my-app-target'));

Étape 6 : Définir une bibliothèque pour l’application React dans Drupal

Dans notre module react_example, créez un fichier react_example.libraries.yml avec ce contenu :

my-app:

version: 1.x

js:

js/react/my-app/dist/app.bundle.js: { minified: true }

Nous avons plusieurs façons d’attacher cette bibliothèque dans Drupal qui est mentionnée à l’étape 7.

Étape 7 (A) : Inclure sur le modèle de brindille

Inclure le balisage cible de l’application React sur une page / Inclure la bibliothèque Drupal de l’application React sur une page

Cela nous permettra de charger la bibliothèque dans une propriété #attached ou dans un template Twig.

Il existe plusieurs façons de procéder. Je pense que le moyen le plus simple est de mettre ce qui suit dans le modèle de brindille où vous souhaitez charger votre application React :

{{ attach_library('react_example/my-react-app') }}

<div id="my-app-target"></div>

Si nous faisons cela, l’application React se placera dans la div my-app-target.

Étape 7 (B) : Inclure dans l’élément de formulaire

Vous pouvez également utiliser un tableau de rendu pour intégrer l’application, si vous souhaitez faire des choses à partir d’une modification de formulaire, par exemple :

$form['my_react_app'] = [

  '#markup'=> '<div id="my-app-target"></div>',

  '#attached'=> [

    'library'=> [

      'mymodule/my-react-app'

    ],

  ],

];

Étape 7 (C) : Créer un bloc personnalisé

Commençons par créer un fichier dans notre module personnalisé à src/Plugin/Block/ReactExampleBlock.php
Dans la méthode de construction de notre classe de blocs, nous allons créer un conteneur vide avec l’ID par défaut (racine) pour monter l’application React. À ce conteneur, nous attacherons notre bibliothèque personnalisée.

<?php

namespace Drupal\react_example\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**

* Provides a 'ReactExampleBlock' block.

*

* @Block(

* id = "react_example_block",

* admin_label = @Translation("React Example Block"),

* )

*/

class ReactExampleBlock extends BlockBase {

/**

* {@inheritdoc}

*/

public function build() {

$build = [];

$build[] = [

'#type'=> 'container',

'#attributes'=> [

'id'=> 'root',

],

'#attached'=> [

'library'=> [

'react_example/react_example_dev',

],

],

];

return $build;

}

}

À ce stade, vous devriez pouvoir ajouter votre nouveau bloc à une page et voir le contenu par défaut, en disant « Modifier src/App.js et enregistrer pour recharger ». Si vous voyez ce message, vous avez réussi à attacher l’application React à votre bloc Drupal et vous pouvez poursuivre le développement.

Étape 8 : Exécutez npm

Si vous suivez ceci comme un tutoriel, c’est le bon moment pour tester les choses. Tout d’abord, testons une version de production :

Exécutez la commande ci-dessous dans votre application React

OU

Dans le navigateur, chargez la page qui exécute votre modèle de brindille ou bloquez à partir de l’étape 7. Vous devriez voir le texte « Bonjour » dans la div cible.

Conclusion

J’espère que cet article vous a aidé à ajouter une application React progressivement découplée intégrée à votre site Drupal 8/9 !