Plugin resources

Basics

Plugin resource files are contained under resources directory nested in the plugin directory.

We encourage following structure:

* plugin
  * resources
    * css
      - styles.less
    * js
      - module.coffee
      - routing.coffee
      * controllers
        - some.controller.coffee
      * services
        - some.service.coffee
    * img
      - image.png
    * partials
      - view.html

CSS, JS and HTML resources must be listed in the plugin.yml file in order to be served to client. Example:

name: test
...
resources:
    - 'resources/vendor/jquery/dist/jquery.min.js'  # Bower component
    - 'resources/css/animations.less'               # Styles
    - 'resources/js/core/filters.coffee'            # JS
    - 'resources/partial/index.html'                # HTML
    - 'ng:moduleName'                               # Special syntax for publishing an AngularJS module.

Please note that the last item instructs Ajenti core to load the specified AngularJS module (test) from the plugin.

Bower components

Example can be browsed and downloaded at https://github.com/ajenti/demo-plugins/tree/master/demo_3_bower

Plugins can depend on Bower components. To use this feature, create a bower.json file in your plugin directory:

{
  "name": "plugin",
  "private": true,
  "dependencies": {
    "jquery": "~2.1.3"
  }
}

Components are installed into <plugin>/resources/vendor directory. To install/update the components, run ajenti-dev-multitool --bower install. You can also run make bower in the root of a complete Ajenti code tree to install Bower components in all plugins.

You can run other Bower commands with e.g. ajenti-dev-multitool --bower "list --force --verbose".

Resource access

AngularJS templates are pre-loaded on the client. A template residing in plugins/test/resources/dir/template.html can be accessed with the following URL: /test:resources/dir/template.html.

Other resource files are available through HTTP at /resources/<plugin_id>/resources/<path>.

Resource compilation

When running in dev mode (--dev), Ajenti will invoke ajenti-dev-multitool --build on page reload. Force-reloading the page (Ctrl/Cmd-F5) will rebuild all resources in all plugins using ajenti-dev-multitool --rebuild

ajenti-dev-multitool will automatically compile CoffeeScript and LESS code, concatenate CSS and JS specified in plugin.yml and place built CSS and JS files in plugin/resources/build. Please note that ajenti-dev-multitool will only process files in the current directory and below.


Comments

comments powered by Disqus