Das Headless CMS Directus

Directus gehört zu den wenigen On-Premise Systemen unter den aufstrebenden Headless CMS. Damit bietet Directus eine sinnvolle Headless-Alternative für alle, die unabhängig von externen Diensten bleiben wollen. Ergänzend kann Directus auch als kostenpflichtiger SaaS-Dienst genutzt werden.

Wie alle Headless CMS ist auch Directus kein out-of-the-box CMS für Webseiten, sondern eine Plattform für die Ausgabe-neutrale Verwaltung und Auslieferung von Inhalten. Dazu bietet Directus eine Verwaltungs-Oberfläche an, mit der ein Administrator eine Datenbank modellieren kann, die anschließend von den Autoren mit Inhalten gefüllt wird. Für die Auslieferung der Inhalte bietet Directus eine ausgereifte API und ein Berechtigungssystem an. Das klassische Anwendungs-Szenario für Directus sind Content-Services (CaaS), die Inhalte an verschiedene externe Applikationen wie Webseiten, mobile Apps oder auch Smart Devices ausliefern.

Directus wird seit ca. 2011 entwickelt. Gründer und Lead-Entwickler ist der in New York lebende Ben Haynes. Die Marke Directus gehört den Ranger Studios von Haynes. Technisch ist Directus im Backend mit Version 9 von PHP auf Node.js umgestiegen. Allerdings plant Directus für Ende 2021 einen PHP-Port der Version 9 auf das Framework Laravel.

#Directus für Autoren

Die Autoren-Oberfläche von Directus wurde mit Version 9 zwar komplett überarbeitet. Das Grund-Design, die Seiten-Aufteilung und die grundsätzlichen Workflows sind jedoch ähnlich geblieben. Wie bei Headless-Systemen üblich sind die Inhalte bei Directus stark strukturiert und werden ausschließlich über klassische Formulare erfasst. Welche Strukturen und Formulare dem Autoren für die Bearbeitung zur Verfügung stehen, hängt von der Modellierung der Daten durch den Administrator ab. Die Eingabe-Formulare sind damit im Idealfall exakt auf die inhaltlichen Erfordernisse ausgerichtet. Standardisierte Formular-Wüsten mit überflüssigen Eingabefeldern sollte es daher bei einer richtigen Konfiguration nicht geben.

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

• Am linken Rand befindet sich die Haupt-Navigation.
• Neben der Haupt-Navigation kann man die verschiedenen Collections (Inhaltsbereiche) auswählen.
• In der Mitte werden die Einträge einer Collection aufgelistet oder die Formulare zur Bearbeitung eines Eintrags dargestellt.
• Auf der rechten Seite gibt es eine zusätzliche Info-Leiste mit Revisionen, Kommentaren und ähnlichen Zusatz-Features.

Wie bei Headless-Systemen üblich arbeitet der Autor bei Directus ausschließlich mit Formularen. Ein eher visuelles Arbeiten wie beim Incontent-Editing ist nicht möglich. Der Entwickler kann jedoch bei Bedarf eine Seiten-Preview einrichten. Bei den Formularen herrscht große Vielfalt, angefangen von einfachen Text-Feldern über Kalender und Datums-Felder bis hin zu Bildern, Karten und vieles mehr. Für Fließtexte stehen ein Markdown-Editor, ein vollständiger WYSIWYG-Editor und ein konfigurierbarer WYSIWYG-Editor mit ausgewählten Formatierungs-Buttons zur Verfügung.

In früheren Versionen von Directus war das Bild-Management nicht in jeder Hinsicht überzeugend. Beispielsweise mussten Referenzen zu Bildern im Editor händisch eingetragen werden und die Einrichtung der notwendigen Relationen war für den Administrator nicht unkompliziert. Diese Kinderkrankheiten hat Directus inzwischen jedoch überwunden, sodass Autoren mehrere komfortable Möglichkeiten zur Verfügung stehen:

