Directus: Seamless Integrations for a Headless CMS

Sampath Thennakoon
Aeturnum
Published in
9 min readMay 10, 2024

Disclosure

Please note that no headless CMS vendor is sponsoring this article. I have experience working with several headless CMS platforms and have used them in numerous projects. It is important that most of the blog posts online highlight certain headless CMS choices because the author is associated with a specific firm or because of affiliate relationships. In this article, I will provide a brief overview of Directus headless CMS, outlining its strengths and weaknesses to help you choose the best solution for your needs.

In the Realm of Headless: Freedom and Flexibility for Modern Content Management

Content management systems that emphasize managing website content independently of design are known as headless CMS software. The digital landscape is ever-evolving, demanding accessible content across diverse platforms and channels. Here’s where headless CMS enters the scene, offering a revolutionary approach to content management. Unlike traditional monolithic systems, headless CMS separates content creation and storage (the “body”) from presentation (“the head”). This decoupled architecture empowers you with the following:

  • Unmatched Flexibility: Deliver content seamlessly to websites, mobile apps, digital signage, and beyond. Headless CMS adapts to your needs, not the other way around.
  • Freedom of Choice: Developers can leverage their preferred front-end frameworks, ensuring a perfect fit for your project’s unique requirements.
  • Enhanced Agility: Content updates happen in one central location, instantly reflected across all your platforms. Say goodbye to siloed content management.
  • Scalability for Growth: Headless CMS is built for scalability, seamlessly handling growing content volume and traffic demands.

This article dives into Directus headless CMS, exploring its core benefits, potential challenges, and the factors to consider when choosing the right solution for your project.

Introduction

Directus is an open-source data platform that functions as a headless CMS. It stands out for its focus on user-friendliness. Though it is now only at 25.5K (2024 May) GitHub stars, it is not inherently less capable than other CMS solutions. Directus seamlessly integrates with various SQL databases using real-time GraphQL and REST APIs. It also provides an intuitive application designed for non-technical users, making content management more accessible. Let’s explore deeper into what makes Directus unique beyond its core headless CMS functionality.

History

Directus has a long history from when headless CMS became popular. When it was first created in 2004, it was a database management tool that ran on Flash. It underwent many revisions over the years, emphasizing asset and content management for bespoke databases. The major update, Directus v6, which was created from the ground up as a powerful open-source headless CMS, marked the turning point in 2019. With regular upgrades, Directus has maintained its evolution since its introduction into the modern development approaches. The Directus v10.10, the most recent version, improved the user experience and its capabilities when it was introduced in April 2024.

Architecture

Directus takes a modular approach to its architecture, starting with the foundation — the database. It acts as a plug-and-play layer, creating its own tables for operation without affecting your existing data. This grants you full control: access the database directly with SQL queries, integrate other services, and manage files through command-line tools. Directus then sits on top, performing database introspection to work seamlessly with your chosen SQL vendor. The data engine takes center stage, handling data access, transmission, queries, transformations, and caching for optimal performance. Security is a priority, with customizable access control including token formats, authentication methods, and SSO integration. Finally, the API layer dynamically generates RESTful and GraphQL endpoints based on your data model and access permissions. This empowers developers with a comprehensive suite of tools: the Directus JS-SDK, server-side and user-facing CLIs, and the intuitive Data Studio for no-code data management, user control, and workflow automation.

As the only platform that allows for full composability, Directus goes beyond just a simple headless CMS. It is ideal for composable architecture as it was designed with data in mind rather than content first. This provides the foundation for developing a broad range of applications. Because of its flexible, modular design, Directus is the first and only composable platform that enables composable architecture. Some of its primary features include:

API First Style
Directus places APIs first in its design process, where a well-described RESTful API, content and data are easily accessed. Developers are empowered to easily create and consume content because of this API-centric strategy, which also allows for seamless content integration into platform and application diversity.

Personalized Data Schemas
Give yourself complete control over the connections and data structure. Your data model will precisely match your unique composability requirements thanks to Directus’s ability to establish bespoke schemas. This makes effective content creation for a variety of platforms or apps possible.

Extensible Component
Directus is an architecture that is meant to be extensible. Its architecture welcomes custom extensions and hooks. This facilitates smooth system integration by enabling you to customise Directus to the unique needs of your project. The ecosystem of Directus can easily accommodate new services, features, and data sources.

Fine-grained Access Control
Directus uses role-based permissions to put security first. For distinct users or groups, provide fine-grained access restrictions. By doing this, it is made sure that only those with permission may alter and create material in specific ways. Specific fields, API endpoints, and different kinds of content might all have access restrictions.

Streamlined Development Process
Webhooks and triggers facilitate automated workflows. They rely on specific events or modifications in the system to automate activities or start external processes. This feature encourages the integration of other services or processes and the creation of modular workflows.

Content Associations
Directus offers more than just data storage — meaningful content connections. The one-to-one, one-to-many, and many-to-many relationships can be created between various tables with its portal support. You may create links between several types of material by using these relationships to assemble content across many categories. For a more comprehensive approach, this makes content development and reuse easier.

