Make Directus Extension Development Smoother
If you read the docs about extension development in Directus, the workflow explained there is something like this.
- Scaffold extension using extensions SDK
- Build the extension
- Copy
index.js
file from extensiondist
folder toextensions/<type-of-extension>/<name-of-your-extension>
- Make some changes
- 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.