Getting Started with Plugin Development
This section covers the fundamentals of Headlamp plugin development. By the end, you'll have built a complete hello-headlamp plugin with:
- ✅ App bar actions
- ✅ Sidebar navigation & custom pages
- ✅ Kubernetes data integration
- ✅ List and detail views
- ✅ Extending resource detail views
- ✅ Plugin settings
- ✅ Custom themes
- ✅ Map visualization
- ✅ Publish plugins to Artifact Hub
Tutorials
| # | Tutorial | Time | What You'll Build |
|---|---|---|---|
| 1 | Running Headlamp from Source | 20 min | Set up your development environment |
| 2 | Creating Your First Plugin | 15 min | "Hello" in app bar |
| 3 | Adding Pages and Sidebar Navigation | 25 min | Custom pages & sidebar navigation |
| 4 | Working with Kubernetes Data | 25 min | Fetch cluster and resource data |
| 5 | Advanced Kubernetes Interactions | 30 min | Custom resource classes, modify resources |
| 6 | Building List & Detail Pages | 30 min | ResourceListView & DetailsGrid components |
| 7 | Extending Existing Resource Views | 25 min | Extend built-in resource list and detail views |
| 8 | Adding Plugin Settings | 20 min | ConfigStore, registerPluginSettings, settings UI |
| 9 | Applying Custom Themes | 20 min | registerAppTheme, AppTheme options, light & dark variants |
| 10 | Adding Custom Map Nodes | 20 min | registerMapSource, node icons, custom detail views |
| 11 | Releasing & Publishing | 30 min | Lint, format, build, package, Artifact Hub |
Prerequisites
- Node.js ≥20.11.1
- npm ≥10.0.0
- Git
- A code editor (VS Code recommended)