Backstage Plugins by Example: Part 1

Backstage plugins provide features to a Backstage App.

Each plugin is treated as a self-contained web app and can include almost any type of content. Plugins all use a common set of platform APIs and reusable UI components. Plugins can fetch data from external sources using the regular browser APIs or by depending on external modules to do the work.

Create a Backstage Plugin

Barebones Plugin

Integrate into the Software Catalog

...
import { MyPluginPage } from '@internal/plugin-my-plugin';
...
<Route path="/my-plugin" element={<MyPluginPage />}/>
...
import { MyPluginPage } from '@internal/plugin-my-plugin';
...
const serviceEntityPage = (
<EntityLayout>
...
<EntityLayout.Route path="/my-plugin" title="My Plugin">
<MyPluginPage />
</EntityLayout.Route>

Fixing the React Component’s Name

Fixing Plugin Development

useEntity Hook

$ yarn add @backstage/plugin-catalog-react

Next Steps

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store