paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 32 Packages Projects Releases Wiki Activity

docs: update install step in plugin architecture docs

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2021-04-15 19:45:40 +02:00
parent 08a022fcdf
commit 610619dba0
1 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/overview/architecture-overview.md
+28 -20
View File
@@ -67,33 +67,41 @@ is available at
### Installing plugins
Plugins are typically loaded by the UI in your Backstage applications
`plugins.ts` file. For example,
[here](https://github.com/backstage/backstage/blob/master/packages/app/src/plugins.ts)
is that file in the Backstage sample app.
Plugins are typically installed as React components in your Backstage
application. For example,
[here](https://github.com/backstage/backstage/blob/master/packages/app/src/App.tsx)
is a file that imports many full-page plugins in the Backstage sample app.
Plugins can be enabled, and passed configuration in `apis.ts`. For example,
[here](https://github.com/backstage/backstage/blob/master/packages/app/src/apis.ts)
is that file in the Backstage sample app.
This is how the Lighthouse plugin would be enabled in a typical Backstage
application:
An example of one of these plugin components is the `CatalogIndexPage`, which is
a full-page view that allows you to browse entities in the Backstage catalog. It
is installed in the app by importing it and adding it as an element like this:
```tsx
import { ApiHolder, ApiRegistry } from '@backstage/core';
import {
lighthouseApiRef,
LighthouseRestApi,
} from '@backstage/plugin-lighthouse';
import { CatalogIndexPage } from '@backstage/plugin-catalog';
const builder = ApiRegistry.builder();
...
export const lighthouseApi = new LighthouseRestApi(/* URL of the lighthouse microservice! */);
builder.add(lighthouseApiRef, lighthouseApi);
export default builder.build() as ApiHolder;
const routes = (
<FlatRoutes>
...
<Route path="/catalog" element={<CatalogIndexPage />} />
...
</FlatRoutes>
);
```
Note that we use `"/catalog"` as our path to this plugin page, but we can choose
any route we want for the page, as long as it doesn't collide with the routes
that we choose for the other plugins in the app.
These components that are exported from plugins are referred to as "Plugin
Extension Components", or "Extensions Components". They are regular React
components, but in addition to being able to be rendered by React, they also
contain various pieces of metadata that is used to write together the entire
app. Extensions components are created using `create*Extension` methods, which
you can read more about in the
[composability documentation](../plugins/composability.md).
As of this moment, there is no config based install procedure for plugins. Some
code changes are required.