Backstage DevPod Plugin

DevPod is an open source tool for creating reproducible developer environments. It reads a devcontainer.json in your repo and brings up a workspace on your laptop or on remote infrastructure. It is client only. No central service in the way. It works with common IDEs like VS Code and JetBrains. The goal is a clean, predictable setup for each project with less time spent on local fixes.

The DevPod plugin adds this flow to Backstage. It puts an Open in DevPod button on the overview page of a component. You can choose the IDE you prefer. It also shows the CLI command so you can run the same action from your terminal. From the service catalog you go straight into a ready workspace for that repo.

Common use cases include faster onboarding for new engineers. Quick context switches across many repos. Reproducing a bug in a fresh environment. Trying a change on a beefy remote machine then returning to local work with the same setup. The plugin helps standardize how teams open code from Backstage while keeping control over where the environment runs. If you run a self hosted Backstage and want a simple way to open consistent dev environments from it, this plugin keeps that path short.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

From your repo root, add the plugin to the app workspace

Copy

yarn workspace app add @terasky/backstage-plugin-devpod

Add the Devpod card to the entity overview

Open this file in your app

Copy

packages/app/src/components/catalog/EntityPage.tsx

Import the card

Copy

// packages/app/src/components/catalog/EntityPage.tsx
import { DevpodCard } from '@terasky/backstage-plugin-devpod';

Render the card on the overview tab of component entities

Place it with your other overview cards

Copy

// inside packages/app/src/components/catalog/EntityPage.tsx

// common imports you likely already have
import React from 'react';
import { Grid } from '@material-ui/core';
// or use Grid from @mui/material if your app uses MUI v5
import { EntityLayout } from '@backstage/plugin-catalog';

export const EntityPage = () => (
  <EntityLayout>
    <EntityLayout.Route path="overview" title="Overview">
      <Grid container spacing={3}>
        {/* your existing overview items */}

        <Grid item xs={12} md={6}>
          <DevpodCard />
        </Grid>
      </Grid>
    </EntityLayout.Route>

    {/* your other routes */}
  </EntityLayout>
);

If your EntityPage already defines the overview route, just add the Grid item with DevpodCard inside that route. Keep the sizing consistent with your layout.

Optional show the card only for component entities

If you use an EntitySwitch wrapper, place the card under the component case. This keeps it on the overview tab only for component entities.

Copy

import { EntitySwitch, isKind, EntityLayout } from '@backstage/plugin-catalog';
import { Grid } from '@material-ui/core';
import { DevpodCard } from '@terasky/backstage-plugin-devpod';

export const EntityPage = () => (
  <EntitySwitch>
    <EntitySwitch.Case if={isKind('component')}>
      <EntityLayout>
        <EntityLayout.Route path="overview" title="Overview">
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <DevpodCard />
            </Grid>
          </Grid>
        </EntityLayout.Route>
      </EntityLayout>
    </EntitySwitch.Case>

    {/* other cases */}
  </EntitySwitch>
);

Open a component entity page. Go to the overview tab. You should see the Devpod card with the Open in Devpod action.

Changelog

This changelog is produced from commits made to the DevPod plugin since 9 months ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Features

Add support for the new frontend system in the DevPod plugin UI PR 83 merged 1 month ago

Maintenance

Upgrade Backstage to 1.43.3 for the workspace including DevPod PR 89 merged 2 weeks ago
Bump Backstage to 1.42.5 and refresh dependencies PR 82 merged 1 month ago
Upgrade to Backstage 1.40 PR 54 merged 4 months ago
Update Backstage dependencies PR 19 merged 8 months ago

Breaking changes

None noted for DevPod in these PRs

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo