CMSstash

Das Headless CMS Directus

Autor: Sebastian Schürmanns

Directus gehört zu den aufsteigenden Headless CMS, ist aber im Unterschied zu den üblichen Headless CMS kein kommerzieller SaaS-Service, sondern ein Open Source System zum selber hosten. Damit bietet Directus eine sinnvolle Headless-Alternative für alle, die unabhängig von externen Diensten bleiben wollen und mit den Standard-Technologien PHP, JavaScript und MySQL arbeiten möchten. Ergänzend kann Directus auch als gehosteter kostenpflichtiger SaaS-Dienst genutzt werden.

Das Headless CMS Directus

Wie alle Headless CMS ist auch Directus kein vollwertiges Content Management System, sondern konzentriert sich auf die Speicherung, Verwaltung und Auslieferung von Inhalten. Dafür liefert Directus eine Verwaltungs-Oberfläche für die Konfiguration von MySQL-Datenbanken, eine moderne und flexible Autoren-Oberfläche für die Verwaltung von Inhalten sowie eine API zur Anbindung externer Systeme.

Job-Angebote für CMS-Experten

CMS-Experten wie Web-Entwickler, Produkt-Owner oder Projekt-Manager sind heiß begehrt. Daher bietet CMSstash in Zukunft ein Job-Board an. Job-Board ansehen

Ein Headless CMS wie Directus wird in erster Linie für die Erstellung von Content Services (CaaS) und Content-APIs verwendet, mit denen zum Beispiel moderne Frontends wie Angular oder Vue bedient oder verschiedene Ausgabekanäle wie Mobile-Apps, Webseiten oder andere Applikationen beliefert werden können.

Directus wird seit ca. 2011 entwickelt. Gründer und Lead-Entwickler ist der in New York lebende Ben Heynes, die Marke Directus gehört den Ranger Studios von Heynes.

Mit Directus starten

Directus ist in erster Linie ein Organisations-Tool für Datenbank-Inhalte und unterscheidet sich in der Handhabung deutlich von anderen Content Management Systemen. Nach der Installation, die mit einem einfachen Wizzard unterstützt wird, erscheint zunächst eine leere Oberfläche. Um Inhalte zu erstellen, muss der Admin in den Administrations-Settings erst die gewünschten Datenbank-Strukturen anlegen.

Tabellen-Strukturen anlegen mit dem Headless CMS Directus

Was zunächst etwas umständlich wirkt, entpuppt sich schnell als Kern-Feature des Systems: Während Content Management Systeme wie WordPress die Datenbank-Struktur schon bei der Installation erstellen und damit unflexibel vorgeben, kann man bei Directus die Datenbank exakt an die Anforderungen des Contents anpassen. Dabei werden die Tabellen über eine nutzerfreundliche Oberfläche mit einfachen Klicks angelegt und konfiguriert. Die Eingabe-Formulare für die Autoren werden von Directus automatisch entsprechend der Tabellen-Konfiguration generiert.

Bei den Formular-Feldern gibt es eine breite Auswahl: Angefangen von Text Input, Checkboxes und Dropdowns bis hin zu WYSIWYG-Editoren, Tags, Maps, Slidern oder Color-Pickers. Außerdem können neben den Standard-Buttons "Draft" und "Published" noch beliebige weitere Status-Buttons wie Review oder Rejected definiert werden. Es sind auch zahlreiche Detail-Einstellungen möglich, zum Beispiel, ob Datenbank-Tabellen im Autoren-Interface versteckt werden sollen oder ob es sich um eine einzelne statische Seite handeln soll.

Sprich, man kann mit Directus für jedes beliebige Content-Modell und jeden denkbaren Anwendungsfall mit wenigen Clicks eine Datenbank mit einem individuellen Autoren-Interface anlegen. Entwickler können auf diese Datenbank anschließend per API zugreifen und auch hier kann der Admin über die "Permissions" für jede Tabelle individuell festlegen, ob die Inhalte über die API angesehen, hinzugefügt, geändert oder gelöscht werden dürfen.

