Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
StackStorm logo

Backstage StackStorm Plugin

Created by Expedia Group

StackStorm is an event driven automation platform. Teams use it to model runbooks as actions and workflows that react to triggers. It connects tools across your stack and helps you automate repeatable tasks with traceability.

The StackStorm plugin brings that power into Backstage. It surfaces your StackStorm instance in a single page where engineers can see recent executions with status and timing. You can open an execution to view inputs and results. You can browse installed packs and actions to understand what automations exist across your org.

This is useful when you already rely on StackStorm for operations. The plugin reduces context switching during an incident or routine change. You can find a run, explore its details, and jump to the StackStorm Web UI if you need deeper logs. It helps service owners discover available actions so they do not rebuild the same runbook twice. It also gives platform teams a simple way to show what automation is in place and how it is being used.

If you are running a self hosted Backstage, this plugin is a practical way to make runbooks visible where engineers already work. It keeps automation close to the catalog, templates, and docs that describe your services.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

  1. From your Backstage root
Copy 
yarn --cwd packages/app add @backstage-community/plugin-stackstorm

Register the page route

  1. Open packages/app/src/App.tsx
  2. Import the page and add a route
Copy 
// packages/app/src/App.tsx
import React from 'react';
import { FlatRoutes } from '@backstage/core-app-api';
import { Route } from 'react-router';
import { StackstormPage } from '@backstage-community/plugin-stackstorm';

// Optional custom header props
// <StackstormPage title="StackStorm" subtitle="Automations" />

export const AppRoutes = () => (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/stackstorm" element={<StackstormPage />} />
  </FlatRoutes>
);
  1. Open packages/app/src/components/Root/Root.tsx
  2. Add a sidebar item that points to the route
Copy 
// packages/app/src/components/Root/Root.tsx
import React from 'react';
import { SidebarItem } from '@backstage/core-components';
import ExtensionIcon from '@mui/icons-material/Extension';

// inside your Sidebar
<SidebarItem icon={ExtensionIcon} to="/stackstorm" text="StackStorm" />

Configure the app config

  1. Open app-config.yaml
  2. Set the StackStorm web URL used for links
Copy 
stackstorm:
  webUrl: 'https://your.stackstorm.webui.com'
  1. Add a proxy entry that points to your StackStorm API
    The plugin calls the Backstage proxy at path stackstorm
Copy 
proxy:
  '/stackstorm':
    target: https://your.stackstorm.instance.com/api
    headers:
      St2-Api-Key: ${ST2_API_KEY}

Enable the proxy in the old backend

If your backend uses the legacy backend setup in packages backend

Add the dependency

Copy 
yarn --cwd packages/backend add @backstage/plugin-proxy-backend

Add the proxy plugin router

Copy 
// packages/backend/src/plugins/proxy.ts
import { createRouter } from '@backstage/plugin-proxy-backend';
import { PluginEnvironment } from '../types';

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

Wire the router in the backend

Copy 
// packages/backend/src/index.ts
import proxy from './plugins/proxy';

// inside your main bootstrap
// app.use is an Express app
app.use('/proxy', await proxy(env));

Enable the proxy in the new backend

If your backend uses the new backend system with createBackend

Add the dependency

Copy 
yarn --cwd packages/backend add @backstage/plugin-proxy-backend @backstage/backend-defaults

Register the proxy plugin

Copy 
// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';
import { proxyPlugin } from '@backstage/plugin-proxy-backend';

const backend = createBackend();
backend.add(proxyPlugin());
backend.start();

Set the API key environment variable

  1. Provide the StackStorm API key to the backend process
  2. Example for local dev
Copy 
export ST2_API_KEY='your-stackstorm-api-key'
yarn dev

Optional customize the page header

You can pass props to tweak the page header

Copy 
// packages/app/src/App.tsx
import { StackstormPage } from '@backstage-community/plugin-stackstorm';

<Route
  path="/stackstorm"
  element={
    <StackstormPage
      title="StackStorm"
      subtitle="Executions and packs"
/>
  }
/>

Changelog

This changelog is produced from commits made to the StackStorm plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Dependencies

  • Remove unused dev dependency canvas #3565 merged 5 months ago

Tooling

  • Reduce knip false positives with a single workspace config. Update Backstage repo tools to 0.13.0 #3018 merged 6 months ago

Set up Backstage in minutes with Roadie

Get a demo