Headless CMS with WordPress and NuxtJS - The Anyline Story - Part I

Do you want to know how a larger project can be implemented with WordPress in combination with NuxtJS as a headless CMS? We'll show you what we've learnt, what benefits there are and what might need to be improved.

In this article, I would like to briefly report on the architecture of one of our current projects, which was coordinated and implemented together with Anyline and IBM.

For the Anyline project, we opted for a headless CMS variant as we wanted to provide a statically generated website.

The infrastructure

We use the IBM Cloud for the infrastructure. WordPress runs on a VM that was configured on the basis of best practices. A cloud storage bucket is used for the front end because the entire website is based on static HTML pages and therefore legitimises the simplest form of hosting. This approach brings significant advantages in terms of page speed and scaling.

This architecture also gives us the ability to scale easily and quickly:

With this architecture, we now also have the ability to scale easily and quickly: Adding buckets, load balancers, activating CDNs, making optimum use of caching etc. are all efficient levers for further optimisation.

Frontend - NuxtJS

The decision was made in favour of NuxtJS for the implementation of the frontend, as this framework supports the static display of websites including subpages. This was a logical and simple choice for us, as we have been focussing on VueJS for some time.

Data from WP to NuxtJS

WordPress & NuxtJS are linked via the Rest API, which is regularly extended and customised with standard endpoints. With this approach, we can generate all pages of the website statically in advance by passing a list of URLS to NuxtJS. We have created a separate API endpoint precisely for this purpose.

Publishing new content

In the production environment, we work with webhooks and our CI/CD pipeline in order to publish updated and new content as static HTML pages. So as soon as the editorial team changes content, our automated workflow is started, which in turn deploys the new, statically generated pages to the IBM Cloud, ensuring that the latest content is available.

The graphic below shows the workflow in a simplified form.

Conclusion

So far so good. The topic of headless is more topical than ever. And with Anyline, we also have a project in the pipeline that shows that a lot is still possible in terms of scope and complexity.

In the next few blog posts, we will look at the individual areas and topics that need to be considered in a headless setup, especially in combination with WordPress and NuxtJS.