⚡️ EventCatalog plugin for Backstage

Embed your EventCatalog directly into Backstage. Document and visualize your event-driven architecture in Backstage.

Features: Embed EventCatalog into your Backstage project, including documentation, visualizer and table of messages.

Read the Docs | View Demo

---

Core Features

• 📃 Bring EventCatalog documentation into Backstage
• 📊 Embed EventCatalog visualizer into your Backstage pages
• 🔎 Embed the EventCatalog discovery table to quickly find messages for your services
• ⭐ And much more...

How it works

Many folks are using Backstage for their internal developer portals. Backstage is a highly configurable platform that allows you to document your architecture in components, apis, services, domains and much more.

Backstage supports plugins, that have a frontend and backend support.

This EventCatalog plugin let's you embed your EventCatalog information inside your backstage instance.

This plugin exposes React components that you can embed on your pages to display information from EventCatalog

• <EventCatalogDocumentationEntityPage page="docs/page/visualiser" />
  • Used to embed whole pages of EventCatalog into your Backstage instance. You can add these as tabs to your pages, clicking on the tab will show the desired feature.
• <EventCatalogEntityVisualiserCard />
  • Used to embed a widget (Card) on your existing pages. This component will display the visualiser on your page.
• <EventCatalogEntityMessageCard />
  • Used to embed a widget (Card) on your existing pages. This component will display the explore (table) on your page. Great for displaying a list of messages your service produces/consumes.

Getting started

1. Install the plugin

yarn add @eventcatalog/backstage-plugin-eventcatalog

2. Setting up the app-config.yml

Backstage and EventCatalog have different ways to create resources. For example backstage supports components, APIS, domains, systems etc, and EventCatalog supports resources (domains, services and messages (queries, commands and events)).

When you configure the plugin you need to map Backstage information to EventCatalog information, so the plugin knows which EventCatalog page to render.

You need to add plugin configuration to your app-config.yaml file.

# eventcatalog namespace
eventcatalog:
  # URL of your catalog (has to be public, if private please raise and issue and we can fix his)
  URL: "https://demo.eventcatalog.dev"
  # map your services (Components type="Service") to EventCatalog services
  services:
    # The name of the service in backstage
    - backstage-name: "backend-service"
      # The id of the service in EventCatalog
      eventcatalog-id: "InventoryService"
      # (optional) the filter value for your discovery table embed
      eventcatalog-page-discovery-default-filter: "Inventory Service"
    - backstage-name: "backend-service2"
      eventcatalog-id: "Orders"
      eventcatalog-version: "1.0.0"
  # map your APIS (kind: API) to EventCatalog
  apis:
    - backstage-name: "example-grpc-api"
      eventcatalog-id: "NotificationService"

The EventCatalog plugin will read these values and map your pages to the correct EventCatalog pages.

3. Using the components

Assumes a new Backstage installation, install guides my vary.

Tabbed pages

import { EventCatalogDocumentationEntityPage } from "@eventcatalog/backstage-plugin-eventcatalog";

The EventCatalogDocumentationEntityPage components, is a full page component that you can assign to any EntityLayout.Route. Example:

// Will create a new tab called "Docs" and route called /eventcatalog. This will embed the docs for that
// entity in your page. Using the info from the app-config to map your Backstage ID to EventCatalog ID
<EntityLayout.Route path="/eventcatlaog" title="Docs">
  <EventCatalogDocumentationEntityPage page='docs' />
</EntityLayout.Route>

// Will create a new tab called "Visualzer" and route called /eventcatalog-visualizer.
// This will embed the EventCatalog visualiser to your Backstage entity
<EntityLayout.Route path="/eventcatlaog-visualizer" title="Visualzer">
  <EventCatalogDocumentationEntityPage page='visualiser' />
</EntityLayout.Route>

Card components

These components can be added to your pages as Cards, that can live inside the Backstage Grid System.

import {
  EventCatalogEntityVisualiserCard,
  EventCatalogEntityMessageCard,
} from "@eventcatalog/backstage-plugin-eventcatalog";

<Grid container spacing={3} alignItems="stretch">
  <Grid item md={6}>
    <!-- Backstage card -->
    <EntityAboutCard variant="gridItem" />
  </Grid>
  <Grid item md={6}>
    <!-- Adds the visualizer to a grid item in Backstage -->
    <EventCatalogEntityVisualiserCard />
  </Grid>
  <Grid item md={6} xs={12}>
    <!-- Adds the explore (messages) to a grid item in Backstage -->
    <EventCatalogEntityMessageCard />
  </Grid>
</Grid>;

---

Found a problem?

Raise a GitHub issue on this project, or contact us on our Discord server.

Sponsors

Thank you to our project sponsors.

Gold sponsors

Serverless infrastructure for event-driven architecture.

Learn more

---

Manage, secure, and govern every API in your organization

Learn more

---

Sponsors help make EventCatalog sustainable, want to help the project? Get in touch! Or visit our sponsor page.

Enterprise support

Interested in collaborating with us? Our offerings include dedicated support, priority assistance, feature development, custom integrations, and more.

Find more details on our services page.

Contributing

If you have any questions, features or issues please raise any issue or pull requests you like. We will try my best to get back to you.

You can find the contributing guidelines here.

Running the project locally

1. Clone the repo
2. Install required dependencies yarn install

Commercial Use

This project is governed by a dual-license. To ensure the sustainability of the project, you can freely make use of this software if your projects are Open Source. Otherwise for internal systems you must obtain a commercial license.

To obtain a commercial license or have any questions you can email us at [email protected]