Backstage Argo CD Plugin

See Argo CD status in Backstage

Getting started is simple

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 {
  EntityArgoCDHistoryCard,
  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.