Installing Extensions ​

There are two possible ways to install extensions to your Directus instance:

1. Installing through NPM
2. Installing through the Extensions Folder

Installing Through NPM ​

Extensions can be published to the NPM registry and installed to your Directus instance from there. This way you can install an existing public extension as well as your own published extension. Before you begin, ensure you have a self-hosted instance of Directus via Docker installed on your system.

1. Modify docker-compose.yml

Open the docker-compose.yml file of your project and replace the image option with a build section:

image: directus/directus:10.x.y 
build: 
  context: ./ 

image: directus/directus:10.x.y 
build: 
  context: ./ 

This allows you to build a customized Docker Image with the added extensions.

2. Create a Dockerfile

At the root of your project, create a Dockerfile if one doesn't already exist and add the following:

FROM directus/directus:10.x.y

USER root
RUN corepack enable
USER node

RUN pnpm install directus-extension-package-name

FROM directus/directus:10.x.y

USER root
RUN corepack enable
USER node

RUN pnpm install directus-extension-package-name

3. Build the Docker Image

Build your Docker image:

docker compose build

docker compose build

4. Start the Docker Container

Start your Docker container:

docker compose up

docker compose up

On startup, you'd see that Directus will automatically load any extension installed in the previous steps.

Installing Through the Extensions Folder ​

To locally install extensions, copy the files generated by the directus-extension build command into the extensions folder located at the root of your Directus project.

Before you begin, ensure you have a self-hosted instance of Directus via Docker installed on your system.

1. Create an Extensions Folder

At the root of your project, create an extensions folder if one doesn't already exist to house your extensions.

2. Add your new extension into the extensions folder

Move the package.json file along with the output from the dist/ folder into a new folder in the extensions folder you created earlier.

Your folder structure should look like this:

extensions/
  <extension-name>/
    dist/
      index.js
    package.json
  ...

extensions/
  <extension-name>/
    dist/
      index.js
    package.json
  ...

3. Update Docker Compose File

Open your docker-compose.yml file and add a volume to mount your extensions folder into the Docker container:

volumes:
  - ./extensions:/directus/extensions/

volumes:
  - ./extensions:/directus/extensions/

4. Start the Docker Container

Start your Docker container:

docker compose up

docker compose up

You should see that your extension has been successfully loaded into the Docker container. Now, go ahead to customize your extension by making changes to the src folder within your extension directory.