Extending the authoring tool
We've designed the authoring tool as a modular system, so extending it with your own functionality is easy.
The authoring tool code-base consists of two component: the node-based server application, and the client web-app that's served to the user. Depending on where you've made changes, you'll need to go through a slightly different process for your changes to take effect.
If you've modified the front-end application (i.e. anything inside the frontend/ folder), then you'll need to rebuild the web app. We automate this process using Grunt task runner. There are two different depending on your environment:
While you're developing, you'll find it best to run npx grunt build. This will make sure all changes are pulled into the web app, but won't make any optimisations such as minifying the JavaScript.
If you're building the application for a production environment, we suggest you run npx grunt build:prod, which is the same as the above, but also optimises the code for production.
This is generally anything outside of the front-end folder.
For back-end server changes to take effect, you simply need to restart the server. If you're running this directly with node, you just need to stop the current process, and run node server. If you're using a third-party tool to handle the server process, you'll need to consult the documentation for that tool on how to restart your server.
The recommended way to add something new to the authoring tool is to write a new plugin. To do this, follow the below steps.
- Create new folder for your plugin in
/frontend/src/plugins/ - Create an
index.jsfile in root of your new plugin folder - Load the index file in loadAddOns function in
/frontend/src/core/app.js - Write code!
- Add your view to Origin.contentPane
- Listen to origin:dataReady
- If you need editor data, use EditorDataLoader.waitForLoad
- Use localised strings with Origin.l10n.t
