If you read the docs about extension development in Directus, the workflow explained there is something like this.

1. Scaffold extension using extensions SDK
2. Build the extension
3. Copy index.js file from extension dist folder to extensions/<type-of-extension>/<name-of-your-extension>
4. Make some changes
5. Repeat steps 2, 3 and 4

As you can see all this copying and building doesn't make for a great developer experience to say the least.

Let's fix that.

Create simple extension

You can scaffold your extension like this in the root of your Directus app:

npm init directus-extension@latest

Choose an extension type, I will choose a module, then choose a name for your extension, I will call mine module-test. Lastly language - JavaScript or TypeScript. I will go with TypeScript.

You should now get folder called module-test, cd into it and run npm run build to build the extension.

Copy index.js from dist folder to /extensions/modules/module-test.

Now run your Directus app with npx directus start and login to admin dashboard.

Go to Project Setting and under modules you should see module called "Custom".

Enable it.

Now on the left side you should see another "box" icon. If you click on it, you should be greeted with the text "Content goes here...".

Great, this means that our Extension is loaded and working. The "Content goes here..." is coming from the /src/module.vue file in your extension directory. However, if you change that text now, nothing would happen. What you would need to is change the text, build the extension again, copy it to extension folder and rerun Directus app.

This will get cumbersome pretty quickly.

Making Development Experience Better

To fix this workflow first open your .env file in the Directus app root and find this line:

EXTENSIONS_AUTO_RELOAD=true

Change its value to true .

Start the Directus server. With this line we told Directus to watch for changes in the extensions directory, so whenever change happens Directus will reload our extensions.

Now, this is nice but it doesn't do much for our workflow since we would still need to build our extension and then copy index.js file to the extensions directory to see the changes we made.

To fix this issue go to your extension directory (the one in the root of Directus app). And install rollup-plugin-copy` .

npm install rollup-plugin-copy -D

Once this is installed create a file called extension.config.js in the root of your extension and add this code to it.

import copy from 'rollup-plugin-copy'

export default {
  plugins: [
    copy({
      targets: [
        { src: './dist/index.js', dest: './../extensions/modules/module-test' },
      ],
      hook: 'writeBundle'
    })
  ],
};

What this will do is copy index.js from dist directory every time we make a change to our extension, and since Directus has EXTENSIONS_AUTO_RELOAD set to true, this should automatically reload our extension in Directus app.

Now run npm run dev in the root of your extension directory and try to change the text in src/module.vue from "Content goes here..." to "Hello World".

Refresh the module page of your Directus App, and "Hello World" text should appear.

I think this approach will make your extension development much smoother.

I will update this post once I find a way to automatically refresh Module page, so that you don't even have to do that manually.