We're hiring! Become a Backstage contributor

Roadie

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 { plugin as ArgoCD } from '@roadiehq/backstage-plugin-argo-cd';

Add argoCD widget to your overview page

// packages/app/src/components/catalog/EntityPage.tsx
import {
  ArgoCDDetailsWidget
  isPluginApplicableToEntity as isArgoCDAvailable,
} from '@roadiehq/backstage-plugin-argo-cd';

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    ...
    {isArgoCDAvailable(entity) && (
      <Grid item md={6}>
        <ArgoCDDetailsWidget entity={entity} />
      </Grid>
    )}
    ...
  </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>'

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.