An Iterative Approach To Decoupling Your Existing Drupal Site With Gatsby

While there are many advantages to decoupling the front-end of an existing Drupal site, any large scale overhaul can be time consuming and introduce risk. Taking an iterative approach can instead make it possible to prove that decoupling has clear value and also ensure that changes to the development, content editing, and deployment process fit the needs of your team.

This session outlines an iterative approach to decoupling Bounteous’ existing Drupal site with Gatsby; starting with only two pages, but laying the groundwork for any page on the site to be rendered primarily by either React or Twig. We’ll focus on three main areas that made this iterative approach possible:

Configuring a site to serve a subset of decoupled pages
* The necessary server configuration
* Configuring gatsby-source-dupal to only source the data necessary for your decoupled content
* Creating a utility to map Drupal components to React components in flexible layouts

Workflow changes
* Adjustments to your build process
* Providing a preview experience for decoupled pages
* Automating builds based on content updates

The blurring line between front ends
* Syndicating React components to Drupal
* Making GraphQL Data available to React components outside of Gatsby
* Making Drupal markup and components available to Gatsby’s GraphQL API
* Managing the divide between front ends during future design discussions