Use frontend-dev-utils in new frontend plugin template

Update the new frontend plugin template to use createDevApp in its dev entry point and teach cli-module-new to resolve frontend-dev-utils versions for generated packages.

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

.changeset/new-frontend-plugin-template-dev-utils.md

@@ -0,0 +1,6 @@
+---
+'@backstage/cli': patch
+'@backstage/cli-module-new': patch
+---
+
+Updated the new frontend plugin template to use `@backstage/frontend-dev-utils` in its `dev/` entry point instead of wiring `createApp` manually. Generated plugins now get the same dev app helper setup as the built-in examples.

packages/cli-module-new/src/lib/version.test.ts

@@ -78,6 +78,9 @@ describe('createPackageVersionProvider', () => {
     expect(provider('@backstage/core-plugin-api')).toBe(
       `^${corePluginApiPkg.version}`,
     );
+    expect(provider('@backstage/frontend-dev-utils')).toBe(
+      `^${packageVersions['@backstage/frontend-dev-utils']}`,
+    );
   });
 
   describe('with backstage protocol options', () => {

packages/cli-module-new/src/lib/version.ts

@@ -42,6 +42,7 @@ import { version as coreComponents } from '../../../core-components/package.json
 import { version as corePluginApi } from '../../../core-plugin-api/package.json';
 import { version as devUtils } from '../../../dev-utils/package.json';
 import { version as errors } from '../../../errors/package.json';
+import { version as frontendDevUtils } from '../../../frontend-dev-utils/package.json';
 import { version as frontendDefaults } from '../../../frontend-defaults/package.json';
 import { version as frontendPluginApi } from '../../../frontend-plugin-api/package.json';
 import { version as frontendTestUtils } from '../../../frontend-test-utils/package.json';
@@ -66,6 +67,7 @@ export const packageVersions: Record<string, string> = {
   '@backstage/core-plugin-api': corePluginApi,
   '@backstage/dev-utils': devUtils,
   '@backstage/errors': errors,
+  '@backstage/frontend-dev-utils': frontendDevUtils,
   '@backstage/frontend-defaults': frontendDefaults,
   '@backstage/frontend-plugin-api': frontendPluginApi,
   '@backstage/frontend-test-utils': frontendTestUtils,

packages/cli/templates/new-frontend-plugin/dev/index.tsx

@@ -1,10 +1,5 @@
-import { createApp } from '@backstage/frontend-defaults';
-import ReactDOM from 'react-dom';
+import { createDevApp } from '@backstage/frontend-dev-utils';
 
 import plugin from '../src';
 
-const app = createApp({
-  features: [plugin],
-});
-
-ReactDOM.render(app.createRoot(), document.getElementById('root'));
+createDevApp({ features: [plugin] });

packages/cli/templates/new-frontend-plugin/package.json.hbs

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
-    "@backstage/frontend-defaults": "{{versionQuery '@backstage/frontend-defaults'}}",
+    "@backstage/frontend-dev-utils": "{{versionQuery '@backstage/frontend-dev-utils'}}",
     "@backstage/frontend-test-utils": "{{versionQuery '@backstage/frontend-test-utils'}}",
     "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}",
     "@testing-library/react": "{{versionQuery '@testing-library/react' '14.0.0'}}",