Restrict createDevApp options

Limit createDevApp to features and bindRoutes so advanced createApp configuration stays out of the dev-app helper API.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

.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`.

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.
 

packages/frontend-dev-utils/report.api.md

@@ -12,7 +12,7 @@ export function createDevApp(options: CreateDevAppOptions): void;
 
 // @public
 export interface CreateDevAppOptions
-  extends Omit<CreateAppOptions, 'features'> {
+  extends Pick<CreateAppOptions, 'bindRoutes'> {
   features: (FrontendFeature | FrontendFeatureLoader)[];
 }
 ```

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);

packages/frontend-dev-utils/src/createDevApp.tsx

@@ -46,7 +46,7 @@ const BuiCss = lazy(() => import('./BuiCss'));
  * @public
  */
 export interface CreateDevAppOptions
-  extends Omit<CreateAppOptions, 'features'> {
+  extends Pick<CreateAppOptions, 'bindRoutes'> {
   /**
    * 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);