Varna and Burgas airports' websites use React components in Drupal

How did we end up needing React?

At Bulcode, we all ♥ Drupal, but when we first took over the support of the websites of Varna and Burgas airports, we inherited Drupal 8 systems that had been done in a way that wasn't so Drupal. As a result, the Drupal 9 migration / redevelopment was the first hurdle. For reference, you can see this article which explains the advantages of migration as well as the costs of doing nothing if you're still debating an upgrade (migration).

What makes it a challenge, exactly? Drupal 8 to Drupal 9 migration (or upgrade) is a mostly automated process, according to all sources of information. This is not always the case with most websites, especially when they are out of date with Drupal 8's most recent core and module contrib versions, so we at Bulcode always present it to clients as a small project of their own.

The inheritance we received for airport schedules was the driving force behind our decision to use React. A lot of manual work was required, as was the creation and upload of CSV files, which occasionally caused outages. It was a laborious process that occurred a few times a day. This was something that needed to be resolved as soon as possible.

So, what was our approach? With specific caching and React components for the frontend, API-driven schedules are fast and on-the-fly.

Why Drupal and React? Drupal is a content management system with a robust API for web services, and React is a simple way to build interactive user interfaces. The combination of React and Drupal works well in a number of ways. However, Drupal-powered sites can still make use of React for component development. This method is referred to as "progressive decoupling."

Now, let's see how it's put to use!

Adding React to our components: our experience

To begin, we must download and install all required dependencies:

yarn add react react-dom webpack webpack-cli @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Please note that we are not going to discuss the specifics of how each module works or which ones should be added as dev dependencies here. Using the packages page, you can see this.

Let's now set up our package.json scripts section:

Having separate dev and production webpack configurations is a good idea, so keep this in mind when creating your own files.

Add a simple webpack.config.js to the mix. React Hot Reloader with Webpack Server, some CSS, SASS, and file loaders, as well as additional plugins such as ESLint and minifiers are likely to be needed in your work. We won't go into this here because it's a matter of personal preference.

Let's not forget our babel configs. This can be done using package.json or .babelrc.

We're getting closer and closer. In our dist folder, we'll find an app.bundle.js that we can use as a library in our theme when our build scripts are run. For ease of implementation, we'd like to add it to the entire app. Note that the performance of your application may be compromised if you only need React for a few components scattered across random pages.

We're ready to get started on our actual react component. The sky's the limit in this section.

src/index.jsx

Finally, we'll add the markup required to display our React component. It's up to you now to put it where you want!

And voilà, we successfully integrated React into our Drupal project.

Fraport Bulgaria
”The individual approach, timely deliveries and precise documentation of the developments are a small part of the reasons for continuing the active partnership with Bulcode 2016 Ltd. It is our privilege and obligation to recommend the team of Bulcode 2016 Ltd. as extremely competent, reliable, and responsible in the implementation of the commitments.”