Backstage Plugins by Example: Part 2

Creating and using a backend Plugin.

This is part of a series of articles starting with Backstage Plugins by Example: Part 1.

As a reminder, we are moving towards our goal of creating a Plugin that will allow us to associate an AWS S3 Bucket with a Backstage Component and browse its contents from the Component’s Backstage App UI.

Scaffold Backend Plugin

To accomplish our goal, we will want to create a backend Plugin to make the AWS calls on behalf of the frontend Plugin. The Backstage documentation, Backend plugins, provides us a basic scaffold for this backend Plugin.

Please note: We will not need to worry about making use of a database in our example as there will be nothing to persist.

Having scaffolded the backend Plugin and re-building / starting the Backstage App image, we indeed see that our backend Plugin is working as expected.

For now we will be working with this health endpoint as our API of our backend Plugin.

Accessing a Mock Backend Plugin API from the Frontend Plugin

While we could brute force access the backend Plugin API from the frontend Plugin, we instead will follow patterns provided in the kubernetes core feature Plugin. Here will first create a mock (fake) backend Plugin API and pass it to the frontend Plugin so that we can develop the frontend Plugin without the backend Plugin API being available, i.e., when we develop using yarn start from the frontend Plugin folder.

Please note: To fully understand these changes, one has to be fairly comfortable with both TypeScript and React; it took me a bit of effort to get this right.

In the frontend Plugin, we define an interface for calling the backend Plugin API.

plugins/my-plugin/src/api/types.ts

We then use the pattern of importing and re-exporting to make the interface exportable from the plugin itself.

plugins/my-plugin/src/api/index.ts

plugins/my-plugin/src/index.ts

We implement the mock backend Plugin API and pass it into our frontend Plugin when we are running the frontend Plugin directly.

plugins/my-plugin/dev/index.tsx

We next encapsulate everything we need to use the backend Plugin API into a React Hook.

plugins/my-plugin/src/hooks/useMyPluginObjects.ts

Finally, we update our React Component using the React Hook.

plugins/my-plugin/src/components/ExampleComponent/ExampleComponent.tsx

Using yarn start from the frontend Plugin folder, we can see the result of our effort.

Whew!

Accessing the Actual Backend Plugin API from the Frontend Plugin

We now work to access the actual backend Plugin API by creating a client.

plugins/my-plugin/src/api/MyPluginBackendClient.ts

We then use the client with our Plugin definition.

plugins/my-plugin/src/plugin.ts

After re-building / starting the Backstage App image, we indeed see that our frontend Plugin is accessing the backend Plugin API as expected.

Next Steps

In the next article, Backstage Plugins by Example: Part 3, we secure our backend Plugin API.