diff --git a/README.md b/README.md index bce4b9bb..1bef2fef 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,11 @@ -# [Backstage](https://backstage.io) +# Backstage Plugins + +A collection of plugins that extend [Backstage](https://backstage.io) to help with developer onboarding, context switching, and automated IDE environments (remote or local). + +- [backstage-plugin-coder](./plugins/backstage-plugin-coder/README.md): A plugin for integrating Coder workspaces with Backstage. +- [backstage-plugin-devcontainers-backend](./plugins/backstage-plugin-devcontainers/README.md): A plugin for integrating VS Code Dev Containers extension with Backstage catalog items (no Coder deployment necessary). + +Please use [GitHub issues](https://github.com/coder/backstage-plugins/issues) to report any issues or feature requests. ## Contributing @@ -24,7 +31,7 @@ Backstage app. ## Releasing To draft a release for a plugin push a tag named `$name/v$version` without the -`backstage-plugin-` prefix. For example: +`backstage-plugin-` prefix. For example: ```sh git tag -a coder/v0.0.0 -m "coder v0.0.0" diff --git a/plugins/backstage-plugin-coder/README.md b/plugins/backstage-plugin-coder/README.md index a77bf37b..eea90e07 100644 --- a/plugins/backstage-plugin-coder/README.md +++ b/plugins/backstage-plugin-coder/README.md @@ -1,100 +1,136 @@ -# coder-backstage - -A basic plugin that adds the "Open in Coder" button to catalog items in backstage based on -the catalog spec. - -| Catalog item without Coder | Catalog item with Coder | -| ---------------------------------------------------------------- | ---------------------------------------------------------- | -| ![Screenshot without Coder](./docs/screenshot-without-coder.png) | ![Screenshot with Coder](./docs/screenshot-with-coder.png) | - -This is a very basic MVP, but demonstrates the power of a Coder+Backstage integration. It allows Backstage users to quickly develop a service inside a CDE. - -## How it works - -All backstage catalog items are git repos with a [catalog-info.yaml](https://github.com/bcdr-demos/python-project/blob/main/catalog-info.yaml) file. To add Coder compatibility to a given template, we need to add a `coder` section to the catalog-info.yaml file. - -Here's an example: - -```yaml -apiVersion: backstage.io/v1alpha1 -kind: Component -metadata: - name: python-project -spec: - type: other - lifecycle: unknown - owner: pm - coder: - template: 'devcontainers' - createMode: 'auto' - params: - repo: 'custom' - repo_url: 'https://github.com/bcdr-demos/python-project' - region: 'us-pittsburgh' -``` +# @coder/backstage-plugin-coder + +Create and manage [Coder workspaces](https://coder.com/docs/v2/latest) from Backstage. + + + +## Screenshots + +![Coder authentication](./screenshots/coder-auth.png) -## Adding the component +![Workspace list page](./screenshots/catalog-item.png) -Since the Backstage UI is "DIY," you'll need to modify `EntityPage.tsx` in your Backstage deployment to import the components from this plugin. +## Features -There are several ways to use the integration: +- Users link their Coder accounts with Backstage via tokens +- Associate Coder workspaces with catalog items in Backstage +- Workspace list component for viewing and managing workspaces + -### Example Card +## Setup -The easiest way to consume this integration is by importing the `ExampleContributingCard` component +This assumes you already have a [Coder](https://github.com/coder/coder) deployment running. +Replace `https://coder.example.com` with your Coder deployment access URL. This also assumes +you have a template that has a parameter for a git repository URL (e.g. `git_repo_url`) that auto-clones +the repository or uses [envbuilder](https://coder.com/docs/v2/latest/templates/devcontainers) to build +the devcontainer. -```tsx -// EntityPage.tsx -import { ExampleContributingCard } from '@internal/plugin-coder'; - -// ... -const overviewContent = ( - - {/* ... */} - - - - {/* ... */} - -); -``` +1. If you have a standalone Backstage app (you didn't clone this repo), then do + + ```bash + yarn --cwd packages/app add @coder/backstage-plugin-coder + ``` + +1. Add the proxy key to your `app-config.yaml`: + + ```yaml + proxy: + endpoints: + '/coder': + # Replace with your Coder deployment access URL and a trailing / + target: 'https://coder.example.com/' + changeOrigin: true + allowedMethods: ['GET'] + allowedHeaders: ['Authorization', 'Coder-Session-Token'] + headers: + X-Custom-Source: backstage + ``` + +1. Add the `CoderProvider` to the application: + + ```tsx + // In packages/app/src/App.tsx + import { + type CoderAppConfig, + CoderProvider, + } from '@coder/backstage-plugin-coder'; -### Button + const appConfig: CoderAppConfig = { + deployment: { + accessUrl: 'https://coder.example.com', + }, -You can also just import the `OpenInCoderButton` component and use it in your own component. + // Set the default template (and parameters) for + // catalog items. This can be overridden in the + // catalog-info.yaml for specific items. + workspaces: { + templateName: 'devcontainers', + mode: 'manual', + // This parameter is used to filter Coder workspaces + // by a repo URL parameter. + repoUrlParamKeys: ['custom_repo', 'repo_url'], + params: { + repo: 'custom', + region: 'eu-helsinki', + }, + }, + }; -### URL + // ... -For the most control, you can use the `useOpenInCoderLink` to get the Coder URL for a given catalog item. + export default app.createRoot( + + + + + {routes} + + , + ); + ``` -```ts -// MyCustomComponent.tsx -import { useOpenInCoderLink } from '@internal/plugin-coder'; + -export const MyCustomComponent = () => { - const coderLink = useOpenInCoderLink(catalogItem); - // some basic component that has error handling if coderLink is null - if (coderLink) return Open in Coder; - return

