docs: update plugin installation docs

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2021-04-15 20:12:33 +02:00
parent 610619dba0
commit c614ede9a5
25 changed files with 152 additions and 283 deletions
+2 -10
View File
@@ -23,16 +23,8 @@ cd packages/app
yarn add @backstage/plugin-kubernetes
```
Once the package has been installed, you need to import the plugin in your app.
Add the following to `packages/app/src/plugins.ts`:
`plugins.ts`:
```typescript
export { plugin as Kubernetes } from '@backstage/plugin-kubernetes';
```
Now, add the "Kubernetes" tab to the catalog entity page. In
Once the package has been installed, you need to import the plugin in your app
by adding the "Kubernetes" tab to the catalog entity page. In
`packages/app/src/components/catalog/EntityPage.tsx`, you'll add a router to get
to the tab, and add the tab itself.
@@ -24,14 +24,8 @@ yarn add @backstage/plugin-catalog
### Adding the Plugin to your `packages/app`
Add the following entry to the head of your `packages/app/src/plugins.ts`:
```ts
export { catalogPlugin } from '@backstage/plugin-catalog';
```
Next we need to install the two pages that the catalog plugin provides. You can
choose any name for these routes, but we recommend the following:
Add the two pages that the catalog plugin provides to your app. You can choose
any name for these routes, but we recommend the following:
```tsx
// packages/app/src/App.tsx
@@ -26,14 +26,8 @@ yarn add @backstage/plugin-scaffolder
### Adding the Plugin to your `packages/app`
Add the following entry to the head of your `packages/app/src/plugins.ts`:
```ts
export { scaffolderPlugin } from '@backstage/plugin-scaffolder';
```
Next we need to install the root page that the Scaffolder plugin provides. You
can choose any path for the route, but we recommend the following:
Add the root page that the Scaffolder plugin provides to your app. You can
choose any path for the route, but we recommend the following:
```tsx
import { ScaffolderPage } from '@backstage/plugin-scaffolder';
+2 -8
View File
@@ -29,14 +29,8 @@ yarn add @backstage/plugin-techdocs
Once the package has been installed, you need to import the plugin in your app.
Add the following to `packages/app/src/plugins.ts`:
```typescript
export { plugin as TechDocs } from '@backstage/plugin-techdocs';
```
Now we can add a route for the TechDocs page. In `packages/app/src/App.tsx`,
import TechDocsPage and add the following to `FlatRoutes`:
In `packages/app/src/App.tsx`, import TechDocsPage and add the following to
`FlatRoutes`:
```tsx
import { TechDocsPage } from '@backstage/plugin-techdocs';
@@ -27,14 +27,7 @@ package.json. Backstage Apps are set up as monorepos with
[yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/). Since
CircleCI is a frontend UI plugin, it goes in `app` rather than `backend`.
2. Add the plugin itself to the App:
```js
// packages/app/src/plugins.ts
export { plugin as CircleCi } from '@backstage/plugin-circleci';
```
3. Register the plugin in the entity pages:
2. Add the `EntityCircleCIContent` extension to the entity pages in the app:
```diff
// packages/app/src/components/catalog/EntityPage.tsx
+1 -2
View File
@@ -100,8 +100,7 @@ There are three things needed for a Backstage app to start making use of a
plugin.
1. Add plugin as dependency in `app/package.json`
2. `import` plugin in `app/src/plugins.ts`
3. Import and use one or more plugin extensions, for example in
2. Import and use one or more plugin extensions, for example in
`app/src/App.tsx`.
Luckily these three steps happen automatically when you create a plugin with the