paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Document createDevApp pattern for frontend plugin development

Browse Source 
Add documentation for the new `@backstage/frontend-dev-utils` package
across three docs pages: the frontend system building plugins guide,
the CLI build system reference, and the project structure overview.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
2026-03-16 11:50:57 +01:00
parent c25532a7a1
commit 0b4ed8550d
3 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/frontend-system/building-plugins/01-index.md
+15
View File
@@ -110,6 +110,21 @@ What we've built here is a very common type of plugin. It's a top-level tool tha
We have also provided external access to our route reference by passing it to the plugin `routes` option. This makes it possible for app integrators to bind an external link from a different plugin to our plugin page. You can read more about how this works in the [External Route References](../architecture/36-routes.md#external-route-references) section.
## Running a dev server
Each frontend plugin package has a `dev/` folder that is used as the entry point when you run `yarn start`. This is a convenient way to run your plugin in isolation during development. The `@backstage/frontend-dev-utils` package provides a `createDevApp` helper that sets up a minimal app for this purpose:
```tsx title="in dev/index.ts"
import { createDevApp } from '@backstage/frontend-dev-utils';
import myPlugin from '../src';
createDevApp({ features: [myPlugin] });
```
This will create and render a Backstage app with only your plugin installed. If you need to include additional features that your plugin depends on, pass them along in the `features` array. You can also forward additional options to `createApp` from `@backstage/frontend-defaults` using the `createAppOptions` option.
The dev setup is started by running `yarn start` in the plugin directory, which uses the `backstage-cli package start` command. It sets up a local development server with hot reloading, just like a full app.
## Utility APIs
Another type of extensions that is commonly used are [Utility APIs](../utility-apis/01-index.md). They can encapsulate shared pieces of functionality of your plugin, for example an API client for a backend service. You can optionally export your Utility API for other plugins to use, or allow integrators to replace the implementation of your Utility API with their own. For details on how to define and provide your own Utility API in your plugin, see the section on [creating Utility APIs](../utility-apis/02-creating.md).