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

-
- 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 )
-
- Used to embed a widget (Card) on your existing pages. This component will display the visualiser on your page.
-
- 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.
-
- 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.
-
- Used to embed a widget (Card) on your existing pages. This component will display the schema explorer on your page.

Getting started

$3

``bash
yarn add @eventcatalog/backstage-plugin-eventcatalog
`

$3

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

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

$3

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:

`yaml
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
`

$3

_Assumes a new Backstage installation, install guides my vary_.

#### Tabbed pages

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

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

!EventCatalog Pages

`js
// 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




// Will create a new tab called "Visualzer" and route called /eventcatalog-visualizer.
// This will embed the EventCatalog visualiser to your Backstage entity




// 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




// 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




// 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)




`

#### Card components

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

!EventCatalog Card Components

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






















;
`

---

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
1. Install required dependencies yarn install

[license-badge]: https://img.shields.io/github/license/event-catalog/backstage-plugin-eventcatalog.svg?color=yellow
[license]: https://github.com/event-catalog/backstage-plugin-eventcatalog/blob/main/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[github-watch-badge]: https://img.shields.io/github/watchers/event-catalog/backstage-plugin-eventcatalog.svg?style=social
[github-watch]: https://github.com/event-catalog/backstage-plugin-eventcatalog/watchers
[github-star-badge]: https://img.shields.io/github/stars/event-catalog/backstage-plugin-eventcatalog.svg?style=social
[github-star]: https://github.com/event-catalog/backstage-plugin-eventcatalog/stargazers

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 hello@eventcatalog.dev`