Headless CMS mit strapi

Veröffentlicht am von

Was ist ein Headless CMS?

Ein klassisches CMS (Content Management System), wie etwa WordPress oder Joomla, ist ein monolithisches System, welches aus Front- und Backend besteht. Dabei dient das Frontend zur Darstellung der Inhalte im Browser und das Backend zur Verwaltung der für die Webseite wichtigen Informationen. Bei einem Headless CMS wird auf das Frontend verzichtet, somit verfügt es nur über ein Backend. Über das Backend werden nur die Inhalte verwaltet und nicht wie bei einem klassischen CMS das Design des Frontends. Verbunden werden Frontend und Backend bei einem Headless CMS über eine API und entsprechen somit dem Ansatz der Microservices. Die Vorteile eines Headless CMS sind die Folgenden:

  • Die unbegrenzte Anzahl von Frontends. Die Inhalte können also nicht nur auf einer Webseite, sondern etwa auch in einer App veröffentlich werden.
  • Das Frontend kann flexibler gestaltet werden, da man frei von jeglichen Frameworks oder Systemen entwickeln kann.
  • Microservices sind performanter als monolithische Systeme, somit kann ein Headless CMS schneller sein als viele klassische CMS.

Was ist strapi?

Strapi ist ein 2016 in Frankreich gegründetes Unternehmen, welches das gleichnamige Open Source Headless CMS anbietet. Die Software von Strapi richtet sich in erster Linie an Frontend Entwickler, denen durch das System das Entwickeln eines Backends extrem erleichtert werden soll. Strapi kann dazu verwendet werden, sowohl Inhalte als auch Strukturen für Inhalte zu schaffen. Auch verfügt es über einen Medien Manager, welcher zur Verwaltung von Bildern und Daten dient, als auch über ein Rechte System. In seiner Grundversion ist Strapi kostenlos. Für Erweiterungen und Support können spezielle Pakete erworben werden. Als Umgebung dient Strapi node.js. Kompatibel ist es mit verschiednen Datenbank Systemen wie etwa MySQL, SQLite oder MariaDB. Strapi liefert jedoch auch schon fertige Docker Container, mit denen die Software in wenigen Schritten gestartet werden kann. Auf die Daten des Systems kann über eine Rest API zugegriffen werden. Auch ist die Erweiterung mithilfe von Plugins möglich.

Das Konzept

Der Content-Types Builder ist eine der wichtigsten Funktionen in Strapi. Damit lassen sich die Datenstrukturen, also die Content-Typen, anlegen. Diese können dann mit Inhalten befüllt werden. Der Content-Types Builder richtet sich somit an den Entwickler der das CMS einrichtet und die Struktur für die Inhalte festlegt. Grundsätzlich wird zwischen zwei Content-Types unterschieden: Collection-Types und Single-Types. Collection-Types sind Inhalte von denen es später viel Instanzen geben wird, etwa Artikel auf einem Blog oder Produkte in einem Shop. Single-Types sind für Strukturen die nur einmal instanziiert werden, etwa die Inhalte einer Startseite. Die Typen lassen sich aus vielen weitern Datentypen zusammenbauen wie Texten, Medien und strukturierten JSON Daten. Auch lassen sich Beziehungen zwischen den Datentypen herstellen. In der Abbildung sind die Felder aus denen sich die Datentypen zusammensetzen lassen zu sehen:

Strapi Types

Collection-Types und Single-Types können nach ihrem Anlegen mit Inhalten befüllt werden. Das Rechte System von Strapi erlaubt hierbei zu unterscheiden, ob ein Nutzer die Datentypen anlegen und editieren kann oder ob er nur Instanzen davon erzeugen und diese bearbeiten kann. Nutzer die nur Inhalte bearbeiten können sind Editoren. Super Admins hingegen können auch die Datentypen verändern und Autoren haben nur Zugriff auf ihre eigenen Inhalte. Bei dem Befüllen der Datentypen mit Inhalten ist die Media Library ein nützliches Tool worüber sich Bilder hochladen und einbinden lassen.

