Combined Upgrade to Decoupled Drupal with Gatsby Frontend


Marky Conroy, the Director of Development at Annertech and frontend lead for LocalGov Drupal, has published a blog post detailing the steps he took while upgrading his website to the latest version of both Drupal and Gatsby. Read the article here.

A headless Drupal typically has no front end, and all services are served through API calls, which is suitable for a platform-agnostic approach as each platform can get a separate front end based on the needs. But in a wholly decoupled system, there might be a combination of a backend CMS and a frontend technology that serves as the universal front end. Drupal + Gatsby is a prevalent combination of this genre.

Gatsby 5 debuted five months prior, and now Drupal 10 is out. Mark's website uses a decoupled architecture with Drupal as the backend and Gatsby as the front end. The key is to decouple the front end from the backend and update one without affecting the other.

Gatsby 5 needs Node 18, React 18, Gatsby Image 3, and lots more. There were a couple of challenges on the way, and Mark has documented it pretty well.

With Drupal 10 removing Classy from the basic theme on which Mark's site depended, the move from Drupal 9 to 10 also proved tricky.

It is an interesting case study, and reading through it will raise the question of whether it is worth opting for a decoupled architecture for a simple website like Marks.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please let us know in the comments below and we will try to address the issue as best we can.

Organizations Related to the Story

Advertisement Here
Advertisement Here

Latest Opportunities

Upcoming Events