Work with nested plugins
Grafana app plugins can nest frontend data sources together with panel plugins so that you can provide a complete user experience.
Before you begin
Be sure that you are using the latest create-plugin
tool:
- npm
- pnpm
- yarn
npx @grafana/create-plugin@latest
pnpm dlx @grafana/create-plugin@latest
yarn create @grafana/plugin
Scaffold an app plugin
To scaffold an app plugin, follow a few easy steps:
-
When prompted
What type of plugin would you like?
, selectapp
. -
Make entries in both the plugin entry file (
module.ts
) and plugin meta file (plugin.json
). Put them in a directory inside the./src
directory:
./src
├── README.md
├── components
+├── datasource
+│ ├── components
+│ │ ├── ConfigEditor.tsx
+│ │ └── QueryEditor.tsx
+│ ├── datasource.ts
+│ ├── img
+│ ├── module.ts
+│ ├── plugin.json
+│ └── types.ts
├── img
│ └── logo.svg
├── module.ts
└── plugin.json
tip
To help speed up development in VS Code, you can download data source and panel plugin source directories directly from the plugin-examples repo:
- Press
.
or replace.com
with.dev
in the URL to open the repo in the GitHub editor. - In the Explorer pane (press Ctrl+Shift+E/Cmd+Shift+E), right-click the required file or folder, and then select Download.
- On the Select Folder dialog, select the directory where you want to put the selected file or folder.