AngularJS and Contentful Kickstarter


I’ve heard all the buzz lately around the whole headless category of content management systems, so I figured it’d be a good opportunity to try something new. I decided I’d go with Contentful based on positive feedback I’d heard in the past, the simplicity in setting up a developer account and the really thorough documentation that they have available online.

As I work on figuring out this whole headless space I’m going to be putting together an AngularJS starter kit so you can quickly download and run the project – pulling live content from my Contentful space until you’re ready to create your own account and begin setting up content models. It’s going to be built on AngularJS using Bootstrap 4 and some of my preferred AngularJS libraries. I’m hoping that it’s something people can pick up and immediately begin playing with with little background .

What’s a headless CMS?

Incase you’re unaware, headless content management systems are an entirely separate category of CMS. They’re called headless because we’re chopping the head of the CMS off, the “view” aspect, which is the whole notion of tying content to presentation. Headless CMS only know content; they expose the content over the APIs, but they have no idea who or how the content that’s requested is going to be used. In contrast with standard CMS’, which typically allow editors to tie together pages with either static or dynamic content.

Contentful describes their service & platform as the following:

Contentful is content infrastructure. Our platform lets you create, manage and distribute content to any platform. Unlike a CMS, we give you total freedom to create your own content model so you can decide which content you want to manage. We provide you RESTful APIs so you can deliver your content across multiple channels such as websites, mobile apps (iOS, Android and Windows Phone) or any other platform you can imagine (from Google Glass to infinity). With an uncluttered user interface, Contentful is an efficient tool for creating and managing your content online, either alone or in team. Assign custom roles and permissions to team members, add validations depending on the kind of content you have to insert and add media such as images, documents, sounds or video.

Which sounds pretty cool right? They’ll expose all of our content over simple but flexible RESTful APIs which we can consume in any web application quite easily. Furthermore, it provides things like CDN functionality out of the box for serving assets, and more. All of this while being able to start modelling relationships in minutes – for free. It sounded like a great place to start on headless for me – so that’s how I settled on Contentful.

Content as a Service

Content as a service means they do all of the hosting – so no infrastructure concerns for us to worry about. They even have flexible pricing options for all sizes of business and have been picking up a lot of big projects lately so it seems like a really cool option right out of the gate.

I think one of the biggest things to grasp coming from a content management system background where content and presentation are so closely tied is the trade-offs that you make.

  • Page organization becomes much more well structured.
  • Content editors are not moving around content on a page, they are creating and publishing pieces of core content.
  • It is up to the web apps to decide how to display content in terms of ordering (sorting), how many pieces of content are shown – etc.

AngularJS Stack

I’m building an Angular application which I will share on my GitHub which I’m hoping will be a good starting point to building applications with Contentful. I used Angular because it’s something I’m comfortable with and the point of the exercise wasn’t necessarily picking up a new Javascript, however the same basic principles of constructing web applications using something like Contentful will apply to all frameworks out there.

The Angular stack will look like this:

I’m going to use the following node package:

  • npm for package management
  • gulp for running tasks
  • bower for installing packages
  • sass for precompiling styles
  • livereload for rapid development
  • .. and some other packages to minify, reduce html etc.

Building the web application

I’m going to build a mock Apple store with a couple of core content models:

  • Products
  • Stores
  • Users

And I’m specifically interested in how setting up the content relationships will work. I’m going to consult the basic sample requirements:

  • Products should maintain relationship with other related Products
  • Products can be grouped into Product Lines
  • Stores can maintain list of Products available in store
  • Limited time offers can be setup for a Product
  • All content types will have associated media

I’ll have some other posts outlining the content modelling options that we have in Contentful and how I made out. I come from an enterprise CMS background so I’m curious to see how some of the “content as a service” headless tools compare from a pure content modelling perspective.

Project Details

You can find the project on my GitHub account.

And you can find a demo of the application here: