diff --git a/README.md b/README.md index b38acfeedc..84af697be5 100644 --- a/README.md +++ b/README.md @@ -59,9 +59,7 @@ To create a new plugin, make sure you're run `yarn` to install dependencies, the $ yarn create-plugin ``` -This will prompt you to enter an ID for your plugin, and then create your plugin inside the `plugins/` directory. The plugin will be automatically included in the app by modifing the app's `package.json` and `src/plugins.ts`. - -If you have `yarn start` already running you should be able to see the default page for your new plugin at [localhost:3000/my-plugin](http://localhost:3000/my-plugin), if you called the plugin `"my-plugin"`. +For more information see [Developing a Backstage Plugin](plugins/README.md) ## Documentation diff --git a/plugins/README.md b/plugins/README.md new file mode 100644 index 0000000000..b2b77cb49c --- /dev/null +++ b/plugins/README.md @@ -0,0 +1,60 @@ +# Plugin Development in Backstage +Backstage plugins provides features to an Backstage App. + +Each plugin is treated as a self-contained web app and can include almost any type of content. +Plugins all use a common set of platform API's and reusable UI components. +Plugins can fetch data either from a backend or through any RESTful API exposed directly or through +a proxy. + +## Creating a new plugin +On your command-line, invoke the `backstage-cli` to create a new plugin: +```bash +yarn create-plugin +``` + +![](create-plugin_output.png) + +This will create a new Backstage Plugin based on the ID that was provided. It will be built and +added to the Backstage App automatically. + +*If `yarn start` is already running you should be able to see the default page for your new +plugin directly by navigating to `http://localhost:3000/my-plugin`.* + +![](my-plugin_screenshot.png) + +## Plugin concepts / API + +### Routing +Each plugin is responsible for registering it's components to corresponding routes in the app. + +The app will call the `createPlugin` method on each plugin, passing in an `router` object with a set +of methods on it. + +```typescript +import { createPlugin } from '@spotify-backstage/core'; +import ExampleComponent from './components/ExampleComponent'; + +export default createPlugin({ + id: 'my-plugin', + register({ router }) { + router.registerRoute('/my-plugin', ExampleComponent); + }, +}); +``` + +#### `router` API +```typescript +type RouterHooks = { + registerRoute( + path: RoutePath, + Component: ComponentType, + options?: RouteOptions, + ): void; + + registerRedirect( + path: RoutePath, + target: RoutePath, + options?: RouteOptions, + ): void; +}; +``` diff --git a/plugins/create-plugin_output.png b/plugins/create-plugin_output.png new file mode 100644 index 0000000000..f048a9f5fc Binary files /dev/null and b/plugins/create-plugin_output.png differ diff --git a/plugins/my-plugin_screenshot.png b/plugins/my-plugin_screenshot.png new file mode 100644 index 0000000000..f12efe54fe Binary files /dev/null and b/plugins/my-plugin_screenshot.png differ