Extensions Quickstart

This guide will cover how to get started with developing an extension for Directus. You will set up a development environment, build an extension, and load it into your project.

Loading an Extension Volume

Follow the steps in the Create a Project guide to set up your project locally. This docker-compose.yml file will set up a local volume for extensions to be loaded from. This directory exists on your local filesystem and is also mounted into the Docker container.

Add the following to the environment section of your docker-compose.yml file to automatically reload your extensions when they are rebuilt:

EXTENSIONS_AUTO_RELOAD: true

Initializing an Extension

In your terminal, navigate to the extensions directory and run the following command and follow the prompts to initialize an extension:

npx create-directus-extension@latest
? Choose the extension type: endpoint
? Choose a name for the extension: my-first-endpoint
? Choose the language to use: javascript
? Auto install dependencies?: Yes

This will create a new subdirectory in extensions with a boilerplate extension.

Building Your Extension

Run npm run build to build your extension. This will create a dist directory in your extension directory with your built extension. This is the code that will be loaded into your Directus project.

You can alternatively run npm run dev to automatically rebuild your extension when you make changes.

With the EXTENSIONS_AUTO_RELOAD environment variable set, your extension will be automatically reloaded in Directuswhen you make changes.

Using Your Extension

Navigate to the extensions page in your project settings. You should now see your new extension in the list.

Endpoints are only available via API, so navigate to http://localhost:8055/my-first-endpoint in your browser to access your new endpoint. Other extension types are available in their respective selection panes within the Data Studio.

Next Steps

Now that you've built your first extension, you can start building out your own. Check out the API Extensions overview or App Extensions overview for more information on building each extension type.