Extension development guide/tutorial

[jesusgp22]

Currently the documentation is quite light on the subject and extension development is core to developer experience, here are my pain points:

• Impossible to compile examples from the directus code: I copy/pasted the Image interface to use as a base for my extension and the directus extension bundler was unable to compile (can't find saas modules and can't use typescript)
• Only trivial examples are shown on the docs
• Development requires bundling/ copy-pasting to the extensions folder/ roloading the directus server / reloading the app to view changes
• It is unclear what APIs are available implicitly to the extensions
• It is unclear if it's possible to tweak the bundler configuration to include features
• It is unclear how to bundle assets

More details about my use case: I am trying to build a free draw interface that can be stored as an Image

[benhaynes]

This. We have hired two Technical Content Writers to help add this information into the Docs (and connected articles/tutorials), so this will be improved over time. However, I'd love to see more community members generating these. If that's of interest to you (or anyone else), please shoot me a DM over Discord: https://directus.chat ❤️

[rijkvanzanten]

cc @nickrum

[nickrum]

• Impossible to compile examples from the directus code: I copy/pasted the Image interface to use as a base for my extension and the directus extension bundler was unable to compile (can't find saas modules and can't use typescript)

It will likely never be possible to just copy over code from the Directus repo into an extension with it just working out of the box. Internal extensions are able to basically import everything that is inside the repo which is not possible for user-built extensions due to technical limitations. That being said, we will expose more internal utilities through extension-sdk. Also, typescript support is already on it's way (see #6881).

• Only trivial examples are shown on the docs
• It is unclear what APIs are available implicitly to the extensions

As already mentioned by @benhaynes, this will be improved over time now that we have content writers. IMO, ideally we would have a list of "official" extensions that double-serve as examples for extension developers.

• It is unclear if it's possible to tweak the bundler configuration to include features
• It is unclear how to bundle assets

The PR to allow for this has already been merged (see #7332). Once this is released, you can use plugins like @rollup/plugin-image or @rollup/plugin-url to inline your assets into the generated extension bundle. In the future we could explore serving assets as separate files.

[rasco]

As @jesusgp22 said, it's impossible to use Directus' "internal extensions" (I'm talking especially about interfaces) as a code base to make your own extensions.
However, I think the DX of extensions is a critical feature of Directus, especially when considering the upcoming marketplace.

Sometimes you want to just make a minor modification to an existing interface. But it is simply not possible, and the effort to port it from an internal interface to an extension is not trivial.

Suggestion: how about reimplementing a bunch of interfaces in such a way that they are actually just implemented as external extensions?
Or another suggestion: Have the create-directus-extension tool create some more complex (and maybe opinionated) extension templates.

[ched-dev]

I stream my Directus work on Twitch and have the archives saved on YouTube. The video below covers setting up a local dev environment to create a Hook, but the setup can be used for other extension development as well.

Ep4: Extending Directus Headless CMS with Hooks for EXIF image data [JavaScript] [TS] [uploads]
https://www.youtube.com/watch?v=PzLZuM5LYXw&list=PLDPa5Jo5XXRzj31CiA5HGBRwfmWXYU-Np&index=4

[phazonoverload]

We now have a set of extension guides in the docs, details about available services and composables, and more. We are continuing to improve docs around extensions :)