Möchte man von außen, etwa von einem Frontend, auf die über Strapi veröffentlichten Inhalte zugreifen, so geschieht dies über API-Endpoints. Strapi legt für jeden Typ eine Adresse an, die dem Namen des Types entspricht. Über diese Adresse können dann alle Inhalte von diesem Typ abgerufen, bearbeitet, gelöscht oder neu angelegt werden. Damit der Endpoint jedoch von außen ansprechbar ist, muss dieser erst für die REST-API freigeben werden.

Strapi liefert bereits eine Benutzerverwaltung für das Backend mit, auch ein Authentifizierungssystem für ein mögliches Frontend ist implementiert und die API-Endpoints können für verschiedne Nutzer freigeben werden. Möchte man Strapi erweitern, so können dafür Plugins geschrieben werden oder bereits Existierende über den Marketplace geladen werden.

Tutorial

Strapi Installieren (Docker)

Strapi lässt sich mit Hilfe von yarn oder npm schnell und einfach installieren. Da der Prozess jedoch mit Docker einfacher ist und nichts am eigenen System ändert, wird hier kurz dieser Weg vorgestellt.
docker run -it -p 1337:1337 -v `pwd`/<PROJEKT ORDNER>:/srv/app strapi/strapi --rm
Damit startet sich ein Docker Container in dem Strapi läuft und die Daten in ihrer SQLite Datenbank speichert. Die Inhalte von Strapi werden dann in dem angebenden Projektordner abgelegt. Sobald der Server läuft kann Strapi über folgende Adresse aufgerufen werden:
http://localhost:1337
Man wird dann durch die Ersten Schritte zum Anlegen eines Admins geleitet.

Einen Content-Type anlegen

Hat man Strapi erfolgreich installiert und einen Administrator eingerichtet kann man über den Content-Types Builder Datentypen anlegen. Dafür ruft man den Content-Types Builder in der linken Seite auf, hier kann man sich dann entscheiden welche Art von Content-Type man anlegen möchte. Collection-Types bieten sich für alles an, was mehrfach vorkommt und Single-Types nur für einmalige Datentypen.

Legt man einen neuen Typ an, wird man zunächst nach dem Namen gefragt, welcher auch die Adresse über die der Typ abrufbar ist bestimmt. Hat man sich für einen Namen entschieden kann man den Typen um die verschiednen Eigenschaften erweitern die er besitzen soll. Hat man den Typ erfolgreich angelegt, taucht er in der linken Spalte auf und kann dort ausgewählt werden, um ihn mit Inhalten zu befüllen. Der Super Admin ist in der Lage den Datentyp später noch mal anzupassen und auch seine Bearbeitungsoberfläche zu verändern.

Möchte man einen Typ von außen für die Öffentlichkeit zugänglich machen, so muss man diesen in den Einstellungen freigeben. In den Einstellungen findet sich unter „Users & Permissions Plugin“ der Punkt „Rollen“. Hier muss „Public“ ausgewählt werden. Unter diesem Punkt lassen sich alle Typen für „Public“ freigeben und auch bestimmen, welche Operationen „Public“ nutzen darf. Die Abbildung zeigt, wie für den Content-Type „Gallery“ eine Freigabe für die Gruppe „Public“ erteilt wurde. Diese bestimmt, dass die Gallery-Einträge von außen aufrufbar sind.

Strapi Types

Die API nutzen

Ist ein Type für „Public“ angelegt und freigeben kann er über die REST API aufgerufen werden. Dabei gibt Strapi die Inhalte des Typen als JSON zurück. Das JSON kann dann beim Client verarbeitet und dargestellt werden. Für einen Collection-Type sind die Aufrufe wie folgt:

Method Path Description
GET URL/{content-type-name} Liste der {content-type-name} Einträge
GET URL/{content-type-name}/:id Spezieller {content-type-name} Eintrag
GET URL/{content-type-name}/count Anzahl der {content-type-name} Einträge
POST URL/{content-type-name} Erzeugt neuen {content-type-name} Eintrag
DELETE URL/{content-type-name}/:id Löscht {content-type-name} Eintrag
PUT URL/{content-type-name}/:id Aktualisiert {content-type-name} Eintrag

(Bild)Quellen:

Vortrag:

Vortragsfolien