Backstage Azure Storage Explorer Plugin

Azure Storage Explorer is a Microsoft app that lets you browse and manage data in Azure Storage. Engineers use it to view blobs and folders, upload and download files, and inspect metadata. It saves time when you work with logs, build artifacts, test data, or shared assets that live in blob containers.

The Azure Storage Explorer plugin brings that workflow into Backstage. You can open a page in your portal, pick a storage account, choose a container, then drill into folders and download blobs without leaving Backstage. It works across multiple accounts and containers. Your platform team can wire it to the accounts you care about, so the right people see the right storage. The backend supports common Azure authentication patterns, including access keys and client credentials through Microsoft Entra roles. That keeps access tied to your existing controls and reviews.

Typical use cases include debugging pipeline outputs, checking uploaded customer files, unblocking QA with quick downloads, and letting support pull logs without extra access to the Azure portal. The plugin keeps storage tasks close to the rest of your developer tools, which cuts context switching and reduces the need for separate desktop apps.

Install the frontend package

Run this from the Backstage root

Copy

yarn --cwd packages/app add @backstage-community/plugin-azure-storage-explorer

Install the backend package

Run this from the Backstage root

Copy

yarn --cwd packages/backend add @backstage-community/plugin-azure-storage-explorer-backend

Add the page route

Edit packages/app/src/App.tsx

Copy

import React from 'react';
import { Route } from 'react-router';
import { FlatRoutes } from '@backstage/core-app-api';
import { AzureStoragePage } from '@backstage-community/plugin-azure-storage-explorer';

export const App = () => (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/azure-storage" element={<AzureStoragePage />} />
    {/* other routes */}
  </FlatRoutes>
);

Edit packages/app/src/components/Root/Root.tsx

Copy

import React from 'react';
import { SidebarItem, SidebarPage } from '@backstage/core-components';
import FolderIcon from '@material-ui/icons/Folder';

export const Root = ({ children }: { children?: React.ReactNode }) => (
  <SidebarPage>
    {/* other sidebar items */}
    <SidebarItem
      icon={FolderIcon}
      to="azure-storage"
      text="Azure Storage Explorer"
    />
    {/* other sidebar items */}
    {children}
  </SidebarPage>
);

Configure the backend with the new backend system

Edit packages/backend/src/index.ts

Copy

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

const backend = createBackend();

// other feature additions
backend.add(import('@backstage-community/plugin-azure-storage-explorer-backend'));

backend.start();

Configure the backend with the legacy system

Legacy support existed in plugin versions before 0.4.0. Use this only if your backend still uses the legacy setup.

Create packages/backend/src/plugins/azure-storage.ts

Copy

import { createRouter } from 'backstage-plugin-azure-storage-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
  });
}

Wire it in packages/backend/src/index.ts

Copy

import azurestorage from './plugins/azure-storage';

// inside main where apiRouter is created
apiRouter.use('/azure-storage', await azurestorage(azureStorageEnv));

Make sure you create an environment for it in the same file

Copy

const azureStorageEnv = useHotMemoize(module, () => createEnv('azurestorage'));

Add app config

Edit app-config.yaml

Copy

azureStorage:
  blobContainers:
    - accountName: 'storageAccount'
      authType: accessToken
      auth:
        accessToken: 'STORAGE ACCOUNT ACCESS TOKEN'
    - accountName: 'anotherStorageAccount'
      authType: clientToken
      auth:
        tenantId: 'AZURE TENANT ID'
        clientId: 'AZURE CLIENT ID'
        clientSecret: 'AZURE CLIENT SECRET'

Backstage Azure Storage Explorer Plugin

Installation Instructions

Install the frontend package

Install the backend package

Add the page route

Add a sidebar link

Configure the backend with the new backend system

Configure the backend with the legacy system

Add app config

Pick an auth method

accessToken

clientToken

Set up Backstage in minutes with Roadie