Frontend

Develop the frontend component of a Grafana plugin in Typescript with ReactJS as the View library. Several commands are available within the plugin directory for interacting with the frontend.

caution

We do not support plugins written in Angular.

Frontend CLI reference

You can run the following commands when developing your plugin:

npm run dev

Builds the plugin in development mode and watches for changes to source code to rebuild the plugin.

npm run build

Builds the plugin for production. The output can be found in the ./dist directory.

npm run test

Launches the test runner in watch mode.

npm run e2e

Launches the e2e test runner. Make sure to have an instance of Grafana running before you run e2e tests.

npm run lint

Runs the linter against source code to verify that you have adhered to the formatting and styling rules.

npm run lint:fix

Runs the linter in fix mode to automatically format the frontend code.