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 mark.ie 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.