diff --git a/docs/frontend-system/building-plugins/migrating.md b/docs/frontend-system/building-plugins/migrating.md
index 2fb64e0eab..e894e6b03d 100644
--- a/docs/frontend-system/building-plugins/migrating.md
+++ b/docs/frontend-system/building-plugins/migrating.md
@@ -1,6 +1,6 @@
---
id: migrating
-title: Migrating an existing Frontend Plugin to the New Frontend System
+title: Migrating Plugins
sidebar_label: Migration Guide
# prettier-ignore
description: How to migrate an existing frontend plugin to the new frontend system
@@ -17,10 +17,10 @@ Pages that were previously created using the `createRoutableExtension` extension
For example, given the following page:
```ts
-export const HomepageRoot = homePlugin.provide(
+export const FooPage = fooPlugin.provide(
createRoutableExtension({
- name: 'HomepageRoot',
- component: () => import('./components').then(m => m.HomepageRoot),
+ name: 'FooPage',
+ component: () => import('./components').then(m => m.FooPage),
mountPoint: rootRouteRef,
}),
);
@@ -29,36 +29,23 @@ export const HomepageRoot = homePlugin.provide(
it can be migrated as the following:
```tsx
-const homePage = createPageExtension({
- defaultPath: '/home',
+import { createPageExtension } from '@backstage/frontend-plugin-api';
+import {
+ compatWrapper,
+ convertLegacyRouteRef,
+} from '@backstage/core-compat-api';
+
+const fooPage = createPageExtension({
+ defaultPath: '/foo',
// you can reuse the existing routeRef
// by wrapping into the convertLegacyRouteRef.
routeRef: convertLegacyRouteRef(rootRouteRef),
// these inputs usually match the props required by the component.
- inputs: {
- props: createExtensionInput(
- {
- children: coreExtensionData.reactElement.optional(),
- title: titleExtensionDataRef.optional(),
- },
-
- {
- singleton: true,
- optional: true,
- },
- ),
- },
loader: ({ inputs }) =>
import('./components/').then(m =>
// The compatWrapper utility allows you to use the existing
// legacy frontend utilities used internally by the components.
- compatWrapper(
- ,
- ),
+ compatWrapper(),
),
});
```