Grundsätzlich ist eine individuelle Modellierung von Inhalten mit einer entsprechend Individuellen Autoren-Oberfläche bei vielen modernen CMS möglich. Beispiele sind Craft-CMS oder Flat-File-Systeme wie Statamic oder Grav. Allerdings ist die Anpassung bei Directus extrem einfach und die Bereitstellung der API-Funktionen sehr bequem. Wer also kein Frontend benötigt oder eine andere Technologie für die Generierung der Webseite verwenden will, findet mit Directus ein sehr ausgereiftes und nutzerfreundliches Tool. Zumal Directus nicht auf Webseiten beschränkt ist, sondern für jede Form der Web-Applikation verwendet werden kann.

Directus für Autoren

Die Autoren-Oberfläche von Directus wird vom Administrator für den jeweiligen Anwendungsfall individuell zusammengestellt und passt im Idealfall immer exakt zum jeweiligen Content-Modell. Standardisierte Formular-Wüsten mit überflüssigen Eingabefeldern oder versteckte Formulare für spezielle Inhalte sollte es daher bei einer richtigen Konfiguration nicht geben.

Individuelle Autorenoberfläche bei dem Headless CMS Directus

Dennoch setzt natürlich auch Directus für die Autoren-Oberfläche einen Rahmen:

Für Texte stehen ein Markdown-Editor, ein vollständiger WYSIWYG-Editor und ein konfigurierbarer WYSIWYG-Editor mit ausgewählten Formatierungs-Buttons zur Verfügung.

Für den Markdown-Editor kann man zwischen einem Split-Screen und einem Preview-Button auswählen. In der Standard-Einstellung fehlen dem Markdown-Editor allerdings Formatierungs-Buttons. Der Autor muss also die Markdown-Syntax beherrschen, was (meist) nur auf sehr technisch orientierte Nutzer zutrifft. Alternativ kann man WYSIWYG-Editoren verwenden, bei denen die einzelnen Formatierungs-Optionen konfiguriert werden können. Bei den WYSIWYG-Editoren werden die Inhalte wie üblich als HTML-Blöcke abgespeichert, die in der weiteren technischen Verarbeitung recht unflexibel sind.

Über das Admin-Menü erreicht man den File-Manager von Directus, in dem die Autoren Bilder und Dateien hochladen und verwalten können. Die Bilder und Dateien können über mehrere Wege in den Content-Bereich integriert werden:

Auf den ersten Blick offenbarte das Bild-Management einige Unschönheiten: Die fehlende Vorschau bei der Bild-Auswahl dürfte den Redaktions-Alltag deutlich erschweren. Bei den Multiple-Files wurde im Test-Fall nach einem Reload der Seite nur noch ein Bild angezeigt. Außerdem erschienen die Bilder als eigene Items in den Listen-Ansichten. Vermutlich müssen Bilder über eine spezielle Datenbank-Struktur eingebunden werden, allerdings ist das Setup für Einsteiger erst einmal nicht offensichtlich. In jedem Fall sollten Autoren beim Einsatz von Directus in Absprache mit der IT auf eine sinnvolle Lösung des Datei- und Bild-Managements achten, da sonst die Redaktions-Prozesse deutlich leiden könnten.

Directus für Entwickler

Directus basiert auf dem PHP-Micro-Framework Slim und Backbone.js. Als Datenbank kann aktuell nur MySQL verwendet werden. Als Template-Sprache kommt Handlebars (JavaScript) zum Einsatz.

Ähnlich wie WordPress ist auch Directus über Filter- und Action-Hooks erweiterbar. Üblicherweise steht für Entwickler jedoch die Arbeit mit der Content-API im Vordergrund.

Die API (JSON) von Directus kann natürlich mit jeder beliebigen Sprache genutzt werden, SDKs werden derzeit allerdings nur für PHP und JavaScript angeboten. Die PHP-SDK kann über Composer installiert werden:

{
  "require": {
    "directus/sdk": "^1.0"
  },
  "minimum-stability": "dev",
  "repositories": [
    {
      "type": "git",
      "url": "https://github.com/wellingguzman/zend-db"
    }
  ]
}

Um die API zu nutzen, benötigt man einen API-Key, der über einen POST-Request erzeugt werden kann. Der Request geht an die URL:

http://your-directus-adress.com/api/1.1/auth/request-token

Zusätzlich wird der Username und das Passwort für den Login benötigt. Im Response erhält man einen API-Key ähnliche wie diesen:

