docs: update plugin installation docs
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user