Migrate a Backstage app from the old frontend system to the new one. Use this skill when converting an app to use the new extension-based frontend system, including the hybrid migration phase and the full migration of routes, sidebar, plugins, APIs, themes, and other app-level concerns.
This skill helps migrate a Backstage app package (packages/app) from the old frontend system (@backstage/app-defaults) to the new extension-based frontend system (@backstage/frontend-defaults).
The migration follows a two-phase approach: first get the app running in hybrid mode with compatibility helpers, then gradually remove legacy code until the app is fully on the new system.
createApp from @backstage/app-defaults, plugins installed via <Route> elements in FlatRoutes, manual app shell with AppRouter + RootcreateApp from @backstage/frontend-defaults, plugins installed as features, extensions wired into an extension tree, no manual app shellcreateApp with convertLegacyAppRoot and convertLegacyAppOptions from @backstage/core-compat-api to bridge old codeFeature discovery is one of the biggest quality-of-life improvements in the new frontend system. Once enabled, any plugin added as a package.json dependency that exports a new-system plugin is automatically detected and installed — no code changes in App.tsx needed.
Add this to your app-config.yaml: