grafana-plugin-scaffolding

Grafana Plugin Scaffolding Skill

Automate Grafana plugin project creation using the official @grafana/create-plugin scaffolder. This skill handles project scaffolding, development environment setup, and initial configuration for all plugin types.

Supported Grafana Version: v12.x+ only

Instructions

Step 1: Verify Prerequisites

Before scaffolding, verify these tools are installed:

# Check Node.js (v18+ required)
node --version

# Check npm
npm --version

# Check Docker (optional, for local development)
docker --version

If prerequisites are missing, guide the user to install them:

• Node.js: https://nodejs.org/
• Docker Desktop: https://www.docker.com/products/docker-desktop/

Step 2: Scaffold the Plugin

Use the official @grafana/create-plugin tool:

# Interactive scaffolding (recommended)
npx @grafana/create-plugin@latest

# The tool will prompt for:
# - Plugin type (panel, datasource, app, scenesapp)
# - Organization name (e.g., "myorg")
# - Plugin name (e.g., "my-panel")
# - Include backend? (y/n)

Step 3: Navigate and Install Dependencies

# Navigate to the new plugin directory
cd <orgName>-<pluginName>-<pluginType>

# Install frontend dependencies
npm install

# Install backend dependencies (if backend plugin)
go mod tidy

Step 4: Start Development Environment

Option A: Docker with Hot-Reload (Recommended)

The scaffolder generates a docker-compose.yaml. For enhanced development with file watching, use the template from templates/docker-compose.yaml which includes Docker Compose develop features.

# Start Grafana with file watching (Docker Compose v2.22.0+)
docker compose watch

# Or standard start without watching
docker compose up -d

# Access Grafana at http://localhost:3000
# Login: admin / admin

With docker compose watch:

• Frontend changes in dist/ sync automatically (no restart)
• Backend binary changes (gpx_*) trigger container restart
• No manual rebuild-restart cycle needed

Option B: Manual

# Build and watch frontend
npm run dev

# Build backend (if applicable)
mage -v

# Configure Grafana to load unsigned plugins
# Add to grafana.ini: plugins.allow_loading_unsigned_plugins = <plugin-id>

Step 5: Verify Plugin Installation

1. Open http://localhost:3000
2. Navigate to Administration > Plugins
3. Search for your plugin name
4. Verify it appears and can be added to dashboards

Plugin Type Workflows

Panel Plugin

npx @grafana/create-plugin@latest
# Select: panel
# Enter: organization name
# Enter: plugin name
# Backend: No (panels don't need backend)

Post-scaffolding:

1. Edit src/components/SimplePanel.tsx for visualization logic
2. Edit src/types.ts for panel options interface
3. Edit src/module.ts for option configuration

Data Source Plugin (Frontend Only)

npx @grafana/create-plugin@latest
# Select: datasource
# Enter: organization name
# Enter: plugin name
# Backend: No

Post-scaffolding:

1. Edit src/datasource.ts for query logic
2. Edit src/ConfigEditor.tsx for connection settings
3. Edit src/QueryEditor.tsx for query builder UI

Data Source Plugin (With Backend)

npx @grafana/create-plugin@latest
# Select: datasource
# Enter: organization name
# Enter: plugin name
# Backend: Yes

Post-scaffolding:

1. Edit pkg/plugin/datasource.go for Go query logic
2. Implement QueryData and CheckHealth methods
3. Build backend: mage -v

App Plugin

npx @grafana/create-plugin@latest
# Select: app
# Enter: organization name
# Enter: plugin name
# Backend: Optional

Post-scaffolding:

1. Edit src/pages/ for app pages
2. Update plugin.json includes for navigation
3. Add new pages as React components

Development Commands

# Frontend development (watch mode)
npm run dev

# Frontend production build
npm run build

# Backend build (Go plugins)
mage -v

# Run unit tests
npm test

# Run E2E tests (requires Grafana running)
npx playwright test

# Lint code
npm run lint

# Type check
npm run typecheck

E2E Testing

The @grafana/create-plugin scaffolder includes E2E testing setup with @grafana/plugin-e2e and Playwright.

# Install Playwright browsers
npx playwright install --with-deps chromium

# Start Grafana
docker compose up -d

# Run E2E tests
npx playwright test

# Run with UI mode (debugging)
npx playwright test --ui

See references/e2e-testing.md for comprehensive testing patterns, fixtures, and CI/CD setup.

Best Practices

1. Start Simple: Begin with minimal functionality, then iterate
2. Use Docker: Consistent environment across team members
3. Test Early: Run tests frequently during development
4. Type Safety: Leverage TypeScript for all frontend code
5. SDK Updates: Keep @grafana/data, @grafana/ui, @grafana/runtime versions aligned

Common Issues

Plugin Not Appearing

• Check plugin.json has correct id field
• Verify Docker volume mounts correctly
• Ensure npm run dev completed without errors

Backend Plugin Errors

• Run mage -v to rebuild Go code
• Check plugin_start_linux_* or gpx_* binaries exist in dist/
• Verify plugin.json has "backend": true

Development Server Issues

• Clear browser cache
• Restart Docker: docker compose down && docker compose up -d
• Check Grafana logs: docker compose logs grafana

Delegation

For complex architectural decisions, plugin design patterns, or troubleshooting, delegate to the grafana-plugin-expert agent which has access to current SDK documentation via Context7.