Renewing ExpressionEngine with Gatsby
Explore how agencies can modernize aging ExpressionEngine websites by integrating Gatsby to build new sections without relying on outdated templates.
If you still run an ExpressionEngine site and nobody fancies writing another EE template, Gatsby is a useful way forward. You keep EE as the content store and build new sections — microsites, landing pages, campaigns — as a React-powered static site on top.
Why Gatsby?
Gatsby is a React framework that pulls data from anywhere and renders it as a static site. That fits EE well: the CMS keeps doing what it does, and the front end moves on.
We used this approach on The Green Parent's subscription microsite. The content sat in EE and Shopify, and nobody wanted to build more EE templates to hold it together.
Part one: the data source
Build an EE template that outputs JSON with the data you need. On Green Parent that was free gifts, subscription benefits, testimonials, and current magazine issue — all serialised as JSON for Gatsby to consume.
This part needs someone who knows ExpressionEngine. Once it's in place, front-end developers can take the project the rest of the way without learning EE.
Part two: consuming the data
Gatsby queries data via GraphQL. EE doesn't speak GraphQL natively, so in gatsby-node.js (note: the file is gatsby-node.js, not gatsby-nodes.js) fetch the JSON feed with Axios and turn each record into a GraphQL node. From there it looks like any other Gatsby data source.
Why bother
Gatsby can give EE a useful second act, particularly for teams that don't want to build more EE templates. CDN hosting via Netlify, fast pages, no caching plugins to configure.
