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

    target: https://<your-argocd-instance>/api/v1/
    changeOrigin: true
    # only if your argocd api has self-signed cert
    secure: false
        $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 {
} from '@roadiehq/backstage-plugin-argo-cd';

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

Add annotation to the yaml config file of a component

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

Get and provide ARGOCD_AUTH_TOKEN as env variable in following format


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.