mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
153 lines
4.1 KiB
Markdown
153 lines
4.1 KiB
Markdown
---
|
|
contributors: Esther Agbaje, Kevin Lewis
|
|
description: Discover how to install extensions to your Directus project.
|
|
---
|
|
|
|
<script setup lang="ts">
|
|
import { data as packages } from '@/data/packages.data.js';
|
|
</script>
|
|
|
|
# Installing Extensions
|
|
|
|
There are three ways to install extensions to your Directus project:
|
|
|
|
1. Installing via the Directus Marketplace
|
|
2. Installing via the npm Registry
|
|
3. Installing via the Extensions Directory
|
|
|
|
## Installing via the Directus Marketplace
|
|
|
|
Extensions in the Directus Marketplace Registry are made available via the Marketplace section in the Settings Module.
|
|
|
|
By default, App Extensions and [Sandboxed Extensions](/extensions/sandbox/introduction) are available from the
|
|
Marketplace in all Directus projects (Directus Professional and Enterprise Cloud, and self-hosted).
|
|
|
|
<Card
|
|
title="User Guide"
|
|
text="Learn more about installing extensions from the Directus Marketplace."
|
|
url="/user-guide/marketplace/overview"
|
|
style="margin: 1rem 0"
|
|
/>
|
|
|
|
<Card
|
|
title="Publishing Guide"
|
|
text="Learn more about publishing extensions to the Directus Marketplace."
|
|
url="/extensions/marketplace/publishing"
|
|
/>
|
|
|
|
## Installing via the npm Registry
|
|
|
|
Extensions can be installed in a Directus project from the npm registry. Before you begin, ensure you have a
|
|
[self-hosted instance of Directus](/self-hosted/quickstart) 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:
|
|
|
|
```yaml-vue
|
|
image: directus/directus:{{ packages.directus.version.major }}.x.y // [!code --]
|
|
build: // [!code ++]
|
|
context: ./ // [!code ++]
|
|
```
|
|
|
|
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:
|
|
|
|
```Dockerfile-vue
|
|
FROM directus/directus:{{ packages.directus.version.major }}.x.y
|
|
|
|
USER root
|
|
RUN corepack enable
|
|
USER node
|
|
|
|
RUN pnpm install directus-extension-package-name
|
|
```
|
|
|
|
::: tip Extension Name
|
|
|
|
Remember to replace `directus-extension-package-name` with the name of the extension's npm package.
|
|
|
|
:::
|
|
|
|
**3. Build the Docker Image**
|
|
|
|
Build your Docker image:
|
|
|
|
```bash
|
|
docker compose build
|
|
```
|
|
|
|
**4. Start the Docker Container**
|
|
|
|
Start your Docker container:
|
|
|
|
```bash
|
|
docker compose up
|
|
```
|
|
|
|
On startup, you'd see that Directus will automatically load any extension installed in the previous steps.
|
|
|
|
## Installing via the Extensions Directory
|
|
|
|
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.
|
|
|
|
::: warning Configurable Folders
|
|
|
|
The path to the built extension as well as the extensions directory are configurable and may be located elsewhere.
|
|
|
|
:::
|
|
|
|
Before you begin, ensure you have a [self-hosted instance of Directus](/self-hosted/quickstart) 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
|
|
...
|
|
```
|
|
|
|
**3. Update Docker Compose File**
|
|
|
|
Open your `docker-compose.yml` file and add a volume to mount your extensions folder into the Docker container:
|
|
|
|
```yaml
|
|
volumes:
|
|
- ./extensions:/directus/extensions/
|
|
```
|
|
|
|
**4. Start the Docker Container**
|
|
|
|
Start your Docker container:
|
|
|
|
```bash
|
|
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.
|
|
|
|
::: tip Automatically Reload Extensions
|
|
|
|
To automatically reload extensions every time you make a change, without having to restart Directus, in your
|
|
`docker-compose.yml` file, set `EXTENSIONS_AUTO_RELOAD=true`.
|
|
|
|
:::
|