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 |
-| ---------------------------------------------------------------- | ---------------------------------------------------------- |
-|  |  |
-
-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
+
+
-## Adding the component
+
-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