Directus gives developers the tools they need to create modular systems that effectively manage and distribute information across various platforms, channels, and connectors. With the ability to meet even the most demanding content management requirements, it is the champion of modular content management.

Costing for Directus CMS

In essence, you have two choices:
1) You can purchase a hosted version of Directus in the Cloud version that includes backups, automated upgrades, and application monitoring, or you can host it yourself for free.

2) You can host it yourself for free; it’s open-source! All you need to do is manage the infrastructure and other configurations.

Getting Started with Directus CMS in the Local Environment

First of all, you need to set the docker on your machine. We use the docker-compose.yml file, which includes all the required components to load a single Directus instance. Once we copy all the content to the docker-compose file, we can deploy our services in the local docker environment.

We can start our application and are now prepared to begin the application process.

Go to Terminal New Terminal Option in Visual Studio Code to initiate and construct the containers. This will open a terminal and run the command below.

$ docker-compose up

If everything goes well, you can see something like this.

Initializing the Directus Docker Instance

You can run the docker instances in the detached mode as well.

$ docker-compose up -d

Initializing the Directus Docker Instance in Detached Mode

With the following command, we can see the current state of the Directus instance.

$ docker ps -a

Monitor Docker Container Status

Go to http://localhost:8055/ now. The Directus UI login screen will appear if the deployment goes well, as seen below.

Directus Portal Landing Page

After successful deployment, you can log into the portal using the default admin credentials mentioned in the docker-compose file.

Let’s create a simple table for the demonstration by using the Directus portal. To access all collections, including built-in system collections required to power your project, under Settings → Data Model. Let’s create a simple table called “product” using Directus.

Directus Portal Data Modeling Page

Let’s create a sample product record.

Directus Portal Table View Page
Directus Portal Data Record View Page

Once you add new product record data, you can view the record in the Content → Product section.

Directus Portal Table View Page

To test the API, let’s now make it publicly accessible. Alternatively, you can try to access the API by adding the Authorization header for the bearer token. Go to Settings → Roles & Permissions → Public to configure the public access. Choose any category inside the collection, then choose All Access for all available types (Create, Read, Update, Delete, Share).

Directus Portal Access Control Page
Directus Portal Access Control Page

We can use Postman to access product data through Directus-exposed APIs.

Directus made available public or secure API Endpoints that offer pre-configured role-based access in this manner. CRUD operations do not require the creation of a distinct microservice, nor does the maintenance of a separate user interface. Directus is able to handle both situations.

Getting Started with Directus GraphQL
Directus CMS has built-in support for GraphQL. This means that Directus automatically generates a GraphQL API based on the Directus content models, allowing us to query and manage your data efficiently. GraphQL is framework-agnostic so that we can apply the same set of steps for integrations regardless of the stack of choice. We can use GraphQL endpoint to query the API and get only the required data.

In summary, Directus offers a compelling feature set for building modern web applications. Here’s a breakdown of its strengths and considerations:

Strengths:

  • Empowering Duo: Directus allows developers and content creators to effectively manage content effectively. Developers appreciate its flexibility and extensibility, while content creators benefit from the user-friendly interface.
  • Data Freedom: Flexible data modelling allows you to structure your content precisely to your needs.
  • Platform Independence: Directus is platform-agnostic, which works seamlessly with your preferred front-end framework.
  • Feature-Rich & Developer-Friendly: Directus offers a robust set of features alongside strong developer tools for customization.
  • Highly Customizable: Tailor Directus to your specific project requirements through modular architecture and extensibility options.
  • Intuitive UI: A user-friendly interface streamlines content management for non-technical users.
  • Asset Management Powerhouse: Directus provides robust tools to effectively manage and organize your digital assets.
  • Granular Control: Easy access to permissions and user roles ensures data security and access control.
  • Content Scheduling & Versioning: Schedule content releases and maintain a history of changes for easy rollback if needed.
  • Inventory Management: Directus can simplify product inventory management for e-commerce applications.

Considerations:

  • Database Dependence: Currently, Directus only supports relational databases.
  • Documentation Needs: While well-documented, some areas could benefit from more detailed explanations.
  • Learning Curve: While the UI is user-friendly, some technical knowledge is helpful for advanced functionalities.
  • Overkill for Simple Needs: Directus’s power might be unnecessary for basic content management projects.
  • Choice Overload: The extensive customization options can overwhelm some business us cases.
  • Scaling and Costing: Concerns about scaling for large-scale applications
  • High learning curve: Query language, customizations, etc.

Overall, Directus is a powerful and versatile headless CMS. Understanding its strengths and considerations will help you decide if it’s the right fit for your project.

Finally, there are many more things to explore in the Directus world, and these are simple steps to get started with Directus CMS. Additionally, you can write a separate Spring boot application and connect it to the Directus APIs, which work as a wrapper for the Directus CMS, and customize the data sets as the project requires.

I appreciate you taking the time to read this article.

If you have any suggestions for improving this post, please let me know. If you’d like to discuss this topic in more depth further, don’t hesitate to get in touch with me directly.

References

--

--

Sampath Thennakoon
Aeturnum

Love travel , love programming , experiments and solve problems , curious learner