Backstage Azure Resources Plugin

Azure resources are the building blocks of Microsoft Azure. Virtual networks, databases, storage accounts, and apps. They live inside resource groups and subscriptions. They carry tags that describe ownership and purpose.

The Azure Resources plugin brings that view into Backstage. It links a catalog entity to its cloud footprint using your tags. Then it runs Azure Resource Graph queries through a backend service. In Backstage you get cards that show related resources. You also see security recommendations from Azure and cost advice in one place. Everything sits next to the docs and ownership data you already have.

This helps when you maintain a service. You can answer what is deployed for this system. You can spot drift after a change. You can review open security findings before a release. You can watch cost signals as you scale. You spend less time bouncing between portals and spreadsheets.

If you run Backstage on Azure or manage workloads there, this plugin keeps cloud facts close to the code. It focuses on practical insight over ceremony. It is open source under the MIT license. You can adapt it to fit your environment and workflows.

Install the frontend package

Copy

yarn add --cwd packages/app @vippsno/plugin-azure-resources

Add the entity cards and route

Open packages app src components catalog EntityPage.tsx

Add the plugin imports

Copy

import {
  AzureResourceEntityOverviewCard,
  AZURE_ANNOTATION_TAG_SELECTOR,
  EntityAzureSecurityOverviewCard,
  EntityAzureCostAdviceOverviewCard,
  isAzureResourceEnabled,
} from '@vippsno/plugin-azure-resources';

Add the Azure content

Copy

const azureResourceContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isAzureResourceEnabled}>
      <Grid container spacing={3} alignItems="stretch">
        <Grid item md={6}>
          <AzureResourceEntityOverviewCard />
        </Grid>
        <Grid item md={6}>
          <EntityAzureSecurityOverviewCard />
        </Grid>
        <Grid item md={6}>
          <EntityAzureCostAdviceOverviewCard />
        </Grid>
      </Grid>
    </EntitySwitch.Case>
    <EntitySwitch.Case>
      <>
        <MissingAnnotationEmptyState annotation={AZURE_ANNOTATION_TAG_SELECTOR} />
      </>
    </EntitySwitch.Case>
  </EntitySwitch>
);

Mount it under the entity layout

Copy

<EntityLayout.Route path="/azure" title="Azure">
  {azureResourceContent}
</EntityLayout.Route>

Place the route near your other entity routes in the same EntityPage file

Your app likely already imports EntityLayout EntitySwitch Grid and MissingAnnotationEmptyState If not import them from your existing EntityPage or from the relevant Backstage packages

Add the entity annotation

Add this to each entity that should show Azure data

Copy

metadata:
  annotations:
    azure.com/tag-selector: key/value

The plugin uses the tag key and value when it queries Azure Resource Graph

Install the backend plugin new backend system

You need the backend part for this plugin to work Install the backend package in your backend workspace

Copy

# replace the package name with the one from the backend plugin README
yarn add --cwd packages/backend @vippsno/plugin-azure-resources-backend

Wire it into the new backend system

Open packages backend src index.ts

Add the module to the backend

Copy

import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

// register your other backend modules here

// register the Azure resources backend module
// replace the package name with the one from the backend plugin README
backend.add(import('@vippsno/plugin-azure-resources-backend'));

await backend.start();

Add any config or credentials that the backend plugin requires in your app config files Follow the backend plugin README for the exact keys and setup

Install the backend plugin legacy backend system

Install the backend package in your backend workspace

Copy

# replace the package name with the one from the backend plugin README
yarn add --cwd packages/backend @vippsno/plugin-azure-resources-backend

Create a small plugin wrapper

packages backend src plugins azureResources.ts

Copy

import { PluginEnvironment } from '../types';
// replace this import with the one from the backend plugin README
import { createRouter } from '@vippsno/plugin-azure-resources-backend';

export default async function createPlugin(env: PluginEnvironment) {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    auth: env.auth,
  });
}

Mount the router in your backend

packages backend src index.ts

Copy

import azureResources from './plugins/azureResources';

async function main() {
  // existing setup
  const router = Router();

  // other routers

  // mount the Azure resources backend
  router.use('/api/azure-resources', await azureResources(env));

  // existing start code
}

If the backend plugin README shows a different base path use that path instead

Add any config or credentials that the backend plugin requires in your app config files Follow the backend plugin README for the exact keys and setup

Run the app

Start both the backend and the app as you normally do with yarn in your workspace

Open an entity with the annotation in the catalog Click the Azure tab to see the cards

Backstage Azure Resources Plugin

Installation Instructions

Install the frontend package

Add the entity cards and route

Add the entity annotation

Install the backend plugin new backend system

Install the backend plugin legacy backend system

Run the app

Changelog

Set up Backstage in minutes with Roadie