Backstage Argo CD Plugin

See Argo CD status in Backstage

Created by Roadie

Getting started is simple

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Installation steps

Install the plugin into Backstage.

yarn add @roadiehq/backstage-plugin-argo-cd

Add proxy config to the app-config.yaml file

proxy:
  '/argocd/api':
    target: https://<your-argocd-instance>/api/v1/
    changeOrigin: true
    # only if your argocd api has self-signed cert
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN

Add plugin to the list of plugins

// packages/app/src/plugins.ts
export { argocdPlugin } from '@roadiehq/backstage-plugin-argo-cd';

Add argoCD widget to your overview page

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityArgoCDOverviewCard,
  isArgocdAvailable
} from '@roadiehq/backstage-plugin-argo-cd';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
  ...
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isArgocdAvailable(e))}>
        <Grid item sm={4}>
          <EntityArgoCDOverviewCard />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  ...
  </Grid>
);

Add annotation to the yaml config file of a component

metadata:
  annotations:
    argocd/app-name: <your-app-name>

Get and provide ARGOCD_AUTH_TOKEN as env variable in following format

ARGOCD_AUTH_TOKEN='argocd.token=<token>'

Found a mistake? Update these instructions.

How it looks

A preview of Argo CD overview widget including kubernetes pod status.

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.

We will never sell or share your email address.