docs(catalog-import): update README for new frontend system as default

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:35:40 +01:00
parent c202cd698a
commit 5f80ce482d
+14 -10
View File
@@ -15,22 +15,14 @@ Some features are not yet available for all supported Git providers.
## Getting Started
1. Install the Catalog Import Plugin:
Install the Catalog Import Plugin:
```bash
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-catalog-import
```
2. Add the `CatalogImportPage` extension to the app:
```tsx
// packages/app/src/App.tsx
import { CatalogImportPage } from '@backstage/plugin-catalog-import';
<Route path="/catalog-import" element={<CatalogImportPage />} />;
```
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).
## Customizations
@@ -104,6 +96,18 @@ Following React components accept optional props for providing custom example en
/>
```
## Old Frontend System
If your Backstage app uses the old frontend system, add the `CatalogImportPage` extension to the app:
```tsx
// packages/app/src/App.tsx
import { CatalogImportPage } from '@backstage/plugin-catalog-import';
<Route path="/catalog-import" element={<CatalogImportPage />} />;
```
## Development
Use `yarn start` to run a [development version](./dev/index.tsx) of the plugin that can be used to validate each flow with mocked data.