Directus CMS Integration

Directus CMS Integration for Content Management

Directus is a headless CMS and open-source Data Platform. Key difference from Strapi and others: Directus works on top of existing databases without modifying the schema. If you already have PostgreSQL with tables, Directus connects to it and immediately provides an API and admin panel.

How It Works

Directus doesn't create its own tables for user content — it reads the structure of existing tables through information_schema and builds on top of them:

• Administrative interface for CRUD operations
• REST API (/items/{collection})
• GraphQL API (/graphql)
• Access control system
• Webhook and automation system (Flows)

Directus's own tables (prefixed with directus_) are only for system metadata: users, roles, permissions, files, webhooks.

Installation via Docker

# docker-compose.yml
services:
  directus:
    image: directus/directus:latest
    ports:
      - "8055:8055"
    environment:
      SECRET: "replace-with-random-string"
      DB_CLIENT: "pg"
      DB_HOST: "postgres"
      DB_PORT: "5432"
      DB_DATABASE: "directus"
      DB_USER: "directus"
      DB_PASSWORD: "directus"
      ADMIN_EMAIL: "[email protected]"
      ADMIN_PASSWORD: "strongpassword"
      STORAGE_LOCATIONS: "local"
      STORAGE_LOCAL_DRIVER: "local"
      STORAGE_LOCAL_ROOT: "/directus/uploads"
    volumes:
      - directus-uploads:/directus/uploads
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: directus
      POSTGRES_USER: directus
      POSTGRES_PASSWORD: directus
    volumes:
      - pgdata:/var/lib/postgresql/data

docker compose up -d
# Admin panel: http://localhost:8055

Creating Collections

Via UI: Settings → Data Model → Create Collection. Directus creates the corresponding table in the database.

Or programmatically through API:

# Create collection through API
curl -X POST http://localhost:8055/collections \
    -H "Authorization: Bearer $ADMIN_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{
        "collection": "articles",
        "fields": [
            { "field": "id", "type": "integer", "meta": { "hidden": true }, "schema": { "is_primary_key": true, "has_auto_increment": true } },
            { "field": "title", "type": "string", "meta": { "required": true } },
            { "field": "slug", "type": "string", "meta": { "unique": true } },
            { "field": "content", "type": "text", "meta": { "interface": "input-rich-text-html" } },
            { "field": "status", "type": "string", "meta": { "interface": "select-dropdown", "options": { "choices": [{"text":"Draft","value":"draft"},{"text":"Published","value":"published"}] } } },
            { "field": "date_published", "type": "timestamp" }
        ]
    }'

REST API

# Get list of articles (published only)
GET /items/articles?filter[status][_eq]=published&sort[]=-date_published&limit=10

# With related fields populated
GET /items/articles?fields=*,author.name,cover.filename_disk

# Specific article by slug
GET /items/articles?filter[slug][_eq]=my-article&fields=*,tags.*

Response is consistent for all collections:

{
  "data": [
    {
      "id": 1,
      "title": "My Article",
      "slug": "my-article",
      "status": "published",
      "author": { "name": "Ivan Petrov" }
    }
  ]
}

GraphQL

query Articles($status: String!) {
  articles(filter: { status: { _eq: $status } }, sort: ["-date_published"], limit: 10) {
    id
    title
    slug
    content
    cover {
      id
      filename_disk
    }
    author {
      first_name
      last_name
    }
  }
}

Access Control System

Directus works with public role (anonymous requests) and custom roles:

Settings → Access Control → Public role
→ articles: Read (filter: status=published)
→ articles: No Create/Update/Delete

Settings → Access Control → Create role "Editor"
→ articles: Full CRUD
→ directus_users: Read (only own profile)

Row-level policies are set through filters in role settings: editors see only their articles (user_created = $CURRENT_USER).

Flows (Automation)

Flows are built-in no-code automation. Triggers: item creation/update, webhook, cron, manual trigger. Actions: HTTP request, email, script, database operations.

Trigger: Items Created (articles)
→ Condition: status == "published"
→ Action: Webhook POST https://vercel.com/api/deploy-hook/xxx
           (rebuild Next.js when article is published)

Custom Extensions

// extensions/hooks/article-slug/index.js
export default ({ action }) => {
    action('items.create', ({ collection, payload }, { schema }) => {
        if (collection === 'articles' && !payload.slug) {
            payload.slug = slugify(payload.title);
        }
    });
};

Extension types: hooks, endpoints, modules (add pages to admin), displays (custom field displays), interfaces (custom field editors).

Frontend Integration

Directus SDK:

import { createDirectus, rest, readItems } from '@directus/sdk';

const client = createDirectus('https://cms.example.com').with(rest());

const articles = await client.request(
    readItems('articles', {
        filter: { status: { _eq: 'published' } },
        sort: ['-date_published'],
        fields: ['id', 'title', 'slug', 'cover.*'],
        limit: 10,
    })
);

Timelines

Installation, database connection, collection setup, API, access control, deployment — 3–5 business days. Custom extensions, Flows, external service integration — +3–5 days.