diff --git a/.changeset/add-frontend-dev-utils.md b/.changeset/add-frontend-dev-utils.md index 902dc8019a..987f02c6d9 100644 --- a/.changeset/add-frontend-dev-utils.md +++ b/.changeset/add-frontend-dev-utils.md @@ -2,4 +2,4 @@ '@backstage/frontend-dev-utils': minor --- -Added `@backstage/frontend-dev-utils`, a new package that provides a minimal helper for wiring up a development app for frontend plugins using the new frontend system. It exports a `createDevApp` function that handles creating and rendering a development app from a `dev/` entry point. The dev app automatically bypasses the sign-in page and loads the `@backstage/ui` CSS. The options interface extends all `createApp` options from `@backstage/frontend-defaults` (except `features`), such as `bindRoutes` and `advanced`. +Added `@backstage/frontend-dev-utils`, a new package that provides a minimal helper for wiring up a development app for frontend plugins using the new frontend system. It exports a `createDevApp` function that handles creating and rendering a development app from a `dev/` entry point. The dev app automatically bypasses the sign-in page and loads the `@backstage/ui` CSS. The options interface accepts `features` together with route bindings through `bindRoutes`. diff --git a/docs/frontend-system/building-plugins/01-index.md b/docs/frontend-system/building-plugins/01-index.md index b8e1346bee..861f454280 100644 --- a/docs/frontend-system/building-plugins/01-index.md +++ b/docs/frontend-system/building-plugins/01-index.md @@ -121,7 +121,7 @@ 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. The options also accept all other `createApp` options from `@backstage/frontend-defaults`, such as `bindRoutes` and `advanced`. +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 use `bindRoutes` to wire up any external routes that your plugin depends on. 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. diff --git a/packages/frontend-dev-utils/report.api.md b/packages/frontend-dev-utils/report.api.md index 42261680ab..0f8f1dbd6a 100644 --- a/packages/frontend-dev-utils/report.api.md +++ b/packages/frontend-dev-utils/report.api.md @@ -12,7 +12,7 @@ export function createDevApp(options: CreateDevAppOptions): void; // @public export interface CreateDevAppOptions - extends Omit { + extends Pick { features: (FrontendFeature | FrontendFeatureLoader)[]; } ``` diff --git a/packages/frontend-dev-utils/src/createDevApp.test.tsx b/packages/frontend-dev-utils/src/createDevApp.test.tsx index ea377e2e2f..2dc4a69101 100644 --- a/packages/frontend-dev-utils/src/createDevApp.test.tsx +++ b/packages/frontend-dev-utils/src/createDevApp.test.tsx @@ -19,11 +19,13 @@ import { createFrontendPlugin, } from '@backstage/frontend-plugin-api'; import { within } from '@testing-library/react'; -import { mockApis } from '@backstage/test-utils'; import { createDevApp } from './createDevApp'; +const anyEnv = (process.env = { ...process.env }) as any; + describe('createDevApp', () => { afterEach(() => { + delete anyEnv.APP_CONFIG; document.getElementById('root')?.remove(); }); @@ -44,11 +46,18 @@ describe('createDevApp', () => { ], }); + anyEnv.APP_CONFIG = [ + { + context: 'test', + data: { + app: { title: 'Test App' }, + backend: { baseUrl: 'http://localhost' }, + }, + }, + ]; + createDevApp({ features: [testPlugin], - advanced: { - configLoader: async () => ({ config: mockApis.config() }), - }, }); const body = within(document.body); diff --git a/packages/frontend-dev-utils/src/createDevApp.tsx b/packages/frontend-dev-utils/src/createDevApp.tsx index 7ec34b929b..09616e7286 100644 --- a/packages/frontend-dev-utils/src/createDevApp.tsx +++ b/packages/frontend-dev-utils/src/createDevApp.tsx @@ -46,7 +46,7 @@ const BuiCss = lazy(() => import('./BuiCss')); * @public */ export interface CreateDevAppOptions - extends Omit { + extends Pick { /** * The list of features to load in the dev app. */ @@ -68,13 +68,13 @@ export interface CreateDevAppOptions * @public */ export function createDevApp(options: CreateDevAppOptions): void { - const { features, ...createAppOptions } = options; + const { features, bindRoutes } = options; const devFeatures: CreateAppOptions['features'] = [ appPluginOverride, ...features, ]; const appOptions: CreateAppOptions = { - ...createAppOptions, + bindRoutes, features: devFeatures, }; const app = createApp(appOptions);