Writing Backstage Plugins

How to develop new features for Backstage

Backstage logo © Spotify

Backstage is an open platform for building developer portals that can be easily extended to your needs by the power of plugins. Plugins are divided into two categories, frontend and backend plugins. In this blog post, I will go through an example of how to develop these plugins and how to get them published in the Backstage plugin marketplace.

In case of problems or questions, you can always check the official Backstage documentation about plugins.

Frontend Plugins

Start off by creating a new Backstage application where you can run your plugins. After your app is set up, you can create a new plugin. This can be achieved with the following commands:

npx @backstage/create-app
cd my-app/
yarn new --select plugin

After your plugin is created, you can start developing by running yarn start command. If you want to run only your plugin without the Backstage application in the background you can use command yarn workspace @backstage/my-plugin startbut be aware, that not all Backstage features are available (see Mocking below).

After starting the application, you should now be able to navigate to http://localhost:3000/my-plugin and see your newly created plugin.

Components

Frontend components are written with React. You should place your components in plugins/my-plugin/src/components directory in good order under subdirectories. To write new components, you can utilize Material UI v4 components as well as Backstage’s own component library. Writing components should be done by following the React best practices like in any other frontend development.

Besides these, you can of course include other dependencies for your plugin by adding them to the plugins/my-plugin/package.json as a dependency. Just remember that adding too many packages will make the bundle size bigger and it’s always a bad thing for your plugin’s users.

APIs

APIs allow you to communicate with the Backstage backend over REST API. In the frontend, each API is initiated by using Backstage’s useApi hook from @backstage/core-plugin-api package with the API…