• Der Autor kann Bilder direkt im Media-Manager verwalten. Den Media-Manager erreicht man über das Administrations-Menü auf der linken Seite.
• Bilder können in den Text-Editoren direkt per Drag&Drop hochgeladen werden.
• Bilder bzw. Files können vom Administrator auch als eigenes Feld definiert werden. Die Autoren können dann im Interface ein klassisches Drag&Drop-Upload-Field nutzen.

Das Autoren-Interface von Directus ist gut strukturiert und übersichtlich. Bei Bedarf kann der Entwickler das Layout und auch das Formular-Design individuell anpassen. Ob sich Directus für die Autoren eignet, hängt jedoch ganz wesentlich von deren Gewohnheiten und Anforderungen ab. In den letzten Jahren dominierten vor allem Page-Builder und Incontent-Editing-Konzepte den CMS-Markt, da sie große gestalterische Freiheiten und ein visuelles Arbeiten ermöglichen. Den neuen Headless-Systemen ist diese Herangehensweise fremd, da sie die Inhalte unabhängig von deren Verwendung und Darstellung verwalten. Wenn sich Redakteure auf diesen Perspektiv-Wechsel einlassen, dann dürfte Directus bei den OnPremise-Lösungen zur ersten Wahl gehören.

#Directus für Entwickler

Directus ist mit Version 9 von einem klassischen LAMP-Stack mit Linux, Apache, MySQL und PHP auf Node.js umgestiegen und unterstützt nun eine ganze Reihe von Servern. Gleichzeitig plant Directus für Ende 2021 einen Port auf das PHP-Framework Laravel. Die Node-Version soll jedoch künftig den Lead haben. Die Frontend-Applikation von Directus basiert nach wie vor auf dem JavaScript-Framework Vue.js.

Ausgelöst wurde die Umstellung auf Node.js durch das Ende des PHP-Frameworks Zend. Zwar hat das Zend-Framework unter dem Namen Laminas inzwischen eine neue Heimat gefunden. Allerdings ging dem eine Zeit der Unsicherheit voraus. Während Directus bereits an dem Port für Laravel arbeitete, war ein Test mit Node.js auch von der Performance derart vielversprechend, dass sich das Team für eine zweigleisige Strategie entschieden hat.

Während ein Upgrade von einer älteren PHP-Version auf die neue Node-Version kompliziert werden kann, ist die Neu-Installation eines frischen Directus-Projekts denkbar einfach. Sofern Node.js und NPM installiert sind, reicht die Ausführung des folgenden Befehls in einem passenden Directory:

npx create-directus-project my-project

Anschließend kann man eine Datenbank auswählen. Bis auf SQlite müssen die gewählten Datenbanken jeweils vorinstalliert sein, daher empfielt es sich, zu Test-Zwecken SQlite zu wählen. Im Anschluss wird man in der Konsole aufgefordert, einen Admin-User mit E-Mail und Passwort zu erstellen. Anschließend kann man in den gewählten Projekt-Ordner wechseln und Directus mit dem folgenden Befehl starten:

npx directus start

Die Seite ist dann unter dem Port 8055 erreichbar, im Fall einer lokalen Installation also unter https://localhost:8055. All das lässt sich natürlich auch individuell über eine Environment-Datei konfigurieren.

Als Entwickler bzw. Administrator besteht die Hauptaufgabe bei einem neuen Projekt darin, die Daten entsprechend der Anforderungen zu modellieren. Dafür bietet Directus eine entsprechende Konfigurations-Oberfläche an:

Zur Modellierung der Daten stehen umfangreiche Eingabe-Felder zur Verfügung, angefangen von einfachen Text-Feldern bis hin zu Karten, Relationen und Repeatern. Die Herausforderung für den Entwickler besteht darin, die Daten so zu modellieren, dass am Ende eine möglichst intuitive Autoren-Oberfläche entsteht. Die Autorenoberfläche wird aus den Collections und den zugehörigen Feld-Typen automatisch generiert.

