TECHNICAL OVERVIEW

Embedding React Code Into Drupal For Better Projects

Franco Shum, Developer at Acro Commerce, explores how we embed React code into Drupal sites, improving development outcomes and user experiences for B2B and Manufacturing website development projects.

Enhancing Drupal Development with React

Drupal development with React involves integrating the backend capabilities of Drupal, a content management system, with the frontend flexibility of React, a JavaScript library for building user interfaces. 

By combining Drupal with React, developers can leverage both technologies' strengths. Drupal's backend capabilities can manage content, user data, and permissions, while React handles the frontend presentation and user interaction. 

Why Embed React?

Embedding your React application offers a nuanced approach to combining the robust content management capabilities of Drupal with the dynamic, interactive experiences enabled by React.js.

• Flexibility: Allows integration of modern JavaScript frameworks for dynamic user experiences.
• Adaptability: Allows for adjustments and enhancements to meet changing user demands and technological advancements.
• Maintainability: Simplifies maintenance and updates by decoupling specific elements while retaining Drupal's infrastructure.
• Community Support and Ecosystem: React boasts a large and active community and an extensive ecosystem of libraries, tools, and resources. Developers can leverage the React ecosystem to access pre-built solutions and best practices and ensure a more robust and feature-rich user experience. 
• Improved User Experience: By leveraging libraries from the community, the process of creating a user-friendly application within a designated time frame becomes easier and faster, resulting in a smoother and more efficient user experience.

Developers: Create Your React App With Vite

Vite is a local development server written by Evan You, the creator of Vue.js. It is used by default by Vue and for React project templates. It supports TypeScript and JSX. It uses Rollup and esbuild internally for bundling. 

The following section details step-by-step instructions on embedding React into a Drupal site. 

Open your terminal

Navigate to the desired directory (docroot/modules/custom/react_my_library). Then, run the following commands: 

This will create a new React app named my_library using Vite as the build tool.

Customize element ID

If you need to customize the DOM element ID, you can do so in the index.html and main.tsx file located in the src directory. Find the <div> element with the id root and change it to my-library. 

Also, change the main.tsx file:

Set your app to library mode

To configure Vite to generate the build version of your component library in library mode, you need to make adjustments in the vite.config.ts file. Here's how you can set it up:

Define a Drupal library 

To define a Drupal library for your React component library, you need to create two YAML files under the docroot/modules/react_my_library directory. 

These files will provide Drupal with information about the location and details of your library. 

Here's how you can create them:

Block creation

• To create a block element in Drupal that corresponds to the React element ID you've created, follow these steps:
• Navigate to the docroot/modules/custom/react_my_library/src/Plugin/Block directory. 
• Then, create a PHP file for your block plugin. 
• You can name it something like MyLibraryBlock.php.

Here's an example of how it might look:

We will have the following file structure:

Install your React Library to Drupal

Run the following command to generate a production build of your React library:

Navigate to the admin site at /admin/modules. Use the search box to find your module by its name, which is My Library in this case. When you locate the module in the search results, check the checkbox next to it to select it for installation.

Navigate to the page where you want to place the block. This could be an existing page or a new one you create. You should see a list of available blocks in the block layout, including your newly installed "React My Library" block. 

Find your block in the list and select the region where you want to place it on the page. Click on the region to place the block there.

You may need to clear cache for the changes to take effect. Run the following command: 

Finally, refresh the page where you placed the block to see it in action.

However, you may notice that nothing shows up, and an error appears in your browser's console:

Uncaught ReferenceError: process is not defined

Go to your Vite configuration file and define the environment variable. You can define it using the define option in your Vite config. For example:

After clearing the cache and refreshing the page, return to the page where you embedded your React app. You will now observe that your React app is successfully embedded within the page.

Embedding React with Drupal for Better Project Results

To wrap up, by merging Drupal's robust backend capabilities with React's dynamic frontend features, developers gain access to a range of advantages. These include time-saving benefits by leveraging React's efficient development workflow and ecosystem of pre-built solutions, future-proofing Drupal projects by staying aligned with evolving frontend technologies and trends, and access to a vibrant community and extensive ecosystem, accelerating development cycles and ensuring high-quality outcomes.

Interested in the future of web development?

Want to know more about the world-class development tools we use at Acro Commerce? 
Fill in the form below, and one of our subject matter experts will reach out.