App Frontend System Migration Skill

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.

Key Concepts

• Old system: createApp from @backstage/app-defaults, plugins installed via <Route> elements in FlatRoutes, manual app shell with AppRouter + Root
• New system: createApp from @backstage/frontend-defaults, plugins installed as features, extensions wired into an extension tree, no manual app shell
• Feature discovery: The new system can automatically discover and install plugins from your app's dependencies — no manual imports needed. This is the default for new apps and should be enabled early in migration.
• Hybrid mode: The new createApp with convertLegacyAppRoot and convertLegacyAppOptions from @backstage/core-compat-api to bridge old code

Feature Discovery

Feature 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.

Enabling Feature Discovery