or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mddev-app.mdindex.md
tile.json

tessl/npm-backstage--dev-utils

Development utilities for creating and testing Backstage plugins with React components and dev app framework

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@backstage/dev-utils@1.1.x

To install, run

npx @tessl/cli install tessl/npm-backstage--dev-utils@1.1.0

index.mddocs/

Backstage Dev Utils

@backstage/dev-utils provides development utilities specifically designed for creating and testing Backstage plugins. It offers React components for common UI patterns and a development app framework that helps developers create standalone development applications to test their plugins in isolation.

Package Information

  • Package Name: @backstage/dev-utils
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @backstage/dev-utils

Core Imports

import { 
  EntityGridItem, 
  SidebarSignOutButton, 
  SidebarLanguageSwitcher,
  createDevApp,
  isReactRouterBeta 
} from "@backstage/dev-utils";

For CommonJS:

const { 
  EntityGridItem, 
  SidebarSignOutButton, 
  SidebarLanguageSwitcher,
  createDevApp,
  isReactRouterBeta 
} = require("@backstage/dev-utils");

Basic Usage

import { createDevApp } from "@backstage/dev-utils";
import { myPlugin } from "./my-plugin";

// Create a development app for testing plugins
const DevApp = createDevApp()
  .registerPlugin(myPlugin)
  .addPage({
    element: <MyPluginPage />,
    title: "My Plugin",
    path: "/my-plugin"
  })
  .build();

// Render the dev app
ReactDOM.render(<DevApp />, document.getElementById('root'));

Architecture

Backstage Dev Utils is organized around two main functional areas:

  • React Components: Pre-built UI components (EntityGridItem, SidebarSignOutButton, SidebarLanguageSwitcher) for common Backstage plugin patterns
  • Development Framework: createDevApp and DevAppBuilder for creating standalone development environments to test plugins

The components integrate seamlessly with Backstage's core systems including the catalog, theming, authentication, and internationalization.

Capabilities

React Components

Pre-built React components for common Backstage plugin UI patterns, including entity display, authentication controls, and internationalization features.

const EntityGridItem: (props: EntityGridItemProps) => JSX.Element;
const SidebarSignOutButton: (props: SidebarSignOutButtonProps) => JSX.Element;
const SidebarLanguageSwitcher: () => JSX.Element;

interface EntityGridItemProps extends Omit<GridProps, 'item' | 'container'> {
  entity: Entity;
}

interface SidebarSignOutButtonProps {
  icon?: IconComponent;
  text?: string;
}

React Components

Development App Framework

Complete framework for building standalone development applications to test Backstage plugins in isolation, with built-in authentication, theming, and routing.

function createDevApp(): DevAppBuilder;

class DevAppBuilder {
  registerPlugin(...plugins: BackstagePlugin[]): DevAppBuilder;
  addPage(opts: DevAppPageOptions): DevAppBuilder;
  addThemes(themes: AppTheme[]): DevAppBuilder;
  addSignInProvider(provider: SignInProviderConfig): DevAppBuilder;
  build(): ComponentType<PropsWithChildren<{}>>;
  render(): void;
}

interface DevAppPageOptions {
  path?: string;
  element: JSX.Element;
  children?: JSX.Element;
  title?: string;
  icon?: IconComponent;
}

Development App Framework

Types

import { Entity } from '@backstage/catalog-model';
import { GridProps } from '@material-ui/core/Grid';
import { 
  IconComponent, 
  BackstagePlugin, 
  AppTheme,
  SignInProviderConfig 
} from '@backstage/core-plugin-api';
import { TranslationResource } from '@backstage/core-plugin-api/alpha';
import { ComponentType, PropsWithChildren, ReactNode } from 'react';

// Entity from Backstage catalog system
type Entity = import('@backstage/catalog-model').Entity;

// Material-UI Grid component props
type GridProps = import('@material-ui/core/Grid').GridProps;

// Backstage icon component type
type IconComponent = import('@backstage/core-plugin-api').IconComponent;

// Backstage plugin definition
type BackstagePlugin = import('@backstage/core-plugin-api').BackstagePlugin;

// Application theme configuration
type AppTheme = import('@backstage/core-plugin-api').AppTheme;

// Sign-in provider configuration
type SignInProviderConfig = import('@backstage/core-plugin-api').SignInProviderConfig;

// Translation resource for internationalization
type TranslationResource = import('@backstage/core-plugin-api/alpha').TranslationResource;