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.

warning

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.