diff --git a/packages/app-next/src/index-public-experimental.tsx b/packages/app-next/src/index-public-experimental.tsx
index 4c01c428df..ce558ed4f0 100644
--- a/packages/app-next/src/index-public-experimental.tsx
+++ b/packages/app-next/src/index-public-experimental.tsx
@@ -15,9 +15,13 @@
*/
import ReactDOM from 'react-dom/client';
-import { createPublicSignInApp } from '@backstage/frontend-defaults/alpha';
+import { createApp } from '@backstage/frontend-defaults';
+import { appModulePublicSignIn } from '@backstage/plugin-app/alpha';
+
import '@backstage/ui/css/styles.css';
-const app = createPublicSignInApp();
+const app = createApp({
+ features: [appModulePublicSignIn],
+});
ReactDOM.createRoot(document.getElementById('root')!).render(app.createRoot());
diff --git a/packages/frontend-defaults/package.json b/packages/frontend-defaults/package.json
index 4bbbf8986d..5a2cfb6eb3 100644
--- a/packages/frontend-defaults/package.json
+++ b/packages/frontend-defaults/package.json
@@ -5,7 +5,9 @@
"role": "web-library"
},
"publishConfig": {
- "access": "public"
+ "access": "public",
+ "main": "dist/index.esm.js",
+ "types": "dist/index.d.ts"
},
"repository": {
"type": "git",
@@ -14,23 +16,8 @@
},
"license": "Apache-2.0",
"sideEffects": false,
- "exports": {
- ".": "./src/index.ts",
- "./alpha": "./src/alpha/index.ts",
- "./package.json": "./package.json"
- },
"main": "src/index.ts",
"types": "src/index.ts",
- "typesVersions": {
- "*": {
- "alpha": [
- "src/alpha/index.ts"
- ],
- "package.json": [
- "package.json"
- ]
- }
- },
"files": [
"dist"
],
diff --git a/packages/frontend-defaults/report-alpha.api.md b/packages/frontend-defaults/report-alpha.api.md
deleted file mode 100644
index 1bd66e6521..0000000000
--- a/packages/frontend-defaults/report-alpha.api.md
+++ /dev/null
@@ -1,15 +0,0 @@
-## API Report File for "@backstage/frontend-defaults"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-import { CreateAppOptions } from '@backstage/frontend-defaults';
-import { JSX as JSX_2 } from 'react';
-
-// @alpha
-export function createPublicSignInApp(options?: CreateAppOptions): {
- createRoot(): JSX_2.Element;
-};
-
-// (No @packageDocumentation comment for this package)
-```
diff --git a/plugins/app/package.json b/plugins/app/package.json
index 199054f141..9cefaa8609 100644
--- a/plugins/app/package.json
+++ b/plugins/app/package.json
@@ -11,9 +11,7 @@
]
},
"publishConfig": {
- "access": "public",
- "main": "dist/index.esm.js",
- "types": "dist/index.d.ts"
+ "access": "public"
},
"repository": {
"type": "git",
@@ -22,6 +20,21 @@
},
"license": "Apache-2.0",
"sideEffects": false,
+ "exports": {
+ ".": "./src/index.ts",
+ "./alpha": "./src/alpha/index.ts",
+ "./package.json": "./package.json"
+ },
+ "typesVersions": {
+ "*": {
+ "alpha": [
+ "src/alpha/index.ts"
+ ],
+ "package.json": [
+ "package.json"
+ ]
+ }
+ },
"main": "src/index.ts",
"types": "src/index.ts",
"files": [
@@ -47,12 +60,15 @@
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.61",
+ "@react-hookz/web": "^24.0.0",
"react-use": "^17.2.4"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
"@backstage/dev-utils": "workspace:^",
+ "@backstage/frontend-defaults": "workspace:^",
"@backstage/frontend-test-utils": "workspace:^",
+ "@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.0.0",
diff --git a/plugins/app/report-alpha.api.md b/plugins/app/report-alpha.api.md
new file mode 100644
index 0000000000..9496430e7b
--- /dev/null
+++ b/plugins/app/report-alpha.api.md
@@ -0,0 +1,12 @@
+## API Report File for "@backstage/plugin-app"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { FrontendModule } from '@backstage/frontend-plugin-api';
+
+// @alpha
+export const appModulePublicSignIn: FrontendModule;
+
+// (No @packageDocumentation comment for this package)
+```
diff --git a/packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx
similarity index 91%
rename from packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx
rename to plugins/app/src/alpha/appModulePublicSignIn.test.tsx
index 58a264e81d..14dba9416b 100644
--- a/packages/frontend-defaults/src/alpha/createPublicSignInApp.test.tsx
+++ b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx
@@ -20,18 +20,20 @@ import {
} from '@backstage/frontend-plugin-api';
import { render, screen, waitFor } from '@testing-library/react';
import { useEffect } from 'react';
-import { createPublicSignInApp } from './createPublicSignInApp';
+import { appModulePublicSignIn } from './appModulePublicSignIn';
import { mockApis } from '@backstage/test-utils';
+import { createApp } from '@backstage/frontend-defaults';
-describe('createPublicSignInApp', () => {
+describe('appModulePublicSignIn', () => {
beforeEach(() => {
jest.resetAllMocks();
});
it('should render a sign-in page', async () => {
- const app = createPublicSignInApp({
+ const app = createApp({
configLoader: async () => ({ config: mockApis.config() }),
features: [
+ appModulePublicSignIn,
createFrontendModule({
pluginId: 'app',
extensions: [
@@ -57,9 +59,10 @@ describe('createPublicSignInApp', () => {
.spyOn(HTMLFormElement.prototype, 'submit')
.mockReturnValue();
- const app = createPublicSignInApp({
+ const app = createApp({
configLoader: async () => ({ config: mockApis.config() }),
features: [
+ appModulePublicSignIn,
createFrontendModule({
pluginId: 'app',
extensions: [
diff --git a/packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx b/plugins/app/src/alpha/appModulePublicSignIn.tsx
similarity index 59%
rename from packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx
rename to plugins/app/src/alpha/appModulePublicSignIn.tsx
index 90c6e5e178..4a188d1d5f 100644
--- a/packages/frontend-defaults/src/alpha/createPublicSignInApp.tsx
+++ b/plugins/app/src/alpha/appModulePublicSignIn.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -14,16 +14,14 @@
* limitations under the License.
*/
+import appPlugin from '@backstage/plugin-app';
+import { useAsync, useMountEffect } from '@react-hookz/web';
import {
coreExtensionData,
createFrontendModule,
identityApiRef,
useApi,
} from '@backstage/frontend-plugin-api';
-import { useAsync, useMountEffect } from '@react-hookz/web';
-import { createApp } from '../createApp';
-import { CreateAppOptions } from '@backstage/frontend-defaults';
-import appPlugin from '@backstage/plugin-app';
// This is a copy of the CookieAuthRedirect component from the auth-react
// plugin, to avoid a dependency on that package. Long-term we want this to be
@@ -68,41 +66,61 @@ export function InternalCookieAuthRedirect() {
}
/**
- * Creates an app that is suitable for the public sign-in page, for use in the `index-public-experimental.tsx` file.
+ * This module is intended for use in public sign-in page apps, in the
+ * `index-public-experimental.tsx` file.
*
* @remarks
*
- * This app has an override for the `app/layout` extension, which means that
- * most extension typically installed in an app will be ignored. However, you
- * can still for example install API and root element extensions.
+ * This module is used to enable the public sign-in flow where the build output
+ * is split into one small publicly accessible app, and the full app protected
+ * by auth.
+ *
+ * This module overrides the `app/layout` extension, which means that most
+ * extension typically installed in an app will be ignored. However, you can
+ * still for example install API and root element extensions.
*
* A typical setup of this app will only install a custom sign-in page.
*
* @example
- * ```ts
- * const app = createPublicSignInApp({
- * features: [signInPageModule],
- * });
- * ```
+ *
+ *#### In `index-public-experimental.tsx`
+ *
+ *```ts
+ *import { createApp } from '@backstage/frontend-defaults
+ *import { appModulePublicSignIn } from '@backstage/plugin-app/alpha';
+ *import { appModuleSignInPage } from './appModuleSignInPage';
+ *
+ *const app = createApp({
+ * features: [appModuleSignInPage, appModulePublicSignIn],
+ *});
+ *```
+ *
+ *#### In `appModuleSignInPage.tsx`
+ *
+ *```tsx
+ *import { createFrontendModule, SignInPageBlueprint } from '@backstage/frontend-plugin-api';
+ *
+ *export const appModuleSignInPage = createFrontendModule({
+ * pluginId: 'app',
+ * extensions: [
+ * SignInPageBlueprint.make({
+ * params: {
+ * ...
+ * }
+ * }),
+ * ],
+ *})
+ *```
*
* @alpha
*/
-export function createPublicSignInApp(options?: CreateAppOptions) {
- return createApp({
- ...options,
- features: [
- ...(options?.features ?? []),
- // This is a rather than app plugin override in order for it to take precedence over any supplied app plugin override
- createFrontendModule({
- pluginId: 'app',
- extensions: [
- appPlugin.getExtension('app/layout').override({
- factory: () => [
- coreExtensionData.reactElement(),
- ],
- }),
- ],
- }),
- ],
- });
-}
+export const appModulePublicSignIn = createFrontendModule({
+ pluginId: 'app',
+ extensions: [
+ appPlugin.getExtension('app/layout').override({
+ factory: () => [
+ coreExtensionData.reactElement(),
+ ],
+ }),
+ ],
+});
diff --git a/packages/frontend-defaults/src/alpha/index.ts b/plugins/app/src/alpha/index.ts
similarity index 90%
rename from packages/frontend-defaults/src/alpha/index.ts
rename to plugins/app/src/alpha/index.ts
index f9e45bdeec..8ffa92e8aa 100644
--- a/packages/frontend-defaults/src/alpha/index.ts
+++ b/plugins/app/src/alpha/index.ts
@@ -14,4 +14,4 @@
* limitations under the License.
*/
-export { createPublicSignInApp } from './createPublicSignInApp';
+export { appModulePublicSignIn } from './appModulePublicSignIn';
diff --git a/yarn.lock b/yarn.lock
index 9b0a90acec..a336f69e8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4743,15 +4743,18 @@ __metadata:
"@backstage/core-components": "workspace:^"
"@backstage/core-plugin-api": "workspace:^"
"@backstage/dev-utils": "workspace:^"
+ "@backstage/frontend-defaults": "workspace:^"
"@backstage/frontend-plugin-api": "workspace:^"
"@backstage/frontend-test-utils": "workspace:^"
"@backstage/integration-react": "workspace:^"
"@backstage/plugin-permission-react": "workspace:^"
+ "@backstage/test-utils": "workspace:^"
"@backstage/theme": "workspace:^"
"@backstage/types": "workspace:^"
"@material-ui/core": "npm:^4.9.13"
"@material-ui/icons": "npm:^4.9.1"
"@material-ui/lab": "npm:^4.0.0-alpha.61"
+ "@react-hookz/web": "npm:^24.0.0"
"@testing-library/jest-dom": "npm:^6.0.0"
"@testing-library/react": "npm:^16.0.0"
"@testing-library/user-event": "npm:^14.0.0"