@red-hat-developer-hub/backstage-plugin-extensions

Extensions frontend plugin for Backstage

The Extensions plugin provides a user interface for browsing, installing, and managing plugins and packages in your Backstage instance. It allows you to discover extensions from the catalog, view plugin details, and install or configure them when the backend supports it.

For administrators

Installation

Prerequisites

1. Follow the Extensions backend plugin documentation to integrate the extensions backend in your Backstage instance.
2. Install the catalog backend module for extensions (@red-hat-developer-hub/backstage-plugin-catalog-backend-module-extensions) in your Backstage instance to provide Plugin and PluginList catalog entities.

---

NOTE

• When RBAC permission framework is enabled, for non-admin users to access Extensions UI, the role associated with your user should have the following permission policies associated with it. Add the following in your permission policies configuration file:

p, role:default/team_a, extensions-plugin, read, allow
p, role:default/team_a, extensions-plugin, create, allow
g, user:default/<login-id/user-name>, role:default/team_a

---

Procedure

1. Install the Extensions UI plugin by executing the following command from the Backstage root directory:

   yarn workspace app add @red-hat-developer-hub/backstage-plugin-extensions

2. Install the catalog backend module for extensions in your backend package:

   yarn --cwd packages/backend add @red-hat-developer-hub/backstage-plugin-catalog-backend-module-extensions

   Then add it to packages/backend/src/index.ts:

   backend.add(
     import(
       '@red-hat-developer-hub/backstage-plugin-catalog-backend-module-extensions'
     ),
   );

3. Add the Extensions page and sidebar item to your app. See New Frontend System for NFS apps or the legacy setup in the example app.

New Frontend System

If you're using Backstage's new frontend system, add the plugin to your app:

// packages/app/src/App.tsx
import extensionsPlugin from '@red-hat-developer-hub/backstage-plugin-extensions/alpha';
import { extensionsTranslationsModule } from '@red-hat-developer-hub/backstage-plugin-extensions/alpha';

export default createApp({
  features: [
    // ...other plugins
    extensionsTranslationsModule,
    extensionsPlugin,
  ],
});

The plugin will automatically provide:

• Extensions at /extensions with catalog and installed packages tabs
• An "Extensions" navigation item in the sidebar

Extensions

The following extensions are available in the plugin:

• api:extensions
• api:extensions/dynamic-plugins-info
• page:extensions

Development

You can serve the plugin in isolation for local development. The setup is in the dev directory.

• Legacy dev mode: Run yarn start:legacy in the plugin directory to use the legacy app with Full Page and Tabbed Page routers.
• NFS dev mode: Run yarn start:nfs in the plugin directory to use the new frontend system with mock data.

Both dev modes use mock extensions data and do not require a running backend.