A headless CMS?

2018-07-30T00:00:00+00:00

Who is this for?

Have you ever been in a place where you are building a website, perhaps, like this one, a static site (maybe using Jekyll or Hugo, or maybe handcoding even HTML/CSS directly is how you roll, because you hate yourself that much!). You then realise that it would be really handy to be able to talk to a database server, after all.

Or maybe you’re starting from scratch, need a data backend, but need something fast. Or perhaps you just don’t like writing server-side code, one bit!

Enter Cockpit.

What is it?

Cockpit is an API-driven ‘headless’ content management system.

Headless?

Cockpit does not enforce, or even offer any form of visual representation or site structure, out of the box, you will not get a ready-to-publish site, like you may be expecting from a CMS (Thinking along the lines of Drupal, Joomla, Wordpress etc.). What you will get is an easy to manage control panel, where you can define and manage content structures, and the content contained in them.

From here, it allows you complete control over what to do with your data.

There are 2 ways you can access your data from here:

If you are building a server-side application, it does offer a convenient PHP API. Just (to give one example)

require_once('cockpit/bootstrap.php');
cockpit('collections')->find('some_collection');

will return an array of every item it can find, giving you acces to all the content that way (There are of course filters, as well). However, this approach does not currently seem to be terribly well documented, and most of what I have gathered about using it has had to come from reading the code (Thankfully, it is not hard code to read!).

Thankfully, there is another way. And this is where the beauty is. Out of the box, cockpit exposes a REST API, which, coupled with completely granular token-based access control means rapid and easily managed backend API consumable from any language that supports HTTP, all from a backend which will install onto any PHP enabled webserver in 30 seconds, and never require and server-side code (Unless you want to, of course!)

Example:

Installation takes probably around a minute, depending on your choice of backend (You can use either SQLite or MongoDB, with SQLite running straight out of the box). In roughly 30 seconds, I am able to create the data structure (including wysiwyg content fields and ‘links’ to other collections, among loads of other options) and a specific API key to use the following code (Using coffeescript & jQuery):

Show [[ !showCS ? 'Coffeescript' : 'Javascript' ]]

1
2
3
4
5
6
7
8
9
10
11
token = 'a9d6836c5e589192bbb01a7c13aeb6'
endpoint = 'https://api.thomaslucas.co.uk/cp/api'

$.get
    url: "#{endpoint}/collections/get/example_collection"
    data:
        token: token
        populate: 1
        simple: true
.success (response) ->
    $('#code_return_1').find('pre').text(JSON.stringify response, null, 4)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function() {
var endpoint, token;

token = 'a9d6836c5e589192bbb01a7c13aeb6';

endpoint = 'https://api.thomaslucas.co.uk/cp/api';

$.get({
  url: endpoint + "/collections/get/example_collection",
  data: {
    token: token,
    populate: 1,
    simple: true
  }
}).success(function(response) {
  return $('#code_return_1').find('pre').text(JSON.stringify(response, null, 4));
});

}).call(this);

Enabling me to focus on the frontend implementation and design of my site/app, without having to delve too deeply into the backend until I need to. So we can take our development one step at a time, letting it get complex on our own terms. Phew.

Javascript may finally be enjoyable!

2018-07-29T00:00:00+00:00

I’ve never been a particular fan of Javascript. It has always been a ‘necessary evil’, completely unavoidable if intending to do anything client-side in the browser.

Starting from PHP, it wasn’t so bad, but then I began to get spoiled by whitespace-structured languages like Python, I revelled in not being lost in a constant sea of curly brackets and semi-colons.

With that in mind, I decided to try a Javascript pre-processor I had heard a little about (CoffeeScript). I had avoided them in the past, because the sites I had worked on tended to be server side projects, so the extra overhead and pipelining required to get it all running seemed, for my particular uses, overkill.

I have been building this site, however, using Jekyll, a static site generator, and so, since the process there involved a single build, serve statically model, that overhead no longer seemed relevant.

And oh, have I been missing out.

Not only do I get an indentation delineated structure, and newlines ending statements, but, among so many other great features, (mostly ‘stolen’ from other languages), my absolute favourite feature of Python: The list comprehension!

Never will I have to suffer having to write (Supposing I want the list $\left[ x^2 \right]_{x=0}^{10}$ ):

var x, i, results;
results = [];
for (x = i = 0; i <= 10; x = ++i) {
    results.push(x ** 2);
}
// results == [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

when

coffee_results = ( x**2 for x in [0..10] )
# coffee_results == [0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100]