@backstage/frontend-dev-utils 0.0.0-nightly-20260317031259

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @backstage/frontend-dev-utils
+
+## 0.0.0-nightly-20260317031259
+
+### Minor Changes
+
+- c25532a: 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`.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.0.0-nightly-20260317031259
+  - @backstage/ui@0.0.0-nightly-20260317031259
+  - @backstage/plugin-app@0.0.0-nightly-20260317031259
+  - @backstage/frontend-defaults@0.0.0-nightly-20260317031259

package/README.md

@@ -0,0 +1,19 @@
+# @backstage/frontend-dev-utils
+
+Utilities for developing Backstage frontend plugins using the new frontend system.
+
+This package provides a minimal helper for wiring up a development app from a `dev/` entry point, making it easy to run and test frontend plugins in isolation.
+
+## Installation
+
+Install the package via Yarn:
+
+```sh
+cd plugins/<plugin> # if within a monorepo
+yarn add -D @backstage/frontend-dev-utils
+```
+
+## Documentation
+
+- [Backstage Readme](https://github.com/backstage/backstage/blob/master/README.md)
+- [Backstage Documentation](https://backstage.io/docs)

package/dist/BuiCss.esm.js

@@ -0,0 +1,6 @@
+import '@backstage/ui/css/styles.css';
+
+var BuiCss = () => null;
+
+export { BuiCss as default };
+//# sourceMappingURL=BuiCss.esm.js.map

package/dist/BuiCss.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiCss.esm.js","sources":["../src/BuiCss.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// This ensures that dev apps always have the BUI CSS loaded.\n// eslint-disable-next-line @backstage/no-ui-css-imports-in-non-frontend\nimport '@backstage/ui/css/styles.css';\n\n/**\n * Placeholder component to allow lazy loading of the BUI CSS import. This\n * ensures that we don't load the CSS as soon as anyone imports this package.\n */\nexport default () => null;\n"],"names":[],"mappings":";;AAwBA,aAAe,MAAM,IAAA;;;;"}

package/dist/createDevApp.esm.js

@@ -0,0 +1,57 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createApp } from '@backstage/frontend-defaults';
+import appPlugin from '@backstage/plugin-app';
+import { lazy, Suspense } from 'react';
+import 'react-dom';
+
+const appPluginOverride = appPlugin.withOverrides({
+  extensions: [
+    appPlugin.getExtension("sign-in-page:app").override({
+      disabled: true
+    })
+  ]
+});
+const BuiCss = lazy(() => import('./BuiCss.esm.js'));
+let ReactDOMPromise;
+if (process.env.HAS_REACT_DOM_CLIENT) {
+  ReactDOMPromise = import('react-dom/client');
+} else {
+  ReactDOMPromise = import('react-dom');
+}
+function getRootElement() {
+  const rootElement = document.getElementById("root");
+  if (!rootElement) {
+    throw new Error(
+      "Could not find the dev app root element '#root'; make sure your dev entry HTML contains a root element with that id."
+    );
+  }
+  return rootElement;
+}
+function createDevApp(options) {
+  const rootElement = getRootElement();
+  const { features, bindRoutes } = options;
+  const devFeatures = [
+    appPluginOverride,
+    ...features
+  ];
+  const appOptions = {
+    bindRoutes,
+    features: devFeatures
+  };
+  const app = createApp(appOptions);
+  const AppRoot = app.createRoot();
+  ReactDOMPromise.then((ReactDOM) => {
+    const rootNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(BuiCss, {}) }),
+      AppRoot
+    ] });
+    if ("createRoot" in ReactDOM) {
+      ReactDOM.createRoot(rootElement).render(rootNode);
+    } else {
+      ReactDOM.render(rootNode, rootElement);
+    }
+  });
+}
+
+export { createDevApp };
+//# sourceMappingURL=createDevApp.esm.js.map

package/dist/createDevApp.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDevApp.esm.js","sources":["../src/createDevApp.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  FrontendFeature,\n  FrontendFeatureLoader,\n} from '@backstage/frontend-plugin-api';\nimport { createApp, CreateAppOptions } from '@backstage/frontend-defaults';\nimport appPlugin from '@backstage/plugin-app';\nimport { Suspense, lazy } from 'react';\nimport 'react-dom';\n\ntype AppPluginWithSimpleOverrides = {\n  withOverrides(options: { extensions: unknown[] }): FrontendFeature;\n};\n\n// Collapse the deeply nested override types to avoid excessive instantiation.\nconst appPluginOverride = (\n  appPlugin as unknown as AppPluginWithSimpleOverrides\n).withOverrides({\n  extensions: [\n    appPlugin.getExtension('sign-in-page:app').override({\n      disabled: true,\n    }),\n  ],\n});\n\nconst BuiCss = lazy(() => import('./BuiCss'));\n\nlet ReactDOMPromise: Promise<\n  typeof import('react-dom') | typeof import('react-dom/client')\n>;\nif (process.env.HAS_REACT_DOM_CLIENT) {\n  ReactDOMPromise = import('react-dom/client');\n} else {\n  ReactDOMPromise = import('react-dom');\n}\n\n/**\n * Options for {@link createDevApp}.\n *\n * @public\n */\nexport interface CreateDevAppOptions {\n  /**\n   * The list of features to load in the dev app.\n   */\n  features: (FrontendFeature | FrontendFeatureLoader)[];\n\n  /**\n   * Allows for the binding of plugins' external route refs within the dev app.\n   */\n  bindRoutes?: CreateAppOptions['bindRoutes'];\n}\n\nfunction getRootElement(): HTMLElement {\n  const rootElement = document.getElementById('root');\n\n  if (!rootElement) {\n    throw new Error(\n      \"Could not find the dev app root element '#root'; make sure your dev entry HTML contains a root element with that id.\",\n    );\n  }\n\n  return rootElement;\n}\n\n/**\n * Creates and renders a minimal development app for the new frontend system.\n *\n * @example\n * ```tsx\n * // dev/index.ts\n * import { createDevApp } from '@backstage/frontend-dev-utils';\n * import myPlugin from '../src';\n *\n * createDevApp({ features: [myPlugin] });\n * ```\n *\n * @public\n */\nexport function createDevApp(options: CreateDevAppOptions): void {\n  const rootElement = getRootElement();\n  const { features, bindRoutes } = options;\n  const devFeatures: CreateAppOptions['features'] = [\n    appPluginOverride,\n    ...features,\n  ];\n  const appOptions: CreateAppOptions = {\n    bindRoutes,\n    features: devFeatures,\n  };\n  const app = createApp(appOptions);\n  const AppRoot = app.createRoot();\n\n  ReactDOMPromise.then(ReactDOM => {\n    const rootNode = (\n      <>\n        <Suspense fallback={null}>\n          <BuiCss />\n        </Suspense>\n        {AppRoot}\n      </>\n    );\n\n    if ('createRoot' in ReactDOM) {\n      ReactDOM.createRoot(rootElement).render(rootNode);\n    } else {\n      ReactDOM.render(rootNode, rootElement);\n    }\n  });\n}\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,iBAAA,GACJ,UACA,aAAA,CAAc;AAAA,EACd,UAAA,EAAY;AAAA,IACV,SAAA,CAAU,YAAA,CAAa,kBAAkB,CAAA,CAAE,QAAA,CAAS;AAAA,MAClD,QAAA,EAAU;AAAA,KACX;AAAA;AAEL,CAAC,CAAA;AAED,MAAM,MAAA,GAAS,IAAA,CAAK,MAAM,OAAO,iBAAU,CAAC,CAAA;AAE5C,IAAI,eAAA;AAGJ,IAAI,OAAA,CAAQ,IAAI,oBAAA,EAAsB;AACpC,EAAA,eAAA,GAAkB,OAAO,kBAAkB,CAAA;AAC7C,CAAA,MAAO;AACL,EAAA,eAAA,GAAkB,OAAO,WAAW,CAAA;AACtC;AAmBA,SAAS,cAAA,GAA8B;AACrC,EAAA,MAAM,WAAA,GAAc,QAAA,CAAS,cAAA,CAAe,MAAM,CAAA;AAElD,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT;AAgBO,SAAS,aAAa,OAAA,EAAoC;AAC/D,EAAA,MAAM,cAAc,cAAA,EAAe;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAW,GAAI,OAAA;AACjC,EAAA,MAAM,WAAA,GAA4C;AAAA,IAChD,iBAAA;AAAA,IACA,GAAG;AAAA,GACL;AACA,EAAA,MAAM,UAAA,GAA+B;AAAA,IACnC,UAAA;AAAA,IACA,QAAA,EAAU;AAAA,GACZ;AACA,EAAA,MAAM,GAAA,GAAM,UAAU,UAAU,CAAA;AAChC,EAAA,MAAM,OAAA,GAAU,IAAI,UAAA,EAAW;AAE/B,EAAA,eAAA,CAAgB,KAAK,CAAA,QAAA,KAAY;AAC/B,IAAA,MAAM,2BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,IAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,UAAO,CAAA,EACV,CAAA;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAGF,IAAA,IAAI,gBAAgB,QAAA,EAAU;AAC5B,MAAA,QAAA,CAAS,UAAA,CAAW,WAAW,CAAA,CAAE,MAAA,CAAO,QAAQ,CAAA;AAAA,IAClD,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,MAAA,CAAO,UAAU,WAAW,CAAA;AAAA,IACvC;AAAA,EACF,CAAC,CAAA;AACH;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { FrontendFeature, FrontendFeatureLoader } from '@backstage/frontend-plugin-api';
+import { CreateAppOptions } from '@backstage/frontend-defaults';
+
+/**
+ * Options for {@link createDevApp}.
+ *
+ * @public
+ */
+interface CreateDevAppOptions {
+    /**
+     * The list of features to load in the dev app.
+     */
+    features: (FrontendFeature | FrontendFeatureLoader)[];
+    /**
+     * Allows for the binding of plugins' external route refs within the dev app.
+     */
+    bindRoutes?: CreateAppOptions['bindRoutes'];
+}
+/**
+ * Creates and renders a minimal development app for the new frontend system.
+ *
+ * @example
+ * ```tsx
+ * // dev/index.ts
+ * import { createDevApp } from '@backstage/frontend-dev-utils';
+ * import myPlugin from '../src';
+ *
+ * createDevApp({ features: [myPlugin] });
+ * ```
+ *
+ * @public
+ */
+declare function createDevApp(options: CreateDevAppOptions): void;
+
+export { createDevApp };
+export type { CreateDevAppOptions };

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+export { createDevApp } from './createDevApp.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@backstage/frontend-dev-utils",
+  "version": "0.0.0-nightly-20260317031259",
+  "description": "Utilities for developing Backstage frontend plugins using the new frontend system.",
+  "backstage": {
+    "role": "web-library"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "keywords": [
+    "backstage"
+  ],
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "packages/frontend-dev-utils"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "lint": "backstage-cli package lint",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "start": "backstage-cli package start",
+    "test": "backstage-cli package test"
+  },
+  "dependencies": {
+    "@backstage/frontend-defaults": "0.0.0-nightly-20260317031259",
+    "@backstage/frontend-plugin-api": "0.0.0-nightly-20260317031259",
+    "@backstage/plugin-app": "0.0.0-nightly-20260317031259",
+    "@backstage/ui": "0.0.0-nightly-20260317031259"
+  },
+  "devDependencies": {
+    "@backstage/cli": "0.0.0-nightly-20260317031259",
+    "@backstage/test-utils": "0.0.0-nightly-20260317031259",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router-dom": "^6.30.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.30.2"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "module": "./dist/index.esm.js"
+}