Drupal & React

The Coexistence of Drupal and React

React and Drupal can be used together to create amazing digital experiences. Knowing where to start and how to leverage the strengths of both can be challenging. The following are findings from the Design and Development Team.

Design Team
Development Team

Design Team

Sticking with Drupal

Drupal Module

There are a couple of different ways that React and Drupal can be used together. The React module in Drupal doesn't do anything out-of-the-box, but simply provides the react.js library via the Libraries API module.

Drupal React Module
How to Use React with Drupal

Decoupling Drupal 7

Traditionally, Drupal sites are monolithic in the sense that Drupal is responsible for content management as well as rendering the front-end pages for the entire web site.

A site takes its first steps towards being decoupled when some component of the front end is being rendered by a system (in our case, ReactJS) other than Drupal.

That's really all there is to it.

We're adding

  • a layer of abstraction
  • a content API

between the back-end content management system and the front-end rendering system.

Decoupling Explained
Getting started with ReactJS & Drupal (Fully-Decoupled)
Decoupled Drupal: Is it Right for Your Business?

The State of Drupal in 2019

Drupal 9

Dries Buytaert, founder of Drupal, recently wrote his thoughts around the timeline for Drupal 9 and “end of life” for Drupal 7 and 8. We need to think about how this plays into the Classic Vacations timeline.

Drupal 8

The migration may require us to create a new environment on the side, as we maintain the old environment with Drupal 7, because during the migration, we may have to setup new settings and reconfigure legacy settings. It will require our diligent attention in checking the settings from the previous site.

Documentation on Upgrading to Drupal 8

Upgrading from Drupal 6 or 7 to Drupal 8
Choosing the upgrade approach
Customize migrations when upgrading to Drupal 8
Upgrade using Drush

Co–op & Private Label

Conclusion: Drupal Upgrade

In addition to a booking flow, our website is a plays a vital role in the following:

  • Co–op: promotion of our partners (hotels)
  • Private Label: Travel Agents brand their services

Co–op is valuable product for Classic Vacations, because it creates an incredible amount of revenue each year. It is imperative that landing pages and web adverts remain online everday without fail. All of Co–op content is managed and displayed in Drupal 7. Private Label is a product we provide to Travel Agents for them to branding their services which we must keep consistently operating on the site.

React is Taking Off


Javascript has been around forever (in tech terms) but recently it has been taking off. The ability now to run Javascript both in the browser and on the server (Node.js) has led the surge in Javascript development. Stack Overflow’s survey tells us that Javascript is the current language of choice.

Will JavaScript Eat the Monolithic CMS?

CMS is Here to Stay – for Now

Resilient Platform

CMS platforms are not going to be replaced anytime soon. Furthermore, PHP, the language, powers 83% of total websites and plays a large part in CMS platforms. That’s not going to change quickly.

History of Content Management Systems and Rise of Headless CMS

Development Team

Drupal 8 and/or 9

Drupal 8 will be end-of-life by Nov 2021, as it’s completely based on Symfony 3 (which has an end-of-life date in November 2021). And after that time, there won’t be any support for Drupal 8. So everyone needs to migrate to Drupal 9 by then.

Drupal 9 will be released in 2020. It will be based on Symfony 4 or 5. If we decide to migrate to Drupal 8 now, we need to migrate again to Drupal 9 next year. For Drupal 7 also, it will be supported until Nov 2021. And even after that, they will probably launch some commercial long term support.

In my understanding, it’s better to stay in Drupal 7 for now and migrate to Drupal 9 once a stable version is released by mid-2020.

Drupal 7, 8 and 9
Plan for Drupal 9

Headless Drupal

For headless Drupal, if we stick to Drupal 7, we need some 3rd party contributed modules to enable RESTful services.

At front end, we need to pick up among any of the famous JavaScript libraries like React or Angular or Vue. In the following image, headless Drupal is explained. In our case, there isn’t single source of database of content, and we have another intermediate webservice server to get the data.

In that case, one can think of eliminating the controller from Drupal/PHP, and call the webservice server directly from JavaScript library. But in that case, session management and user management needs to be handled from our own code, as long as we need to check the security aspects. That will be a big extra overhead.

Diving into decoupled Drupal 7 with React and Redux
A Short Introduction to Headless Drupal
What is Headless Drupal?


In my opinion, Drupal (any version) + Headless + Cloud together won’t be a problem.