Codebase Overview #

The core concepts behind Directus are simple, however the problems that must be solved to honor them can be remarkably complex. We strive to design and engineer the most elegant solutions possible, so that our codebase remains accessible.

Monorepo #

The primary Directus repository is located at directus/directus and houses the Admin App (Vue.js 3 w/ Composition API), API (Node.js), API Specification (OpenAPI), and other smaller packages used internally. Directus follows a monorepo design similar to React or Babel — this page will outline our monorepo's design and structure.

/api #

Contains the Directus API (REST+GraphQL), written in Node.js.

/api/src/cli #

The CLI commands and matching functions that the directus package ships with.

/api/src/controllers #

Route handler controllers for the endpoints in the API.

/api/src/database #

Database manipulation abstraction, system migrations, and system data. Also where you'd find the main query runner.

/api/src/exceptions #

Classes for the different errors the API is expected to throw. Used to set the HTTP status and error codes.

/api/src/middleware #

Various (express) routing middleware. Includes things like cache-checker, authenticator, etc.

/api/src/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.

/api/src/types #

TypeScript types that are shared between the different parts of the API.

/api/src/utils #

Various utility functions.

/app #

Contains the Directus Admin App, written in Vue.js 3 w/ the Composition API.

/app/public #

Assets that are included with the app, but not bundled.

/app/src/assets #

Files that are included within the app. Are bundled / optimized in the build step.

/app/src/components #

(Base) components that are used across the platform. Contains "basic building blocks" like button, input, etc.

/app/src/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.

/app/src/directives #

Custom Vue directives (e.g. v-tooltip).

/app/src/displays #

Components to display of data within the app.

/app/src/interfaces #

The core-included interfaces.

/app/src/lang #

Translations abstraction, and language files. The language yaml files are maintained through Crowdin.

/app/src/layouts #

The core-included layouts.

/app/src/modules #

The core-included modules.

/app/src/routes #

The routes in the app. Modules define their own routes, so this only includes the "system" things that don't belong to module, like login.

/app/src/stores #

Pinia based stores used for global state tracking.

/app/src/styles #

Global styles in the app. Every component has their own component styles, these are just the global styles.

/app/src/types #

TypeScript types that are shared between the different parts of the API.

/app/src/utils #

Utility functions used in various parts of the app.

/app/src/views #

The (two) main views used in the app: public / private. Also contains "internal" coupled components for those two views.

/packages #

The various sub-packages of the platform. Including the file-storage adapters, schema, specs, etc.

/tests #

Tests are maintained on a per-package base. This folder contains the platform-wide (end-to-end) tests.