Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
Knative Event Mesh logo

Backstage Knative Event Mesh Plugin

Created by Knative Community

Knative Event Mesh gives you an event backbone across your services. Producers publish to a broker. Triggers route events to subscribers with filters. Your apps do not need to know transport details. The mesh handles delivery and routing across clusters and clouds.

The Backstage plugin brings that picture into your portal. It pulls Knative Eventing data through a small backend that runs in your cluster. In Backstage you can see brokers, event types, and triggers with a cleaner view than raw YAML. You can follow relationships across these objects to understand who sends what to whom. This helps when you onboard a team, trace a broken flow, or review changes in an event contract. It fits teams that want one place to explore event driven systems without switching tools.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the cluster backend service

This plugin depends on a backend service that runs in your cluster. Install it with the published manifest.

Copy 
# pick a release or use latest
export VERSION="latest"

kubectl apply -f "https://github.com/knative-extensions/backstage-plugins/releases/${VERSION}/download/eventmesh.yaml"

Set up environment for the Backstage side. You need a service account token for the backend service. Store it in variables for later use.

Copy 
# example secret name shown here
export KUBE_SA_TOKEN="$(kubectl get secret my-eventmesh-backend-secret -o jsonpath='{.data.token}' | base64 --decode)"

# pass these to your Backstage process
export KNATIVE_EVENT_MESH_TOKEN="$KUBE_SA_TOKEN"

# if you run Backstage outside the cluster, you can use the cluster DNS name
export KNATIVE_EVENT_MESH_BACKEND="http://eventmesh-backend.knative-eventing.svc.cluster.local:8080"

# or port forward for local testing
# kubectl -n knative-eventing port-forward svc/eventmesh-backend 8080:8080
# export KNATIVE_EVENT_MESH_BACKEND="http://localhost:8080"

Note. The backend returns 401 when called without a token. That is expected.

Add the plugin to your Backstage instance

Standard Backstage app static plugin old backend system

Use the static distribution documented on Knative docs for installation steps. That guide shows which package to add to your backend and how to register its provider.

Add the same provider config block to your app config.

Copy 
catalog:
  providers:
    knativeEventMesh:
      dev:
        token: '${KNATIVE_EVENT_MESH_TOKEN}'
        baseUrl: '${KNATIVE_EVENT_MESH_BACKEND}'
        schedule:
          frequency:
            minutes: 1
          timeout:
            minutes: 1

Build and run your backend with yarn.

Standard Backstage app static plugin new backend system

Use the static distribution documented on Knative docs for the new backend system. That guide shows which backend module to install and how to register it with the backend builder.

Add the same provider config block to your app config.

Copy 
catalog:
  providers:
    knativeEventMesh:
      dev:
        token: '${KNATIVE_EVENT_MESH_TOKEN}'
        baseUrl: '${KNATIVE_EVENT_MESH_BACKEND}'
        schedule:
          frequency:
            minutes: 1
          timeout:
            minutes: 1

Build and run your backend with yarn.

Surface the entities in your frontend

The plugin syncs Knative Eventing resources into the Catalog. You can add quick links in the sidebar to help users find them.

Edit your app sidebar. File path usually looks like packages/app/src/components/Root/Root.tsx.

Copy 
// packages/app/src/components/Root/Root.tsx
import React from 'react';
import { SidebarItem } from '@backstage/core-components';
import CategoryIcon from '@material-ui/icons/Category';

// inside your Sidebar component
<>
  <SidebarItem
    icon={CategoryIcon}
    to="/catalog?filters[kind]=EventType"
    text="Event Types"
  />
  <SidebarItem
    icon={CategoryIcon}
    to="/catalog?filters[kind]=Broker"
    text="Brokers"
  />
</>

You do not need to import any frontend component from this plugin. It runs as a backend provider and populates the Catalog. The standard Catalog pages render these entities.

Run the Backstage app with the plugin

Install dependencies then start your app with the environment variables set for the provider.

Copy 
yarn install --frozen-lockfile

# ensure these two variables are in your shell environment
# KNATIVE_EVENT_MESH_TOKEN
# KNATIVE_EVENT_MESH_BACKEND

yarn dev

Configuration reference

Copy 
catalog:
  providers:
    knativeEventMesh:
      dev:
        token: '${KNATIVE_EVENT_MESH_TOKEN}'
        baseUrl: '${KNATIVE_EVENT_MESH_BACKEND}'
        schedule:
          frequency:
            minutes: 1
          timeout:
            minutes: 1

Changelog

This changelog is produced from commits made to the Knative Event Mesh 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.

Breaking changes

  • Switch the backend endpoint to /getEventMesh from the root path. Update any callers that use the old path. #141 merged 8 months ago

Features

  • Show channels and sources with their EventType relations in the UI. #160 merged 7 months ago
  • Define an OpenAPI spec for the backend. Generate server code from the spec. This sets a clear contract and enables a future JS or TS client. #141 merged 8 months ago

Documentation

  • Add Backstage templates for Knative Functions with docs on how to enable and use them. #106 merged 11 months ago

Set up Backstage in minutes with Roadie

Get a demo