{"id":56271,"date":"2022-12-27T13:01:36","date_gmt":"2022-12-27T07:31:36","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56271"},"modified":"2022-12-30T13:04:12","modified_gmt":"2022-12-30T07:34:12","slug":"loosely-coupled-integrate-react-js-into-drupal-sites","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/loosely-coupled-integrate-react-js-into-drupal-sites\/","title":{"rendered":"Loosely Coupled: Integrate React JS into Drupal sites"},"content":{"rendered":"

React is a JavaScript library that makes it painless to create interactive UIs. Unfortunately, embedding React into a Drupal site is not straightforward. In this article, I will show you relatively simple methods of how to do so.<\/p>\n

React can be integrated with Drupal in 2 ways:<\/p>\n

    \n
  1. Fully decoupled<\/li>\n
  2. Partially Decoupled (Loosely Coupled)<\/li>\n<\/ol>\n

    Fully Decoupled<\/h2>\n

    In a fully decoupled CMS, the front-end and back-end are separated<\/strong>. We can also call this \u201cHeadless Drupal\u201d.<\/p>\n

    The Drupal CMS handles the back-end. Initially, we need to set up our Drupal, build the content architecture and then expose this data as a web service API.<\/p>\n

    Once we are ready with the JSON API exposing the required data, we now need to set up our Front-end (React) to consume those APIs and display data in the application. This can be done by using create-react-app or by react webpack setup and axios for APIs.<\/p>\n

    \"\"<\/p>\n

    Partially Decoupled (Loosely Coupled)<\/h2>\n

    This approach will render your React app within a Drupal block. You could also put the React component into the theme. This method will allow you to include 3rd-party packages from npm, scale your application to many files and components, enable live editing in development mode, and help optimize things for speed and compatibility.<\/p>\n

    DON\u2019T USE CREATE-REACT-APP<\/h3>\n

    Create-react-app is a nice tool that generates scaffolding for a React application. It sets up a modern web app by running one command. But when we need to build react blocks to embed into drupal, create-react-app is not so great. For instance, We do not need a public folder that create-react-app provides in this case, as all of this is handled by drupal twig templating. Also, we do not need all the pre-installed dependencies.<\/p>\n

    WHAT TO DO<\/h3>\n

    Goal<\/h4>\n

    Connect a “Hello World!” React application to a Drupal theme or module.<\/p>\n

    Step 1: Create a custom module<\/h4>\n

    In your custom module folder (\/modules\/custom) create a new folder for the custom module. Let’s call it react_module<\/strong>.<\/p>\n

    In the react_module folder, add an react_module.info.yml<\/strong> file to register your module.<\/p>\n

    name: React Module\r\ndescription: Module for React code\r\npackage: Custom\r\ncore: 8.x\r\ncore_version_requirement: ^8 || ^9\r\ntype: module<\/pre>\n
    Step 2: Enable the new module<\/h4>\n
    Enable the module by navigating to Extend (\/admin\/modules) in the Manage administration menu.<\/p>\n
    Step 3: Setup React App<\/h4>\n
      \n
    • Initialize a new react project inside \/modules\/custom\/react_module\/js\/react-app<\/strong>.<\/li>\n<\/ul>\n
      npm init<\/pre>\n
      This will generate a basic package.json. We will place all the react code inside this folder.<\/p>\n
        \n
      • Next, we want to install latest stable version of node:<\/li>\n<\/ul>\n
        nvm install node\r\nnode -v > .nvmrc<\/pre>\n
          \n
        • Now we have to install all the required packages.<\/li>\n<\/ul>\n
          Dev dependencies:<\/p>\n
          npm install --save-dev @babel\/core @babel\/cli @babel\/preset-env @babel\/preset-react babel-loader webpack webpack-cli<\/pre>\n
          Production dependencies:<\/p>\n
          npm install react react-dom<\/pre>\n
            \n
          • Add a webpack config<\/li>\n<\/ul>\n
            This goes in a file called webpack.config.js<\/strong>.<\/p>\n
            const path = require('path');\r\n\r\nconst config = {\r\n  entry: '.\/src\/index.js',\r\n  devtool: (process.env.NODE_ENV === 'production') ? false : 'inline-source-map',\r\n  mode: (process.env.NODE_ENV === 'production') ? 'production' : 'development',\r\n  output: {\r\n    path: path.resolve(__dirname, 'dist'),\r\n    filename: 'app.bundle.js'\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: \/\\.js$\/,\r\n        exclude: \/(node_modules)\/,\r\n        use: {\r\n          loader: 'babel-loader'\r\n        }\r\n      }\r\n    ]\r\n  },\r\n};\r\n\r\nmodule.exports = config;<\/pre>\n
            We are configuring a process here that’ll take our source index.js file, and pass them through different build steps that will ultimately output a single, optimized, .js file.<\/p>\n
              \n
            • Configure package.json<\/li>\n<\/ul>\n
              This tells webpack to either do a development (watch) or a production (build) build<\/strong>.<\/p>\n
              \"scripts\": {\r\n  \"build\": \"NODE_ENV=production webpack\",\r\n  \"watch\": \"webpack --watch --progress\"\r\n}<\/pre>\n
              Configure how Babel<\/strong> works in package.json.<\/p>\n
              \"babel\": {\r\n  \"presets\": [\r\n    [\r\n      \"@babel\/preset-env\",\r\n      {\r\n        \"targets\": {\r\n          \"browsers\": [\r\n            \"IE >= 11\",\r\n            \"last 3 versions\"\r\n          ]\r\n        }\r\n      }\r\n    ],\r\n    \"@babel\/preset-react\"\r\n  ]\r\n}<\/pre>\n
              After following these steps you’re all set to have Babel transpile your JavaScript so you can use JSX and ES6+ features in your code. Webpack will bundle your custom code along with the required React, and ReactDOM libraries, as well as any other libraries you include using npm, into a single JavaScript bundle.<\/p>\n
              Step 4: Create a basic React App<\/h4>\n
              Put this in src\/index.js<\/strong>. You can add other components within the render and scale your application to many files and components.<\/p>\n
              import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('react-root'));\r\nroot.render(\r\n  <h2>Hello world!<\/h2>\r\n);<\/pre>\n
              root.render()<\/strong> (i.e. virtual dom) will look for an HTML element with the ID react-root, and replace it with the HTML markup produced by your React code. This is also known as binding the React application to the DOM.<\/p>\n
              Step 5: Include your React app in Drupal<\/h4>\n
                \n
              • Define a library for your React app.<\/li>\n<\/ul>\n
                In your module, add a react_module.libraries.yml<\/strong> file as follows:<\/p>\n
                react-lib:\r\n  version: 1.x\r\n  js:\r\n    js\/react-app\/dist\/app.bundle.js: { minified: true }<\/pre>\n
                  \n
                • Include the React app\u2019s Drupal library and target markup on a page. The React app will put itself within the react-root div since we have used document.getElementById(‘react-root’)<\/strong> in Step 4.<\/li>\n<\/ul>\n
                  There are quite a few ways to do this.<\/p>\n
                  i) Using twig template (page, block, region etc):<\/p>\n
                  {{ attach_library('react_module\/react-lib') }}\r\n<div id=\"react-root\"><\/div><\/pre>\n
                  ii) You can also use a render array to embed the app. For Instance, if you want to do things from a form alter<\/strong>:<\/p>\n
                  $form['my_react_app'] = [\r\n  '#markup' => '<div id=\"react-root\"><\/div>',\r\n  '#attached' => [\r\n    'library' => [\r\n      'react_module\/react-lib'\r\n    ],\r\n  ],\r\n];<\/pre>\n
                  iii) Define a block plugin<\/p>\n
                  This will output the DOM element to bind to, and attach the React application asset library to that block. Then whenever the block appears on the page the React application will load.<\/p>\n
                  Place this in modules\/react_module\/src\/Plugin\/Block\/ReactBlock.php<\/strong>:<\/p>\n
                  <?php\r\nnamespace Drupal\\react_module\\Plugin\\Block;\r\n\r\nuse Drupal\\Core\\Block\\BlockBase;\r\n\r\n\/**\r\n * Provides a 'ReactBlock' block.\r\n *\r\n * @Block(\r\n * id = \"react_block\",\r\n * admin_label = @Translation(\"React block\"),\r\n * )\r\n *\/\r\nclass ReactBlock extends BlockBase {\r\n\r\n  \/**\r\n   * {@inheritdoc}\r\n   *\/\r\n  public function build() {\r\n    $build = [];\r\n    $build['react_block'] = [\r\n      '#markup' => '<div id=\"react-root\"><\/div>',\r\n      '#attached' => [\r\n        'library' => 'react_module\/react-lib'\r\n      ],\r\n    ];\r\n    return $build;\r\n  }\r\n}<\/pre>\n
                  Clear drupal cache<\/strong> and the block will be available to place in any region. Go to \/admin\/structure\/block<\/strong> and click on \u201cplace block\u201d in the sidebar region and search for \u201cReact Block\u201d. Place the block and it will be available on the page.<\/p>\n
                  Step 6: Run<\/h4>\n
                  Let\u2019s run a development build from within \/modules\/custom\/react_module\/js\/react-app<\/strong>:<\/p>\n
                  npm run watch<\/pre>\n
                  Running this command will run the watch build scripts<\/strong> in package.json (Step 3). It will listen for changes to any of the files in src<\/strong> and automatically rebuild the assets in dist\/app.bundle.js<\/strong>.<\/p>\n
                  Open \/ Reload the page containing the target div from twig or form (Step 5). You should see the \u201cHello world!\u201d text in the target div.<\/p>\n
                  \"\"<\/p>\n
                  To create the production build, run:<\/p>\n
                  npm run build<\/pre>\n
                  Do this whenever you’re ready to deploy your changes, and then commit the updated files to Git.<\/p>\n
                  Final Folder structure:<\/h4>\n
                  +-- react_module\r\n| +-- react_app.info.yml\r\n| +-- react_app.libraries.yml\r\n| +-- react_app.module (Defines Drupal hooks like hook_page_attachments or hook_form_alter)\r\n| +-- js\r\n| | +-- custom.js (Defines Drupal Behaviors)\r\n| | +-- react-app\r\n| | | +-- dist\/\r\n| | | | +-- app.bundle.js\r\n| | | +-- node_modules\/\r\n| | | +-- src\r\n| | | | +-- index.js\r\n| | | +-- package.json\r\n| | | +-- package-lock.json\r\n| | | +-- webpack.config.js<\/pre>\n
                  Note<\/strong>: If any of the changes are not reflected on page refresh, try clearing browser or Drupal cache<\/strong>.<\/p>\n
                  Further for your understanding<\/h4>\n
                    \n
                  • Try to add a React component to the page via a custom theme.<\/li>\n<\/ul>\n
                     <\/p>\n
                    <\/div>","protected":false},"excerpt":{"rendered":"
                    React is a JavaScript library that makes it painless to create interactive UIs. Unfortunately, embedding React into a Drupal site is not straightforward. In this article, I will show you relatively simple methods of how to do so. React can be integrated with Drupal in 2 ways: Fully decoupled Partially Decoupled (Loosely Coupled) Fully Decoupled […]<\/p>\n","protected":false},"author":1124,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":396},"categories":[3602,3038],"tags":[4862,5067,5068,4064,5069],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56271"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56271"}],"version-history":[{"count":1,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56271\/revisions"}],"predecessor-version":[{"id":56272,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56271\/revisions\/56272"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}