The next step was to alter our React Webpack configuration to pull the configuration from Contentful and build this into a replacement for the config.json file (We are huge fans of the way that Gatsby statically compiles, as is a perfect fit for our traffic profile).

We created a script to get the configuration from Contentful and then write the cart.json file ready for Webpack to build it. We then edited our applications start and build scripts to run the fetch script before a build or develop command.

create react app build script with the fetch cart configuration command now at the top

The next step was to add some configuration to automatically re-fetch the carts and look for differences every 10 seconds.

Automatic reloading of carts

We could now change a cart in Contentful and see it change automatically within the 10 seconds that we defined. The big question now was how could we do this in a preview environment that our content editors could easily use, seeing their changes immediately.

So, first thought was we could use EC2 running a node server. However, this goes against our philosophy of managing as few a servers as possible if we really don’t need to. We settled on a really simple (and free) solution in Heroku.

We created a Procfile in the base of our react application and then configured Heroku to automatically deploy off of our master branch from the Contentful preview API.

Our super simple application Procfile

The end result was that we were able to edit our frontend in near-realtime prior to publishing content, giving editors immediate feedback.

Editing content in realtime on our donation platform

After this, we updated our CI/CD pipeline to include the new environment variables and fixed all of our unit and integration tests.

We then needed to find a way to trigger our pipeline whenever content edits happened. We use Concourse and found this repository, that would check Contentful constantly and trigger the pipeline whenever there was an update. Unfortunately, it was looking at revisions and did not seem to be getting the latest updated content, so we forked it and made the changes that we needed in this repository to look at the latest updated data and use the timestamp to trigger to a build.

All we needed to do then was to add a webhook to Contentful to trigger the resource change and we were good to go.

We also needed to add another pipeline to backup our Contentful configuration and also to move content type configuration from a Contentful Staging Environment to its master environment. We did all this with a couple of Concourse tasks and the awesome Contentful CLI tool.