Tu primer plugin frontend

Objetivos del capítulo

Crear un plugin frontend con createPlugin.
Definir una ruta y un RouteRef.
Integrar el plugin en app.tsx y montarlo con FlatRoutes.
Pintar una tabla con datos del backend.

El :cap-02 mostró que Backstage son dos proyectos: la sala (frontend) y la cocina (backend). En el :cap-06 escribimos un plugin backend. Ahora le damos un panel al developer: una página React que muestre el estado de los servicios.

Construimos el plugin @sazon/plugin-sazon-status en el crate del capítulo.

createPlugin y RouteRef

El plugin frontend es un objeto declarativo. Define un id, opcionalmente unas rutas, y expone componentes que pueden ser montados en el shell.

Unresolved directive in chapters/cap-08-primer-plugin-frontend.adoc - include::../../chapters/chapter-08-frontend-plugin/src/plugin.ts[tag=plugin-skeleton]

Qué hace cada pieza

:code:`createPlugin({ id })` — declara el plugin.
:code:`createRouteRef({ id })` — define un identificador de ruta reutilizable.
:code:`routes: { root: rootRouteRef }` — expone la ruta para que otros plugins la referencien.

FlatRoutes: el router del shell

El shell (packages/app/src/App.tsx) usa FlatRoutes para componer las páginas. Cada plugin expone un componente "routable" que el shell monta en una ruta:

Unresolved directive in chapters/cap-08-primer-plugin-frontend.adoc - include::../../chapters/chapter-08-frontend-plugin/src/plugin.ts[tag=flatroutes]

En el App.tsx:

import { FlatRoutes } from '@backstage/core-app-api';
import { Route } from 'react-router-dom';
import { SazonStatusPage } from '@sazon/plugin-sazon-status';

<FlatRoutes>
  <Route path="/sazon-status" element={<SazonStatusPage />} />
</FlatRoutes>

El componente de página

Una página es un componente React que consume APIs y renderiza UI. Aquí una página con una tabla:

Unresolved directive in chapters/cap-08-primer-plugin-frontend.adoc - include::../../chapters/chapter-08-frontend-plugin/src/components/SazonStatusPage.tsx[tag=status-table-component]

¿Por qué InfoCard y Table?

Son componentes de @backstage/core-components. Mantienen el look & feel consistente (theme, espaciado, tipografía) en todos los plugins. Si los usas, tu plugin se ve "de Backstage" sin esfuerzo.

Integrar el plugin en el shell

Para activar el plugin, edita packages/app/src/App.tsx:

Importa el componente routable.
Añade una <Route> apuntando a él.
Opcionalmente, añade un enlace en SidebarItem para que aparezca en la nav lateral.

import { SidebarItem } from '@backstage/core-components';
import { useRouteRef } from '@backstage/core-plugin-api';
import ExtensionIcon from '@material-ui/icons/Extension';

<SidebarItem text="Sazón status" icon={ExtensionIcon} to="/sazon-status" />

Example 8. Receta del capítulo

Crea plugins/sazon-status/ con package.json y dependencias de Backstage.
Define createPlugin() + createRouteRef() en plugin.ts.
Implementa SazonStatusPage como componente React.
Registra el plugin en packages/app/src/App.tsx con FlatRoutes.
Añade un SidebarItem para acceso rápido.

Resumen

Un plugin frontend = createPlugin() + rutas + componentes routable.
createRouteRef da un id reutilizable para la ruta.
FlatRoutes monta los componentes en el shell.
@backstage/core-components (InfoCard, Table, etc.) asegura consistencia visual.

Glosario del capítulo

createPlugin: Función de @backstage/core-plugin-api que declara un plugin frontend.
RouteRef: Identificador inmutable de una ruta, montado en el plugin.
FlatRoutes: Componente del shell que monta rutas planas (sin sub-routers).
InfoCard: Componente base con título y slot, de @backstage/core-components.
SidebarItem: Elemento de la nav lateral; se monta en Sidebar.

Próximo capítulo

Frontend: datos, APIs y APIs de Backstage —consumir el catalog, llamar a endpoints custom, manejar errores con NotificationApi.