Read the Docs | View Demo

Core Features

• 📃 Bring EventCatalog documentation into Backstage
• 📊 Embed EventCatalog visualizer into your Backstage pages
• 📚 Embed EventCatalog schema explorer 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.
  • You can also pass custom props to the component to override the id, collection and version (e.g <EventCatalogDocumentationEntityPage page="docs/page/visualiser" id="my-id" collection="services" version="0.0.1" />)
• <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.
• <EventCatalogEntityEntityMapCard />
  • Used to embed a widget (Card) on your existing pages. This component will display the entity map on your page. Great for displaying a list of entities for a given domain.
• <EventCatalogEntitySchemaExplorerCard />
  • Used to embed a widget (Card) on your existing pages. This component will display the schema explorer on your page.

Getting started

1. Install the plugin

yarn add @eventcatalog/backstage-plugin-eventcatalog

2. Add the EventCatalog URL to the app-config.yaml

The EventCatalog plugin needs to know the URL of your EventCatalog instance. This can be set in the app-config.yaml file.

eventcatalog:
  URL: "https://demo.eventcatalog.dev"

3. Mapping Backstage resources to EventCatalog resources with annotations

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.

We do this by adding annotations to the Backstage resources.

| Annotation | Required | Default | Description | |------------|----------|---------|-------------| | eventcatalog.dev/id | Yes | - | The id of the resource in EventCatalog | | eventcatalog.dev/version | No | latest | The version of the resource in EventCatalog | | eventcatalog.dev/collection | No | Uses the entity kind | The collection of the resource in EventCatalog. Options include services, domains, queries, commands, events |

Example of creating a new service in Backstage and mapping it to an EventCatalog resource:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backend-service
  description: Backend API service
  annotations:
    github.com/project-slug: organization/backend-repo
    # Here we map the Backstage service to an EventCatalog resource
    # The id of the resource in EventCatalog
    eventcatalog.dev/id: InventoryService
    # The version of the resource in EventCatalog
    eventcatalog.dev/version: 0.0.2
    # The collection of the resource in EventCatalog
    eventcatalog.dev/collection: services
  tags:
    - nodejs
    - express
    - api
spec:
  type: service
  lifecycle: production
  owner: team-name
  system: example-system
  providesApis:
    - backend-api
  dependsOn:
    - resource:default/database

4. 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>

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

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

// Override the id, collection and version of the resource in EventCatalog
// you can choose to override what is rendered, (not read from your backstage configuration)
<EntityLayout.Route path="/eventcatlaog-entity-map" title="Entity Map">
  <EventCatalogDocumentationEntityPage page='entity-map' id="MyDomainId" collection="domains" version="0.0.1" />
</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,
  EventCatalogEntityEntityMapCard,
} 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 item md={6} xs={12}>
    <!-- Adds the entity map to a grid item in Backstage -->
    <EventCatalogEntityEntityMapCard />
  </Grid>
  <Grid item md={6} xs={12}>
    <!-- Adds the schema explorer to a grid item in Backstage -->
    <EventCatalogEntitySchemaExplorerCard />
  </Grid>
</Grid>;

Found a problem?

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

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.

If you would like to obtain a Commercial License, you can purchase a license at https://dashboard.eventcatalog.dev or email us at [email protected]