Cheat notes · Module 05 · The frontend plugin

A frontend plugin in the new frontend system

A five-minute review for when you have done this module and want it back in your head. Open the full module for the steps and the lab, or the full text to print.

The idea

The new frontend system builds the whole app from extensions with ids. You add a page by installing a package, not by editing App.tsx, and you can configure, move or disable any extension by its id in app-config.yaml.

Remember

Extension: one piece of the app with an id (page:readiness), a place it attaches to, and outputs such as a React element.
Blueprint: a factory for one kind of extension. PageBlueprint.make({ params: { path, routeRef, title, loader } }) makes a page; with a title it also gets a sidebar item.
createFrontendPlugin({ pluginId, extensions, routes }): groups extensions. The app installs every plugin package in packages/app/package.json (app.packages: all).
Config by id: app.extensions can set config (- page:readiness: { config: { path: /scorecards } }) or disable an extension, without code.
The Visualizer (bottom of the sidebar, tab Text) shows every extension and where it attaches.

Pitfalls

Configuring an id that does not exist (page:readines): no error on the page, nothing moves. The browser console says INVALID_EXTENSION_CONFIG_KEY. Copy ids from the Visualizer.
Forgetting to restart after adding a package: the app only picks up new packages on start.

Commands

`yarn new --select frontend-plugin --option pluginId=readiness`	Generate the plugin; it is added to `packages/app/package.json`
`grep -n readiness packages/app/package.json`	Installed means listed here

A page, and moving it by config

export const readinessPage = PageBlueprint.make({
  params: {
    path: '/readiness',
    routeRef: rootRouteRef,
    title: 'Readiness',            // also a sidebar item
    loader: () => import('./components/ReadinessPage').then(m => <m.ReadinessPage />),
  },
});

# app-config.yaml
app:
  extensions:
    - page:readiness:
        config:
          path: /scorecards

Test yourself

Answer in your head first, then open the answer.

How did the app learn about your plugin?

yarn new added the package to packages/app/package.json, and the app installs every plugin package listed there.

What makes Readiness appear in the sidebar?

The title on the page made with PageBlueprint.

How do you change the path of someone else's page without forking it?

Set config.path for its extension id under app.extensions.

Where module 05 leaves you: A Readiness item in the sidebar opens /readiness, served by your own frontend plugin. Merged.