Codebase
Codebase Overview
Overview of the Directus codebase for new contributors
The directus/directus repository includes the Data Studio, Directus Connect, the JavaScript SDK, and a number of smaller packages used internally. All of these live in a single monorepo.
Data Studio
This contains the Directus Data Studio App, written in Vue.js 3. /app/public contains assets that are included with the app, but not bundled. The source code is located in /app/src with the following directories:
| Directory | Content |
|---|---|
/assets | Files that are included within the app. Are bundled and optimized in the build step. |
/components | (Base) components that are used across the platform. Contains "basic building blocks" like button, input, etc. |
/composables | Reusable parts of reactive logic that can be used between Vue components. Includes things reactively calculating time from now, fetching a single item, etc. |
/directives | Custom Vue directives (e.g. v-tooltip). |
/displays | Components to display single pieces of data within the app. |
/interfaces | The core-included interfaces that allow editing and viewing individual pieces of data. |
/lang | Translations abstraction, and language files. The language yaml files are maintained through Crowdin. |
/layouts | The core-included layouts that change the way items are represented inside the collection view. |
/modules | The core-included modules that structure major parts of the app. |
/operations | Operations are steps in a flow. |
/panels | Panels display data in the insight dashboards. |
/routes | The routes in the app. Modules define their own routes, so this only includes the "system" things that don't belong to the module, like login. |
/stores | Pinia based stores used for global state tracking. |
/styles | All general styles, CSS variables, mixins and themes are stored inside here. Every component has their own component styles, these are just the global styles. |
/types | TypeScript types that are shared between the different parts of the App. |
/utils | Utility functions used in various parts of the app. |
/views | The (two) main views used in the app: public / private. Also contains "internal" coupled components for those two views. |
Directus ships with a UI Library that you can use in app extensions.
Directus Connect
This directory contains the Directus REST and GraphQL APIs written in Node.js. The source code is located in /api/src.
| Directory | Content |
|---|---|
/cli | The CLI commands and matching functions that the directus package ships with. |
/controllers | Route handler controllers for the endpoints in the API. |
/database | Database manipulation abstraction, system migrations, and system data. Also where you'd find the main query runner. |
/errors | Classes for the different errors the API is expected to throw. Used to set the HTTP status and error codes. |
/middleware | Various (express) routing middleware. Includes things like cache-checker, authenticator, etc. |
/services | Internal services. The main abstraction for interfacing with the data in the database. Both GraphQL and REST requests are "translated" to use these services as the main logic in the platform. |
/types | TypeScript types that are shared between the different parts of the API. |
/utils | Various utility functions. |
Packages
The /packages directory modularizes smaller parts of the Directus project into separate packages.
| Package Name | Description |
|---|---|
| create-directus-extension | A small util that will scaffold a Directus extension. |
| create-directus-project | A small installer util that will create a directory, add boilerplate folders, and install Directus through npm. |
| @directus/composables | Shared Vue composables for use in Directus. |
| @directus/constants | Shared constants for Directus. |
| @directus/env | Environment variable configuration extraction for Directus. |
| @directus/errors | Utility functions to help creating and checking against Directus errors. |
| @directus/extensions-registry | Abstraction for exploring Directus extensions on a package registry. |
| @directus/extensions-sdk | A toolkit to develop extensions to extend Directus. |
| @directus/extensions | Shared utilities, types and constants related to Directus extensions. |
| @directus/format-title | Custom formatter that converts any string into Title Case. |
| @directus/memory | Memory / Redis abstraction for Directus. |
| @directus/pressure | Pressure based rate limiter. |
| @directus/random | Set of random-utilities for use in tests. |
| @directus/release-notes-generator | Package that generates release notes for Directus monorepo. |
| @directus/schema | Utility for extracting information about the database schema. |
| @directus/specs | OpenAPI Specification of the Directus API. |
| @directus/storage-driver-azure | Azure file storage abstraction for @directus/storage. |
| @directus/storage-driver-cloudinary | Cloudinary file storage abstraction for @directus/storage. |
| @directus/storage-driver-gcs | GCS file storage abstraction for @directus/storage. |
| @directus/storage-driver-local | Local file storage abstraction for @directus/storage. |
| @directus/storage-driver-s3 | S3 file storage abstraction for @directus/storage. |
| @directus/storage-driver-supabase | Supabase file storage driver for @directus/storage. |
| @directus/storage | Object storage abstraction layer for Directus. |
| @directus/stores | Shared Data Studio state for use in components, extensions, and the @directus/app routes. Stores use Pinia. |
| @directus/system-data | Definitions and types for Directus system collections. |
| @directus/tsconfig | The shared TS Config files used by the projects in the Directus ecosystem. |
| @directus/types | Shared types for Directus. |
| @directus/update-check | Check if an update is available for a given package. |
| @directus/utils | Utilities shared between the Directus packages. |
JavaScript SDK
The /sdk directory contains the Directus JavaScript SDK available as @directus/sdk package.
Tests
Tests (/tests) are maintained on a per-package base. This folder contains the platform-wide (end-to-end) tests. See Tests for more information.