{
    "success": true,
    "data": {
        "token": "MlcG5oIdtwYiMSt3ZYP10ljdWHS5lGgv"
    }
}

Solche Requests werden in der API-Entwicklung üblicherweise mit Hilfsprogrammen wie Paw (Mac) oder Postman (alle Betriebssysteme) erzeugt. Die Programme bieten eine einfache Nutzer-Oberfläche für die Erstellung von Requests und die Darstellung von Responses an. In der Nutzeroberfläche von Postman würden der Request und der Response etwa so aussehen:

Einen API-Key für das Headless CMS Directus generieren

Den API-Key benötigt man anschließend, um Directus über die PHP-SDK zu initialisieren:

require 'vendor/autoload.php';

$client = \Directus\SDK\ClientFactory::create('add-your-api-token-here', [
    // the sub-domain in your instance url
    'instance_key' => 'https://url-to-your-directs.com',
    'version' => '1' // Optional - default 1
]);

Die Abfrage von Inhalten über die Directus API ist dann mehr oder weniger ein Kinderspiel. Eine einfache Liste von Artikeln aus einer Tabelle mit dem Namen "articles" und dem Feld "title" lässt sich beispielsweise so ausgeben:

$articles = $client->getItems('articles');
foreach($articles as $article) {
    echo $article->title . '<br>';
}

Die einfache Syntax erinnert stark an Doctrine oder an andere ORMs, sodass sich ein Entwickler schnell zurecht finden dürfte. Die gesamten API-Endpunkte sind in der API-Dokumentation von Directus zu finden.

Directus für Nicht-Entwickler

Directus kann als Datenbank-Verwaltungs-Tool von jedem Anwender genutzt werden, der etwas technisches Verständnis hat. Allerdings kann man die Inhalte ohne Entwickler-Kenntnisse nur verwalten, nicht jedoch verwenden. Für die Verwendung der Inhalte muss ein Entwickler die API ansprechen und eine eigene Webseite oder Applikation entwickeln bzw. eine bestehende Lösung an die API von Directus anbinden.

Preise

Directus ist Open Source und kann kostenfrei heruntergeladen und genutzt werden. Der gehostete Service von Directus ist dagegen kostenpflichtig mit folgender Preisstaffel:

Es gibt zusätzlich noch Abstufungen des Speicherplatzes, der Bandbreite und der Api-Requests. Details kann man auf der Webseite von Directus erfahren.

Empfehlung: Wann lohnt der Einsatz?

Directus bzw. allgemein ein Headless CMS macht immer dann Sinn, wenn der Content unabhängig von seiner Verwendung erstellt und verwaltet werden soll. In diesem Fall kann mit Directus ein "Content as a Service" (CaaS) aufgesetzt werden, das die Inhalte an verschiedene Kanäle wie Mobile-Apps oder Webseiten ausspielt. Denkbar sind beispielsweise Verlagsmodelle, bei denen Inhalte und Redaktions-Leistungen eingekauft und dann über die Content-API bezogen werden.

Wer jedoch eine klassische Webseite erstellen will und eigentlich keine anderweitige Verwendung von Inhalten plant, der dürfte mit einem klassischen CMS deutlich schneller an sein Ziel kommen. Vor allem, da sehr viele moderne Content-Management-Systeme wie Craft, Statamic oder Grav ebenfalls sehr flexible Autorenoberflächen ermöglichen, die sich exakt auf die gewünschten Inhalte zuschneiden lassen. Darüber hinaus verfügen inzwischen auch viele klassische Content Management Systeme über eine API, sodass Webseiten beispielsweise mit modernen Frontend-Frameworks wie Vue, React oder Angular erstellt werden können. Diese APIs sind häufig jedoch nur Read-Only-APIs oder zumindest nur für den internen Gebrauch gedacht. Directus hingegen bietet ein vollständiges API-Management mit einer feingranularen Zugriffs-Verwaltung und einem API-Key-Management. Anders als ein klassisches CMS kann Directus dadurch perfekt in einer API- oder Microservice-Architektur integriert werden.

Auch andere Experten lesen gerne gute Inhalte und freuen sich, wenn Du diesen Artikel zum Beispiel über Twitter teilst. Auf Twitter gibt es außerdem von @CMSstash tägliche Updates.

Zuletzt aktualisert: 11.10.2018