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

docs(devtools): update README for new frontend system as default

Browse Source 
Move old frontend system wiring instructions to an "Old Frontend
System" section. The default installation path now uses package
discovery with no manual wiring needed.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-04 11:37:33 +01:00
parent 348141b8ee
commit 96662b763e
1 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/devtools/README.md
+39 -37
View File
@@ -66,42 +66,14 @@ You need to setup the [DevTools backend plugin](../devtools-backend/README.md) b
### Frontend
To setup the DevTools frontend you'll need to do the following steps:
Install the `@backstage/plugin-devtools` package in your frontend app:
1. First we need to add the `@backstage/plugin-devtools` package to your frontend app:
```sh
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-devtools
```
```sh
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-devtools
```
2. Now open the `packages/app/src/App.tsx` file
3. Then after all the import statements add the following line:
```ts
import { DevToolsPage } from '@backstage/plugin-devtools';
```
4. In this same file just before the closing `</ FlatRoutes>`, this will be near the bottom of the file, add this line:
```ts
<Route path="/devtools" element={<DevToolsPage />} />
```
5. Next open the `packages/app/src/components/Root/Root.tsx` file
6. We want to add this icon import after all the existing import statements:
```ts
import BuildIcon from '@material-ui/icons/Build';
```
7. Then add this line just after the `<SidebarSettings />` line:
```ts
<SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
```
8. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
Once installed, the plugin is automatically available in your app through the default package discovery. For more details and alternative installation methods, see [installing plugins](https://backstage.io/docs/frontend-system/building-apps/installing-plugins).
## Customizing
@@ -166,8 +138,6 @@ You can also add tabs to show content from other plugins that fit well with the
#### Catalog Unprocessed Entities Tab
##### New Frontend System
Create an extension and/or load a 3rd party extension to add additional tabs.
```shell
@@ -197,7 +167,7 @@ const appFeature = createFrontendModule({
});
```
##### Old System
##### Old Frontend System
Here's how to add the Catalog Unprocessed Entities tab:
@@ -230,6 +200,38 @@ Here's how to add the Catalog Unprocessed Entities tab:
4. Now run `yarn start` and navigate to the DevTools you'll see a new tab for Unprocessed Entities
## Old Frontend System
If your Backstage app uses the old frontend system, you need to manually wire the plugin into your app.
1. Open the `packages/app/src/App.tsx` file
2. Then after all the import statements add the following line:
```ts
import { DevToolsPage } from '@backstage/plugin-devtools';
```
3. In this same file just before the closing `</ FlatRoutes>`, this will be near the bottom of the file, add this line:
```ts
<Route path="/devtools" element={<DevToolsPage />} />
```
4. Next open the `packages/app/src/components/Root/Root.tsx` file
5. We want to add this icon import after all the existing import statements:
```ts
import BuildIcon from '@material-ui/icons/Build';
```
6. Then add this line just after the `<SidebarSettings />` line:
```ts
<SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
```
7. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
## Permissions
The DevTools plugin supports the [permissions framework](https://backstage.io/docs/permissions/overview), the following sections outline how you can use them with the assumption that you have the permissions framework setup and working.