directus/docs/contributing/codebase-overview.md

description, readTime

description	readTime
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.	3 min read

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.

The API (/api)

Contains the Directus API (REST+GraphQL), written in Node.js. The source code is located in /api/src and the below folders are inside there.

Folder	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.

The Data Studio App (/app)

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

Folder	Content
/public	Assets that are included with the app, but not bundled.
/src	App source code.

The source code is located in /app/src and the below folders are inside there.

Folder	Content
/assets	Files that are included within the app. Are bundled / 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 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 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 module, like login.
/stores	Pinia based stores used for global state tracking.
/styles	All general styles, css-vars, 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.

::: tip Component Library

Directus comes shipped with it's own Vue Component Library and Storybook that you can use to enrich your extensions or when developing locally. These components can be used in any of the "app extensions", including Interfaces, Displays, Modules, Layouts, and Panels.

:::

Packages (/packages)

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

Package Name	Description
@directus/composables	Shared Vue composables for Directus use
@directus/constants	Shared constants for Directus
create-directus-extension	A small util that will scaffold a Directus extension
@directus/data-driver-postgres	Data abstraction for Postgres
@directus/data	Data abstraction for Directus
@directus/errors	Utility functions to help creating and checking against Directus errors
@directus/extensions-sdk	A toolkit to develop extensions to extend 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/sdk	The JS SDK provides an intuitive interface for the Directus API from within a JavaScript-powered project (browsers and Node.js).
@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	Object storage abstraction layer for Directus
@directus/stores	Shared Directus Studio state for use in components, extensions, and the @directus/app routes. Stores are Pinia-based stores.
@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

The JavaScript SDK (/sdk)

Contains the new 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.