The badges plugin offers a set of badges that can be used outside of your backstage deployment, showing information related to data from the catalog, such as entity owner and lifecycle data for instance.

The available badges are setup in the badges-backend plugin, see link below for more details.

To get markdown code for the entity badges, access the Badges context menu (three dots in the upper right corner) of an entity page like this:

This will popup a badges dialog showing all available badges for that entity like this:

The badges plugin supports obfuscating the badge URL to prevent it from being enumerated if the badges are used in a public context (like in Github repositories).

To enable obfuscation, set the obfuscate option to true in the app.badges section of your app-config.yaml:

app:
  badges:
    obfuscate: true

Please note that if you have already set badges in your repositories and you activate the obfuscation you will need to update the badges in your repositories to use the new obfuscated URLs.

Please note that the backend part needs to be configured to support obfuscation. See the backend plugin documentation for more details.

Also, you need to allow your frontend to access the configuration see https://backstage.io/docs/conf/defining/#visibility :

Example implementation would be in : packages/app/src/config.d.ts

export interface Config {
  app: {
    ... some code
    badges: {
      /**
       * badges obfuscate
       * @visibility frontend
       */
      obfuscate?: string;
    };
  };
}

then include in the packages/app/package.json :

"files": [
    "dist",
    "config.d.ts"
  ],
"configSchema": "config.d.ts",

Here are some samples of badges for the artists-lookup service in the Demo Backstage site:

• Component:
• Lifecycle:
• Owner:
• Docs:

Install the @backstage/plugin-badges package in your frontend app package:

# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-badges

This plugin requires explicit registration, so you will need to add it to your App's plugins.ts file:

// ...
export { badgesPlugin } from '@backstage/plugin-badges';

If you don't have a plugins.ts file see: troubleshooting

In your EntityPage.tsx file located in packages\app\src\components\catalog we'll need to make a few changes to get the Badges context menu added to the UI.

First we need to add the following imports:

import { EntityBadgesDialog } from '@backstage/plugin-badges';
import BadgeIcon from '@material-ui/icons/CallToAction';

Next we'll update the React import that looks like this:

import React from 'react';

To look like this:

import React, { ReactNode, useMemo, useState } from 'react';

Then we have to add this chunk of code after all the imports but before any of the other code:

const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
  const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);

  const extraMenuItems = useMemo(() => {
    return [
      {
        title: 'Badges',
        Icon: BadgeIcon,
        onClick: () => setBadgesDialogOpen(true),
      },
    ];
  }, []);

  return (
    <>
      <EntityLayout UNSTABLE_extraContextMenuItems={extraMenuItems}>
        {props.children}
      </EntityLayout>
      <EntityBadgesDialog
        open={badgesDialogOpen}
        onClose={() => setBadgesDialogOpen(false)}
      />
    </>
  );
};

The last step is to wrap all the entity pages in the EntityLayoutWrapper like this:

const defaultEntityPage = (
+  <EntityLayoutWrapper>
    <EntityLayout.Route path="/" title="Overview">
      {overviewContent}
    </EntityLayout.Route>

    <EntityLayout.Route path="/docs" title="Docs">
      <EntityTechdocsContent />
    </EntityLayout.Route>

    <EntityLayout.Route path="/todos" title="TODOs">
      <EntityTodoContent />
    </EntityLayout.Route>
+  </EntityLayoutWrapper>
);

Note: the above only shows an example for the defaultEntityPage for a full example of this you can look at this EntityPage

If you don't have a plugins.ts file, you can create it with the path packages/app/src/plugins.ts and then import it into your App.tsx:

+ import * as plugins from './plugins';

const app = createApp({
  apis,
+   plugins: Object.values(plugins),
  bindRoutes({ bind }) {
    /* ... */
  },
});

Or simply edit App.tsx with:

+ import { badgesPlugin } from '@backstage/plugin-badges'

const app = createApp({
  apis,
+   plugins: [badgesPlugin],
  bindRoutes({ bind }) {
    /* ... */
  },
});

• Backend part of the plugin
• The Backstage homepage