Backstage Plugins by Example: Part 1

Create a Backstage Plugin

Here we start with the instructions provided in Backstage’s Create a Backstage Plugin. As we have been running the Backstage App in a container, we need to go through the process of re-building / starting the image after we make changes.

Barebones Plugin

When creating our plugin, the CLI tool scaffolded quite a number of files; including the contents of the plugins/my-plugin folder. Here we will strip down the plugin to a simplified “Hello World” version.

  • Instead of the more familiar use of a default export, the ExampleComponent.tsx module exports a named, ExampleComponent. This export, in turn, is imported and re-exported from the folder’s index.ts file. This is a nice pattern allow one to abstract away the folder’s file structure
  • At this point, we do not need to understand the contents of the other files in the plugins/my-plugin/src folder; we can treat them as a black box

Integrate into the Software Catalog

At this point, our plugin is not integrated into the Software Catalog; i.e., the plugin’s UI is not associated with the Backstage Components UI. The instructions provided in Backstage’s Integrate into the Software Catalog documentation point out the key steps to accomplish this.

...
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

Now that we are building a UI for a tab within a Backstage Component (Entity), it appears that the convention is that we need to rename our React Component from MyPluginPage to EntityMyPluginContent.

Fixing Plugin Development

Right now when we run yarn start from the plugin folder, the plugin shows up as a page instead of tabbed content inside a Backstage Component’s UI.

  • The key here is that we are wrapping our EntityMyPluginContent with an EntityProvider with a mock Entity (Component)

useEntity Hook

While we have associated the plugin’s UI as tabbed content within the Backstage Components UI, we have not used information from the Component (or Entity); let use address this.

$ yarn add @backstage/plugin-catalog-react

Next Steps

Now that we have stubbed in the Plugin’s frontend implementation, we switch gears to stub in the backend implementation in the next article Backstage Plugins by Example: Part 2.

--

--

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
John Tucker

John Tucker

Broad infrastructure, development, and soft-skill background