@echolayer/plugin-backstage NPM

EchoLayer Backstage Plugin

Welcome to the EchoLayer Backstage plugin! From here, you'll learn how to install our module and configure our plugin in your Backstage instance.

Backstage Configuration

You'll need to configure a proxy to echolayer.com and place the echolayer.com cards and pages in your Backstage files.

Create an EchoLayer API Key

Login to EchoLayer using your GitHub account
Create an API Key at the EchoLayer API Key page
Set your API Key as an environment variable, ECHOLAYER_API_KEY in the environment where you run Backstage

Configure API Proxy

Configure Backstage so that the EchoLayer plugin can communicate to the echolayer.com API:

# in app-config.yaml
proxy:
  '/echolayer/api':
    target: https://api.echolayer.com/api
    headers:
      Authorization: Bearer ${ECHOLAYER_API_KEY}

Reminder: Be sure to create ECHOLAYER_API_KEY environment variable where you run your Backstage server.

Install the EchoLayer NPM module

Install the EchoLayer NPM module in Backstage. From the root of your Backstage project, run:

yarn add --cwd packages/app @echolayer/plugin-backstage

Add the EchoLayer Issues Page

Add a route to the Issues page:

// packages/app/src/App.tsx
import { EchoLayerIssuesPage } from "@echolayer/plugin-backstage";

const routes = (
  <FlatRoutes>
    {/* snip... */}
    <Route path="/echolayer" element={<EchoLayerIssuesPage />} />
  </FlatRoutes>
);

Create a link in the Backstage sidebar to the EchoLayer Issues page

// packages/app/src/components/Root/Root.tsx
import { EchoLayerIcon } from "@echolayer/plugin-backstage";

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      {/* snip...  */}
      <SidebarItem icon={EchoLayerIcon} to="echolayer" text="EchoLayer Issues" />
    </Sidebar>
  </SidebarPage>
);

Add the EchoLayer EntityOwner Card to your Entities Page

This card will allow you to report a Backstage-provided component owner as invalid so that your organization can review and update it, as needed. Import our Entites Owner card and add the component to the Backstage Entities page.

// packages/app/src/components/catalog/EntityPage.tsx

// Add the following in the imports
import { EntityOwnerCard } from "@echolayer/plugin-backstage";

In the same file, look for the overviewContent object and add the cards you want to use in its Grid:

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    { /*  snip other cards... */ }
    <Grid item xs={8}>
      <EntityOwnerCard />
    </Grid>
  </Grid>
);