Jump to Content
Google Cloud

How to build a website on Google App Engine using a headless CMS like ButterCMS

September 11, 2017
Sujoy Gupta

Solutions Architect, Google Cloud Platform

Are you a web developer who creates websites and a different team, usually the marketing team, manages the content? Traditionally, there have been two ways to do that — neither of them great.

On the one hand, you could build the website using any number of Content Management Systems (CMS) and their arcane plugins. The problem with this approach is that you’re stuck having to maintain two systems — the CMS and the web framework you used to develop the main website.

Or, you anticipated that problem and roll your own homegrown CMS. The problem there is, obviously, even if you summoned your Ninja skills to replicate the features of a mature CMS in short order, you're now running two systems — for the website and the one for the CMS. A headless CMS lets you sidestep this dilemma entirely. It retrieves content using simple API calls, making it easy to integrate that content into your website while leveraging your existing style assets. Compare that to a traditional CMS where you have to rely on templates and plugins to assemble webpages. By decoupling the content from the website, your marketing team can now update the content without you needing to change templates and redeploy the site every time.

Google App Engine is a great complement to this headless approach, since it makes it easy to deploy an app built with any modern web framework and scale it automatically. This lets you focus on writing code rather than on managing infrastructure. When the content goes viral, you get to sit back and watch the site scale automatically, and enjoy the accolades on a job well done.

ButterCMS ("Butter") is a headless CMS delivered as Software as a Service (SaaS), and it’s a great option for building your next website in this way. Butter has client libraries for most popular web frameworks along with a REST API and an easy-to-use UI for content editors. Brandon Nicoll, a software engineer at Butter, recently wrote a step-by-step guide showing how to create, manage and integrate content for an example online store using Node.js, and then deploy and scale it with App Engine.

The tutorial shows you how to manage the content for the online store in Butter, and later retrieve it using the Butter API. It illustrates a good practice of encapsulating the implementation details of communicating with Butter in a separate content service. The website communicates with this content service to retrieve and render the content.

https://storage.googleapis.com/gweb-cloudblog-publish/images/Screen2BShot2B2017-09-112Bat2B1sa5o.max-700x700.PNG

This design makes the system extensible and maintainable. For example, you could combine additional content from other sources or swap out Butter entirely for some other system, simply by changing the content service. Both the example website and the content service are deployed with App Engine.

It’s an elegant solution that shows how to use your existing web development skills, and impress your web developer colleagues by quickly building a complex, content-rich website designed in a service-oriented fashion. Your marketing colleagues, meanwhile, get a fully featured portal to manage their content, and see it scale automatically as the website goes viral. Happy developing!

Posted in