docs: update frontend plugin docs to default to new frontend system

Restructure plugin documentation so that the new frontend system is
the default, unlabeled installation path. Old frontend system
instructions are moved to a dedicated "Old Frontend System" section.

Add a new "Installing Plugins" page to the frontend system docs
covering package discovery, manual installation, and configuration.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-04 11:24:35 +01:00
parent a5ff77fcbe
commit 5a463b320c
5 changed files with 135 additions and 141 deletions
+9 -33
View File
@@ -6,19 +6,22 @@ The Backstage UI Themer helps you convert an existing MUI v5 theme into Backstag
## Installation
### 1) Add the dependency to your app
Run this from your Backstage repo root:
Add the dependency to your app:
```bash
yarn --cwd packages/app add @backstage/plugin-mui-to-bui
```
### 2) Wire it up depending on your frontend system
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).
#### Old frontend system (legacy `App.tsx` with `<FlatRoutes>`)
## Accessing the Themer page
Add a route for the page in your app:
- Navigate to `/mui-to-bui` in your Backstage app (for example `http://localhost:3000/mui-to-bui`).
- Optional: Add a sidebar/link in your app that points to `/mui-to-bui` if you want a permanent navigation entry.
## Old Frontend System
If your Backstage app uses the old frontend system, add a route for the page in your app:
```tsx
// packages/app/src/App.tsx
@@ -34,30 +37,3 @@ export const App = () => (
</FlatRoutes>
);
```
#### New frontend system
If package discovery is enabled in your app, this plugin is picked up automatically after installation — no code changes required. Just navigate to `/mui-to-bui`.
If you prefer explicit registration (or don't use discovery), register the plugin as a feature. The page route (`/mui-to-bui`) is provided by the plugin.
```tsx
// packages/app/src/App.tsx (or your app entry where you call createApp)
import React from 'react';
import { createApp } from '@backstage/frontend-defaults';
import buiThemerPlugin from '@backstage/plugin-mui-to-bui';
const app = createApp({
features: [
// ...other features
buiThemerPlugin,
],
});
export default app.createRoot();
```
## Accessing the Themer page
- Navigate to `/mui-to-bui` in your Backstage app (for example `http://localhost:3000/mui-to-bui`).
- Optional: Add a sidebar/link in your app that points to `/mui-to-bui` if you want a permanent navigation entry.