Not configured for Coder

; -}; +1. Add the `CoderWorkspacesCard` card to the entity page in your app: + + ```tsx + // In packages/app/src/components/catalog/EntityPage.tsx + import { CoderWorkspacesCard } from '@coder/backstage-plugin-coder'; + + // ... + + + + ; + ``` + + + + -This is only the beginning. We can extend this integration further: +## Roadmap -- [ ] Display Coder-compatible templates in the catalog -- [ ] Developing a neutral Backstage plugin to detect `devcontainer.json` in repos and add a more advanced "contributing" card that links to VS Code Remote, Codespaces, and Coder -- [ ] Allow developers to see their existing Coder workspaces and relate workspaces more directly to catalog items -- [ ] Allow developers to create new workspaces from the catalog item page or a dedicated sidebar page -- [ ] Build an IDE extension to allow people to see catalog items and start a new project, and open their CDE, without leaving their editor! +This plugin is in active development. The following features are planned: -More ideas welcome! +- [ ] Add support for only rendering component if `catalog-info.yaml` indicates the item is compatible with Coder +- [ ] OAuth support (vs. token auth) for linking Coder accounts +- [ ] "Open in Coder" button/card component for catalog items +- [ ] Example creating workspaces with Backstage Scaffolder +- [ ] Example dedicated "Coder" page in Backstage ## Contributing -Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/coder](http://localhost:3000/coder). - -You can also serve the plugin in isolation by running `yarn start` in the plugin directory. -This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. -It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory. +This plugin is part of the Backstage community. We welcome contributions! diff --git a/plugins/backstage-plugin-coder/docs/screenshot-with-coder.png b/plugins/backstage-plugin-coder/docs/screenshot-with-coder.png deleted file mode 100644 index 793b4a53..00000000 Binary files a/plugins/backstage-plugin-coder/docs/screenshot-with-coder.png and /dev/null differ diff --git a/plugins/backstage-plugin-coder/docs/screenshot-without-coder.png b/plugins/backstage-plugin-coder/docs/screenshot-without-coder.png deleted file mode 100644 index 69a7f91a..00000000 Binary files a/plugins/backstage-plugin-coder/docs/screenshot-without-coder.png and /dev/null differ diff --git a/plugins/backstage-plugin-coder/package.json b/plugins/backstage-plugin-coder/package.json index bb8ef618..bc9ca5e8 100644 --- a/plugins/backstage-plugin-coder/package.json +++ b/plugins/backstage-plugin-coder/package.json @@ -1,8 +1,8 @@ { "name": "@coder/backstage-plugin-coder", "version": "0.0.0", - "main": "src/index.ts", - "types": "src/index.ts", + "main": "dist/index.esm.js", + "types": "dist/index.d.ts", "license": "Apache-2.0", "private": true, "publishConfig": { @@ -51,5 +51,6 @@ }, "files": [ "dist" - ] + ], + "module": "./dist/index.esm.js" } diff --git a/plugins/backstage-plugin-coder/screenshots/catalog-item.png b/plugins/backstage-plugin-coder/screenshots/catalog-item.png new file mode 100644 index 00000000..93c41758 Binary files /dev/null and b/plugins/backstage-plugin-coder/screenshots/catalog-item.png differ diff --git a/plugins/backstage-plugin-coder/screenshots/coder-auth.png b/plugins/backstage-plugin-coder/screenshots/coder-auth.png new file mode 100644 index 00000000..7b8e9888 Binary files /dev/null and b/plugins/backstage-plugin-coder/screenshots/coder-auth.png differ