Skip to main content

Work with frontend components

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.


We do not support plugins written in Angular.

Frontend CLI reference

You can run the following commands when developing your plugin:

npx run dev

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

npx run build

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

npx run test

Launches the test runner in watch mode.

npx run e2e

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

npx run lint

Runs the linter against source code to verify that you have adhered to the formatting and styling rules. This command will also report warnings for usage of deprecated code.

npx run lint:fix

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