An AngularJS & Contentful Starter Kit

Awhile back, our own John Winter had an article published in Forbes introducing some of the benefits of a headless CMS. I’ve been hearing quite a bit about some of the new “content as a service” providers so I thought I’d jump in and give one a go. I decided to throw together an Angular application which had some example code pulling and displaying content from the headless content manager. But first, I need a headless CMS to experiment with.

I went with Contentful and was happy that I did. It has a free developer plan assuming some basic attribution, they maintain all of the infrastructure – hence why we call it “content as a service” and it had some really solid content modelling options. You’re charged based on the size of your business, with several tiers available. It was super easy to get setup, and I really like the interface.

Contentful Introduction

Contentful is a “Content as a Service” provider which basically means they are a service provider which sells content manager “spaces” allowing you to enter your content, and then expose it over public APIs. You log into the GUI interface for interacting with your content through a web application hosted by Contentful, which uses their public content management API available to us. You host nothing, and pay a monthly subscription to continue editing and accessing your content.

To get started with Contentful, head over to their site and sign up for a developer space. No credit card required.

Note you need to provide attribution with an image in your application if you are not paying for the developer plan and deploy it anywhere.

Interacting with Contentful

Contentful provides four APIs for interacting with your content management space:

• Content Delivery – read access to your content
• Content Management – write access to your content
• Content Preview – allows previewing draft content
• Images API – allows resizing & cropping images

The entire “content as a service” premise means that content is highly available over public APIs, and can be easily consumed across all sorts of different channels. The set of read / write APIs means that not only is the content highly available, but we can also interact with the content with write permissions.

A few of my favorite features so far:

• Software development kits available for most popular languages
• Content model supports storing JSON objects for custom data storage
• Linking content types is super intuitive and easy to traverse
• Input validation is really thorough
• APIs are straight forward with great tools and examples provided
• The documentation is also laid out very well

The Starter Kit

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 MVC framework – but the same basic principles of constructing web applications using something like Contentful will apply to all of the other frameworks out there.

When you download the starter kit, it will be pointing to my Contentful space which has several content types as an example. You can feel free to either experiment with the web app code & Contentful content from my personal space, or most likely you will want to create your own space and update the configuration API keys.

The Angular stack looks like this:

• ui router – popular routing framework for AngularJS
• angular-contentful – library for pulling Contentful content
• Bootstrap 4  – front-end framework for building responsive apps

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.

It’s pretty simple – plain old Javascript with no compilation required. It’s quite a simple application to build with due to livereload. Whenever you make a change whether it be SASS files, javascript or HTML – your browser will be reloaded in real time.

Getting Started

If you want to check it out, clone or fork my GitHub repo here.

---

Get the latest industry news, articles, and updates.
(No junk. Just the good stuff.)

---