backstage-frontend-plugin

What problem does it solve?

Developing Backstage frontend plugins, especially with the "New Frontend System," can be complex, requiring deep knowledge of blueprints, Utility APIs, routing, and testing. This Skill simplifies that process, guiding you through best practices and providing golden path templates to accelerate your development.

Core Features & Use Cases

• Specialized Workflows: Step-by-step procedures for creating and configuring frontend plugins.
• Best Practices: Production-ready patterns for lazy loading, error handling, permissions, and comprehensive testing.
• Golden Path Templates: Copy/paste code snippets for common plugin patterns like pages, navigation items, entity content, and shared Utility APIs.
• Use Case: Quickly scaffold and convert a legacy Backstage frontend plugin to the New Frontend System, adding a new page and navigation item with best practices for lazy loading and testing, all without deep diving into extensive documentation.

Quick Start

Example: Define a new Backstage frontend plugin with a page and navigation item.

This snippet goes into src/plugin.ts after scaffolding.

import { createFrontendPlugin, PageBlueprint, NavItemBlueprint, } from '@backstage/frontend-plugin-api'; import { rootRouteRef } from './routes'; import ExampleIcon from '@material-ui/icons/Extension';

const examplePage = PageBlueprint.make({ params: { routeRef: rootRouteRef, path: '/example', loader: () => import('./components/ExampleComponent').then(m => <m.ExampleComponent />), }, });

const exampleNavItem = NavItemBlueprint.make({ params: { routeRef: rootRouteRef, title: 'Example', icon: ExampleIcon, }, });

export const examplePlugin = createFrontendPlugin({ pluginId: 'example', extensions: [examplePage, exampleNavItem], routes: { root: rootRouteRef }, });