plugin-new-frontend-system-support

Create dual-entry points for Backstage plugins supporting legacy and new frontend systems.

34.1k|7.5k|Updated Jan 24, 2020
One-click install
npx skills add https://github.com/backstage/backstage --skill plugin-new-frontend-system-support
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: plugin-new-frontend-system-support
Source: https://github.com/backstage/backstage/tree/main/docs/.well-known/skills/plugin-new-frontend-system-support
Command: npx skills add https://github.com/backstage/backstage --skill plugin-new-frontend-system-support

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables a Backstage plugin to run under both legacy and new frontend systems by introducing a dual-entry point, avoiding forcing consumers to migrate immediately.

Core Features & Use Cases

  • Dual entry point: keep existing src/plugin.ts (old) and add src/alpha.tsx (new)
  • Old system vs New system separation: maintain compatibility while enabling modern PageBlueprint-based pages
  • NFS page variants: implement NFS components that render without the old page shell
  • Step-by-step migration guidance: patterns for header handling, API migration to ApiBlueprint, and route ownership
  • Applies to published or shared plugins that need to work in both environments

Quick Start

Create the alpha entry point, export it via exports, implement the dual-header NFS components, and wire routes so the plugin supports both old and new frontend systems.

Frequently Asked Questions about plugin-new-frontend-system-support

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I support legacy and new frontend systems in a Backstage plugin?

Dual frontend-system support uses a dual-entry point to keep existing src/plugin.ts for old routes and add src/alpha.tsx for new PageBlueprint-based pages, allowing Backstage plugins to run in both environments without forcing immediate consumer migration.

What is a dual-entry point for Backstage plugin migration?

A dual-entry point is an architecture pattern for Backstage plugin migration that maintains the old src/plugin.ts entry alongside a new src/alpha.tsx entry, enabling PageBlueprint-based pages while preserving compatibility with the old frontend system.

Do I need PageBlueprint to migrate Backstage plugins to the new frontend system?

You need PageBlueprint to implement new frontend system pages in Backstage. When migrating shared plugins, you use PageBlueprint in the alpha entry point to define pages while keeping the old routes intact for legacy compatibility.

How do I handle NFS page variants when migrating Backstage plugins?

To handle NFS page variants during Backstage plugin migration, implement NFS components that render independently without the old page shell. This allows the new frontend system to display pages correctly without legacy wrapper dependencies.

What is the best way to migrate Backstage APIs to ApiBlueprint?

Migrating Backstage APIs to ApiBlueprint involves updating your alpha entry point exports to use ApiBlueprint patterns. This separates API ownership and route definitions between the old and new frontend systems for a smooth transition.

When should I not use a dual-entry approach for Backstage plugin migration?

You should not use a dual-entry approach for Backstage plugin migration if your plugin is private and unpublished. Dual-entry implementation is designed for published or shared plugins that need to work across both old and new frontend environments for consumers.