Die von den Autoren gepflegten Inhalte können anschließend über eine API abgerufen und zum Beispiel für die Erstellung einer Webseite genutzt werden. Dafür steht sowohl eine klassische REST-API, als auch eine neue GraphQL-API zur Verfügung. Der Zugriff auf die Daten wird dabei durch ein Rollen- und Rechte-System gesteuert. Das Rechte-System ist in der neuen Directus-Version deutlich intuitiver geworden und kann über die Einstellungen erreicht werden. Hier können neue Rollen angelegt und die Berechtigungen für alle Inhalte mit simplen Checkboxen vergeben werden:

Directus arbeitet bei der Authentifizierung mit temporären JSON Web Tokens (JWT) und alternativ mit statischen Tokens. Die Tokens können entweder als Query-Paramenter oder als Authentication-Header übergeben werden.

Für Entwickler bietet Directus eine JavaScript SDK an, die mit dem beliebten Framework Axios und localStorage arbeitet. Ein Beispiel aus der Doku sieht wie folgt aus:

const url = 'http://api.example.com/';

// Storage adapter where refresh tokens are stored in JSON mode.
const storage = new MemoryStorage();

// Transport used to communicate with the server.
const transport = new AxiosTransport(url, storage);

// Auth is how authentication is handled, stored, and refreshed.
const auth = new Auth(transport, storage, {
    mode: 'json', // or cookie, depends on your use  case
});

const directus = new Directus(url, {
    auth,
    storage,
    transport,
});

Die REST- und GraphQL-APIs sind als Kern-Feature von Directus entsprechend gut dokumentiert.

#Directus für Nicht-Entwickler

Directus kann als Datenbank-Verwaltungs-Tool von jedem Anwender genutzt werden, der etwas technisches Verständnis mitbringt. 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. Daneben gibt es eine On-Demand-Cloud sowie eine Enterprise-Cloud. Die On-Demand-Cloud startet bei 49,- US-Dollar pro Monat in den ersten sechs Monaten und erhöht sich dann auf 99,- US-Dollar pro Monat.

• On-Demand-Cloud: Sie startet bei 49,00 USD pro Monat in den ersten sechs Monaten und erhöht sich dann auf 99,00 USD pro Monat. Dafür kann man 25 Collections, 100.000 Items and 5 Nutzer erstellen. Danach gibt es einen nutzungsabhängigen Aufpreis.
• Enterprise-Cloud: Die Preise sind individuell. Im Vergleich zur On-Demand-Cloud beinhaltet die Enterprise-Cloud Features wie Custom Extensions, SSO-Authentifizierung, Dedicated Hardware und einen individuellen Support.

#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, der die Inhalte an verschiedene Kanäle wie Mobile-Apps, Webseiten oder auch an neue Voice-Geräte ausspielt. Ideal sind beispielsweise professionelle News-Redaktionen, bei denen sich die Journalisten vornehmlich um Inhalte und weniger um die Seitengestaltung kümmern. Auch einzelne Content-Services wie Veranstaltungs-Datenbanken sind ein gutes Einsatz-Szenario für ein Headless-CMS wie Directus.

Aufgrund der technischen Architektur eignen sich Headless-Systeme weniger, wenn Autoren das CMS wie einen Page-Builder nutzen möchten, die Seitengestaltung stark beeinflussen wollen und gerne im Incontent-Editing-Modus arbeiten. Gerade wenn Multichannel-Auslieferungen keine Rolle spielen und es lediglich um eine klassische Webseite geht, sollte man den Gestaltungsspielraum der Redakteure nicht durch die Wahl eines Headless-CMS unnötig einschränken, denn traditionelle Content Management Systeme unterstützen die visuelle Arbeit von Redakteuren deutlich besser. Viele klassische Content Management Systeme bieten heutzutage auch eine Content-API an, mit der externe Applikationen bedient werden können. Allerdings muss man bei traditionellen CMS mit einer weniger klaren Trennung zwischen Content-Speicherung, Content-Verwaltung und Content-Nutzung leben.