eXXcellent solutions tech blog logoabout

Strapi Headless CMS

Cover Image for Strapi Headless CMS
Posted
by Burkhard Hoppenstedt

Motivation

Many people are familiar with the term Content Management System (CMS). The most famous representatives of these systems are Typo3, Wordpress and Joomla. In general, the idea of these systems is to simplify content maintenance for the user. Hereby, the mentioned CMS systems separate content from code. Therefore, the content creater does not need to be familiar with programming concepts. This article is about strapi, which is a so-called headless CMS. In contrast to the previously mentioned CMS systems, strapi does not offer an included page rendering. Instead, strapi offers a REST interface for custom data types, which are administrated via a web application. Let's think of the following scenario: Your customer is having a website with dynamic content, such as project announcements. The customer wishes to update the content all by himself. To offer a comfortable solution to the customer, you provide a strapi interface with predefined data types (1). This data type could consist of a title, a description text and an image. In case of a new project announcement, the customer logs into the strapi admin view (2) and inserts this content via the predefined components (3). Strapi is a powerful tool, since the custom data types can be defined in a generic way by combining basic components (e.g, text, image, slider, or even content from formated text) to a meaningful object. Granting access to these data types via REST is just a one click process (4). Finally, the defined data is available as JSON objects via the previously enabled URI. (5).

Strapi Workflow;

Technology

Strapi is an open source project and written in JavaScript. The authors denote blogs, brand websites, and catalogue website as the main use case for strapi. To start developing individual APIs via the web interface, the project can be either started by cloning the project from github and starting it via YARN, or by launching a docker container.

docker run -it -p 1337:1337 -v `pwd`/project-name:/srv/app strapi/strapi

After the setup, an admin interface is availabe on localhost:1337/admin.

Instant Updates with Webhooks

In some use cases, it might be essential to display the changes in strapi immediately in a web application or app. Therefore, it is possible to send a notification via webhook to a registered application. Imagine the following setting: A customer operates many displays (e.g. in a store) and wants to make an announcement. Then, the customer logs into strapi and changes the content. After these changes, a server is informed about the new information. If all displays are registered at the server using websockets, the server is able to broadcast the information and update all displays instantly.

Strapi Webhooks;

Conclusion

Altogether, I think of strapi as a very flexible solution for a variety of use cases. It is easy to deploy and offers the possibility for the customer to participate in the content management process.

Image sources

The cover image used in this post was created by Engin Akyurt under the following license. All other images on this page were created by eXXcellent solutions under the terms of the Creative Commons Attribution 4.0 International License