# The anatomy of a plugin

## Plugin essentials

A Dashboard plugin have 3 main files needed to work and run it in Dashboard.

* manifest.json             ***required***
* index.js                       ***required***
* style.css

### index.js

This production ready file containing all of your code. The **index.js** file needs at least one component to render.

### style.css

This is where your plugin style lives. This file is built and you should write your style in the sass file 

{% hint style="info" %}
We recommend using [styled-components](https://styled-components.com) to style your plugin
{% endhint %}

Best practise\* is to wrap all of your style in a reverse domain name style.

```css
.se-infomaker-hello-world {
    /* css */
}
```

{% hint style="warning" %}
For the time be this is just a recommendation. This can change to a requirement and plugin that don't follow will then be invalid.
{% endhint %}

## How Dashboard loads and initialize plugins

#### Load

When the Dashboard starts it will try to load the plugin index.js and style.css files by the url given on installation by adding /index.js and /style.css to that url. If it cannot find index.js the plugin will fail to load. If it cannot find style.css it will still continue to initialize your plugin, without the style.

#### Register

When the Dashboard have loaded the index.js successfully it will be executed and the Plugin.register function will be call and the plugin will register itself in the Dashboard.

For this to be successful an Agent, Application or Widget must be defined in the object passed to the register function.

The only difference in how these components is registered is that an Agent is also initialized in this stage.

Read more about register method and what can you register with your Plugin:

{% content-ref url="api-and-gui/api/register" %}
[register](https://docs.navigaglobal.com/dashboard-plugin/api-and-gui/api/register)
{% endcontent-ref %}

#### Render

Next time the Dashboard renders it will try to render registered widgets and applications.