# @pulumi/backstage-plugin-pulumi

Latest version **0.18.0** (published 2025-05-24) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install @pulumi/backstage-plugin-pulumi
pnpm add @pulumi/backstage-plugin-pulumi
yarn add @pulumi/backstage-plugin-pulumi
bun add @pulumi/backstage-plugin-pulumi
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.18.0 |
| Published | 2025-05-24 |
| First published | 2023-09-27 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 324.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | joeduffy, pulumi-bot |

## Links

- npm: https://www.npmjs.com/package/@pulumi/backstage-plugin-pulumi
- npm.io page: https://npm.io/package/@pulumi/backstage-plugin-pulumi

## Dependencies (12)

- [react-use](https://npm.io/package/react-use.md) ^17.4.0
- [@backstage/theme](https://npm.io/package/@backstage/theme.md) ^0.6.6
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) 4.0.0-alpha.61
- [@backstage/errors](https://npm.io/package/@backstage/errors.md) ^1.2.7
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.12.4
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.3
- [@backstage/catalog-model](https://npm.io/package/@backstage/catalog-model.md) ^1.7.4
- [@backstage/core-components](https://npm.io/package/@backstage/core-components.md) ^0.17.2
- [@backstage/core-plugin-api](https://npm.io/package/@backstage/core-plugin-api.md) ^1.10.7
- [@backstage/plugin-kubernetes](https://npm.io/package/@backstage/plugin-kubernetes.md) ^0.12.7
- [@backstage/plugin-catalog-react](https://npm.io/package/@backstage/plugin-catalog-react.md) ^1.18.0
- [@backstage/plugin-kubernetes-common](https://npm.io/package/@backstage/plugin-kubernetes-common.md) ^0.9.5

## Recent versions

- 0.18.0 (latest) — 2025-05-24
- 0.11.0 (0.11.0) — 2024-10-02
- 0.10.0 (0.10.0) — 2024-10-02
- 0.17.0 — 2025-02-18
- 0.16.0 — 2024-11-19
- 0.15.0 — 2024-10-02
- 0.14.0 — 2024-10-02
- 0.13.0 — 2024-10-02
- 0.12.0 — 2024-10-02
- 0.9.0 — 2024-07-10
- 0.8.0 — 2024-05-20
- 0.7.0 — 2024-04-22
- 0.6.2 — 2024-04-10
- 0.6.1 — 2024-04-10
- 0.6.0 — 2024-04-10
- … 10 more at https://npm.io/package/@pulumi/backstage-plugin-pulumi/versions

## README

## Pulumi Plugin

- Display relevant Pulumi information about an entity within Backstage, such as the Pulumi stack, organization, project
  name, and project description.
- Show the Pulumi activity view for an entity within Backstage.

### Requirements

- Setup of the Pulumi plugin for Backstage requires a Pulumi Organization admin to generate a Pulumi access token for
  the Backstage application.

### Feature Overview

#### Pulumi Card (Component Overview)

<img src="doc/component.png" width="500">

#### Pulumi Card (System Overview)

<img src="doc/system.png" width="500">

#### Pulumi Activity View

<img src="doc/activity.png" width="500">

### Support

If you need any help with this plugin, feel free to reach out to me!

### Integration Walk-through

#### Install the plugin

The file paths mentioned in the following steps are relative to your app's root directory — for example, the directory
created by following the [Getting Started](https://backstage.io/docs/getting-started/) guide and creating your app with
`npx @backstage/create-app`.

First, install the Pulumi plugin via a CLI:

```bash
# From your Backstage root directory
yarn add --cwd packages/app @pulumi/backstage-plugin-pulumi
```

Next, add the plugin to `EntityPage.tsx` in `packages/app/src/components/catalog` by adding the following code snippets.

Add the following imports to the top of the file:

```tsx
import {
    isPulumiAvailable,
    EntityPulumiCard,
    EntityPulumiMetdataCard,
    PulumiComponent
} from '@pulumi/backstage-plugin-pulumi';
```

Then create a new constant for the Pulumi Component:

```tsx
const pulumiContent = (
    <EntitySwitch>
        <EntitySwitch.Case if={isPulumiAvailable}>
            <PulumiComponent/>
        </EntitySwitch.Case>
    </EntitySwitch>
);
```

Find const `overviewContent` in `EntityPage.tsx`, and add the following snippet inside the outermost Grid defined there,
just before the closing `</Grid>` tag:

```tsx
<EntitySwitch>
    <EntitySwitch.Case if={isPulumiAvailable}>
        <Grid item md={6}>
            <EntityPulumiCard variant="gridItem"/>
        </Grid>
    </EntitySwitch.Case>
</EntitySwitch>
```

Now find the `serviceEntityPage` constant in `EntityPage.tsx`, and add the following snippet inside:

```tsx
<EntityLayout.Route path="/pulumi" title="Pulumi" if={isPulumiAvailable}>
    {pulumiContent}
</EntityLayout.Route>
```

Lastly, find the `systemPage` constant in `EntityPage.tsx`, and add the following snippet inside after the
closing `</Grid>` tag of the `<EntityAboutCard variant="gridItem" />`:

```tsx
  <EntitySwitch>
    <EntitySwitch.Case if={isPulumiAvailable}>
        <Grid item md={6}>
            <EntityPulumiMetdataCard/>
        </Grid>
    </EntitySwitch.Case>
</EntitySwitch>
```

#### Configure the plugin

First, annotate your component/resource entity with the following:

```yaml
annotations:
  pulumi.com/project-slug: [ Pulumi Cloud Name: org/stackname/stack ]
```

And your system entity with the following:

```yaml
annotations:
  pulumi.com/orga-slug: <Pulumi Cloud: org>
```

Next, provide the API token that the client will use to make requests to the Pulumi Cloud API.

Add the proxy configuration in `app-config.yaml`:

```yaml
proxy:
  '/pulumi':
    target: 'https://api.pulumi.com/api'
    changeOrigin: true
    headers:
      Authorization: token ${PULUMI_ACCESS_TOKEN}
      Accept: application/vnd.pulumi+8
      Content-Type: application/json
```

Then, start the backend, passing the PagerDuty API token as an environment variable:

```bash
export PULUMI_ACCESS_TOKEN='<PULUMI_ACCESS_TOKEN>' 
yarn start
```

This will proxy the request by adding an `Authorization` header with the provided token.

#### How to Uninstall

1. Remove any configuration added in Backstage yaml files, such as the proxy configuration in `app-config.yaml` and the integration key in an entity's annotations.
1. Remove the added code snippets from `EntityPage.tsx`
1. Remove the plugin package:

```bash
# From your Backstage root directory
yarn remove --cwd packages/app @pulumi/backstage-plugin-pulumi
```

---
_Source: https://npm.io/package/@pulumi/backstage-plugin-pulumi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._