Skip to main content

Asset Handling

Plugins can include CSS, images, media files, and other arbitrary assets. We aim to support a wide range of devices (web, desktop, mobile) and modes (native plugins, sandboxed plugins, and in-progress developer plugins). To ensure that assets are loaded correctly across different environments, please follow the following guidelines:

The public folder​

Any files in the public folder are automatically bundled directly into your plugin in the root folder. For example, if you have created a /public/logo.png file, it will be accessible in sandbox mode at ${plugin.rootURL}logo.png} (ex. at localhost:8080/logo.png).

The plugin.rootURL property​

You should not rely on static, relative, or absolute pathnames. These pathnames mayb break on different devices, or in native mode. Instead, always construct pathnames dynamically of the style of ${plugin.rootURL}logo.png}.

Adding Assets​

Assets can be easily created:

  1. Create a file in the /public folder of the plugin template.
  2. Access your asset dynamically through a ${plugin.rootURL}fileName.fileExtension path.

For example, if you've created /public/logo.png, you should embed your logo image in React with:

<img src={`${plugin.rootURL}logo.svg\`}/>