Stage 7 · Master
Developer Portal & Software Catalog
Portal Plugins & Extensions
Extend with plugins for Kubernetes, ArgoCD, Grafana, PagerDuty, GitHub, Jira. Build custom plugins for org-specific needs.
Plugin Types
| Type | Description | Examples |
|---|---|---|
| Frontend Plugin | React components, routes, API clients | Catalog, Scaffolder, TechDocs, Kubernetes, Grafana |
| Backend Plugin | Express routes, database, external APIs | Catalog-backend, Scaffolder-backend, Auth-backend |
| App Plugin | Complete feature: frontend + backend | Kubernetes (frontend + backend), ArgoCD, PagerDuty |
| Theme Plugin | Custom Material UI theme, component overrides | Custom branding, dark mode, accessibility |
| Auth Provider | OAuth2/OIDC integration | GitHub, GitLab, Google, Azure AD, Okta, Keycloak |
Essential Plugins
| Plugin | Package | Purpose | Key Features |
|---|---|---|---|
| Kubernetes | @backstage/plugin-kubernetes | View K8s resources | Pods, deployments, logs, events, port-forward, resource YAML |
| ArgoCD | @backstage/plugin-argocd | ArgoCD integration | Application list, sync status, history, sync/rollback actions |
| Grafana | @backstage/plugin-grafana | Embed dashboards | Dashboard embedding, variable interpolation, snapshot sharing |
| PagerDuty | @backstage/plugin-pagerduty | On-call & incidents | On-call schedule, incidents, escalation policies, acknowledge |
| GitHub | @backstage/plugin-github | GitHub integration | PRs, issues, actions, repos, code search, dependabot |
| GitLab | @backstage/plugin-gitlab | GitLab integration | MRs, issues, pipelines, registry, pages |
| Jira | @backstage/plugin-jira | Jira integration | Issues, boards, sprints, search, create from portal |
| SonarQube | @backstage/plugin-sonarqube | Code quality | Quality gates, coverage, bugs, vulnerabilities, hotspots |
| Dependabot | @backstage/plugin-dependabot | Dependency updates | Alerts, PRs, auto-merge, security advisories |
| Search | @backstage/plugin-search | Unified search | Catalog, docs, templates, techdocs, custom indexes |
Building Custom Plugins
Custom plugins integrate your platform APIs, internal tools, and compliance dashboards into the portal. They follow the same patterns as core plugins.
// plugins/platform-api/src/index.ts
import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
import { rootRouteRef } from './routes';
export const platformApiPlugin = createPlugin({
id: 'platform-api',
routes: { root: rootRouteRef },
});
export const PlatformApiPage = platformApiPlugin.provide(
createRoutableExtension({
name: 'PlatformApiPage',
component: () => import('./components/PlatformApiPage').then(m => m.PlatformApiPage),
mountPoint: rootRouteRef,
}),
);
Frontend plugin entry point with routable extension.
// plugins/platform-api-backend/src/index.ts
import { createBackendPlugin } from '@backstage/backend-plugin-api';
import { createRouter } from './router';
export const platformApiBackendPlugin = createBackendPlugin({
pluginId: 'platform-api',
register(env) {
env.registerInit({
deps: {
config: configFactory,
logger: loggerFactory,
database: databaseFactory,
discovery: discoveryFactory,
httpAuth: httpAuthFactory,
permissions: permissionsFactory,
},
async init({ config, logger, database, discovery, httpAuth, permissions }) {
const router = await createRouter({
config,
logger,
database,
discovery,
httpAuth,
permissions,
});
env.registerRouter({ router });
},
});
},
});
Backend plugin with dependency injection for config, logger, database, auth, permissions.
Plugin Architecture
- Frontend: React + TypeScript, Material UI, React Router, TanStack Query
- Backend: Node.js/Express + TypeScript, dependency injection, Knex/PostgreSQL
- Communication: Frontend → Backend via REST (proxied through backend for auth)
- Permissions: Plugin declares required permissions; backend enforces via PermissionPolicy
- Configuration: app-config.yaml + app-config.local.yaml + environment variables
- Database: Each backend plugin can have its own tables (migrations via Knex)
Publishing & Distribution
- Monorepo: Keep plugins in platform repo (packages/plugins/*) — easiest for internal plugins
- NPM: Publish to private npm registry (GitHub Packages, Nexus, Artifactory) — for shared plugins
- Versioning: Semver, aligned with Backstage core version compatibility
- Installation: Add to package.json, run
yarn install, import in app/backend entry points - Updates: Dependabot for core plugins; manual review for breaking changes
1. Scaffold: yarn new --select plugin 2. Develop: yarn start (frontend) + yarn backend:dev 3. Test: yarn test + yarn lint 4. Build: yarn build 5. Publish: npm publish (private registry) 6. Consume: Add to app/package.json + backend/package.json
Mark this lesson complete to store local progress and unlock a cleaner resume path the next time you visit.