Note: This article was last updated on October 21, 2019 and may contain outdated information.
This article explores how agencies can modernize aging ExpressionEngine websites by integrating Gatsby, a React-based static site generator, to build new sections without relying on outdated ExpressionEngine templates.
What is Gatsby, and why?
Gatsby functions as “a React powered framework that allows you to pull in data from anywhere and build flexible and modern templates.” This approach works particularly well for microsites, landing pages, or campaigns tied to ExpressionEngine backends.
The article references The Green Parent’s subscription microsite as a case study, where the team needed data from both ExpressionEngine and Shopify but found building traditional ExpressionEngine templates impractical for modern development workflows.
Part One: Creating the Data Source
An ExpressionEngine template must output JSON containing the necessary data. The example provided shows a template that extracts free gifts, subscription benefits, testimonials, and magazine issue information, formatting it as structured JSON suitable for Gatsby consumption.
This step requires ExpressionEngine expertise, but afterward, front-end developers unfamiliar with ExpressionEngine can take over the project.
Part Two: Consuming the Data
Gatsby uses GraphQL to query data sources. While ExpressionEngine lacks native GraphQL support, Gatsby’s gatsby-nodes.js file can fetch the JSON feed via Axios and convert it into GraphQL nodes, enabling seamless data integration across the static site.
Conclusion
JAMstack tools like Gatsby “can give new life to ExpressionEngine, especially within teams that don’t have an appetite to build more ExpressionEngine templates.” Benefits include CDN hosting via Netlify and simplified scaling without complex caching concerns.