frontend-plugin-api: move app blueprints to new app-react package

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2026-01-16 10:58:04 +01:00
parent d15524f895
commit 9ccf84e219
33 changed files with 653 additions and 34 deletions
@@ -444,7 +444,7 @@ const app = createApp({
Can be converted to the following extension:
```tsx
import { SignInPageBlueprint } from '@backstage/frontend-plugin-api';
import { SignInPageBlueprint } from '@backstage/plugin-app-react';
const signInPage = SignInPageBlueprint.make({
params: {
@@ -492,7 +492,7 @@ const app = createApp({
Can be converted to the following extension:
```tsx
import { ThemeBlueprint } from '@backstage/frontend-plugin-api';
import { ThemeBlueprint } from '@backstage/plugin-app-react';
const customLightThemeExtension = ThemeBlueprint.make({
name: 'custom-light',
@@ -535,7 +535,7 @@ const app = createApp({
Icons are now installed as extensions, using the `IconBundleBlueprint` to make new instances which can be added to the app.
```ts
import { IconBundleBlueprint } from '@backstage/frontend-plugin-api';
import { IconBundleBlueprint } from '@backstage/plugin-app-react';
const exampleIconBundle = IconBundleBlueprint.make({
name: 'example-bundle',
@@ -586,10 +586,8 @@ Can be converted to the following extension:
```tsx
import { catalogTranslationRef } from '@backstage/plugin-catalog/alpha';
import {
createTranslationMessages,
TranslationBlueprint,
} from '@backstage/frontend-plugin-api';
import { createTranslationMessages } from '@backstage/frontend-plugin-api';
import { TranslationBlueprint } from '@backstage/plugin-app-react';
const catalogTranslations = TranslationBlueprint.make({
name: 'catalog-overrides',
@@ -705,7 +703,7 @@ export const navModule = createFrontendModule({
Then in the actual implementation for the `SidebarContent` extension, you can provide something like the following, where you implement the entire `Sidebar` component.
```tsx title="in packages/app/src/modules/nav/Sidebar.tsx"
import { NavContentBlueprint } from '@backstage/frontend-plugin-api';
import { NavContentBlueprint } from '@backstage/plugin-app-react';
export const SidebarContent = NavContentBlueprint.make({
params: {
@@ -23,6 +23,8 @@ Navigation item extensions are used to provide menu items that link to different
Page extensions provide content for a particular route in the app. By default pages are attached to the app routes extensions, which renders the root routes.
## Extension blueprints in `@backstage/plugin-app-react`
### SignInPage - [Reference](https://backstage.io/api/stable/variables/_backstage_frontend-plugin-api.SignInPageBlueprint.html)
Sign-in page extension have a single purpose - to implement a custom sign-in page. They are always attached to the app root extension and are rendered before the rest of the app until the user is signed in.
@@ -43,6 +45,14 @@ Icon bundle extensions provide the ability to replace or provide new icons to th
Translation extension provide custom translation messages for the app. They can be used both to override the default english messages to custom ones, as well as provide translations for additional languages.
### NavContent - [Reference](https://backstage.io/api/stable/variables/_backstage_frontend-plugin-api.NavContentBlueprint.html)
Nav content extensions allow you to replace the entire navbar with your own component. They are always attached to the app nav extension.
### Router - [Reference](https://backstage.io/api/stable/variables/_backstage_frontend-plugin-api.RouterBlueprint.html)
Router extensions allow you to replace the router component used by the app. They are always attached to the app root extension.
## Extension blueprints in `@backstage/plugin-catalog-react/alpha`
These are the [extension blueprints](../architecture/23-extension-blueprints.md) provided by the Catalog plugin.
@@ -52,11 +52,8 @@ In order to override a Swappable Component, you need to create a `SwappableCompo
There are two different ways to add extensions to the `app` plugin, both are documented below in an example of overriding the `Progress` Swappable Component.
```tsx title="in packages/app/src/App.tsx"
import {
Progress,
SwappableComponentBlueprint,
createFrontendModule,
} from '@backstage/frontend-plugin-api';
import { Progress, createFrontendModule } from '@backstage/frontend-plugin-api';
import { SwappableComponentBlueprint } from '@backstage/plugin-app-react';
import { MyCustomProgress } from './CustomProgress';
import { createApp } from '@backstage/frontend-defaults';
import appPlugin from '@backstage/plugin-app';