feat: use new frontend system

app-config.production.yaml

@@ -2,11 +2,6 @@ app:
   # Should be the same as backend.baseUrl when using the `app-backend` plugin.
   baseUrl: http://localhost:7007
 
-auth:
-  # see https://backstage.io/docs/auth/ to learn about auth providers
-  providers:
-    guest: null
-
 backend:
   # Note that the baseUrl should be the URL that the browser and other clients
   # should use when communicating with the backend, i.e. it needs to be
@@ -18,7 +13,7 @@ backend:
   # all interfaces, the most permissive setting. The right value depends on your specific deployment.
   listen: ':7007'
 
-  # config options: https://node-postgres.com/api/client
+  # config options: https://node-postgres.com/apis/client
   database:
     client: pg
     connection:
@@ -33,8 +28,28 @@ backend:
       #   ca: # if you have a CA file and want to verify it you can uncomment this section
       #     $file: <file-path>/ca/server.crt
 
+auth:
+  providers:
+    guest: {}
+
 catalog:
   # Overrides the default list locations from app-config.yaml as these contain example data.
   # See https://backstage.io/docs/features/software-catalog/#adding-components-to-the-catalog for more details
   # on how to get entities into the catalog.
-  locations: []
+  locations:
+    # Local example data, replace this with your production config, these are intended for demo use only.
+    # File locations are relative to the backend process, typically in a deployed context, such as in a Docker container, this will be the root
+    - type: file
+      target: ./examples/entities.yaml
+
+    # Local example template
+    - type: file
+      target: ./examples/template/template.yaml
+      rules:
+        - allow: [Template]
+
+    # Local example organizational data
+    - type: file
+      target: ./examples/org.yaml
+      rules:
+        - allow: [User, Group]

app-config.yaml

@@ -34,11 +34,24 @@ renovate:
     dryRun: full
 
 # General configuration for the app
-
 app:
   title: Scaffolded Backstage App
   baseUrl: http://localhost:3000
 
+  # Enable all packages by default, this will discover packages from packages/app/package.json
+  packages: all
+
+  extensions:
+    # Disable the nav items that we're manually rendering in packages/app/src/modules/nav/Sidebar.tsx
+    - nav-item:search: false
+    - nav-item:user-settings: false
+    - nav-item:catalog: false
+
+    # Configure the catalog index page to be the root page, this is normally mounted on /catalog
+    - page:catalog:
+        config:
+          path: /
+
 organization:
   name: My Company
 
@@ -59,9 +72,7 @@ backend:
     # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
     # Default Helmet Content-Security-Policy values can be removed by setting the key to false
   cors:
-    origin:
-      - http://localhost:3000
-      - http://localhost:7007
+    origin: http://localhost:3000
     methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
     credentials: true
     exposedHeaders:
@@ -81,7 +92,7 @@ integrations:
   github:
     - host: github.com
       # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
-      # about setting up the GitHub integration here: https://backstage.io/docs/getting-started/configuration#setting-up-a-github-integration
+      # about setting up the GitHub integration here: https://backstage.io/docs/integrations/github/locations#configuration
       token: ${GITHUB_TOKEN}
     ### Example for how to add your GitHub Enterprise instance using the API:
     # - host: ghe.example.net
@@ -110,6 +121,7 @@ techdocs:
 auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
   providers:
+    # See https://backstage.io/docs/auth/guest/provider
     guest: {}
 
 scaffolder:
@@ -126,6 +138,28 @@ catalog:
     - type: file
       target: ../../examples/entities.yaml
 
+    # Local example template
+    - type: file
+      target: ../../examples/template/template.yaml
+      rules:
+        - allow: [Template]
+
+    # Local example organizational data
+    - type: file
+      target: ../../examples/org.yaml
+      rules:
+        - allow: [User, Group]
+
+    ## Uncomment these lines to add more example data
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
+
+    ## Uncomment these lines to add an example org
+    # - type: url
+    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
+    #   rules:
+    #     - allow: [User, Group]
+
   providers:
     github:
       myOrg:
@@ -142,3 +176,11 @@ catalog:
         - catalog
         - search
         - renovate
+
+kubernetes:
+  # see https://backstage.io/docs/features/kubernetes/configuration for kubernetes configuration options
+
+# see https://backstage.io/docs/permissions/getting-started for more on the permission framework
+permission:
+  # setting this to `false` will disable permissions
+  enabled: true

docker-compose.yaml

@@ -5,8 +5,9 @@ volumes:
 services:
   db:
     image: postgres:17
-    env_file:
-      - packages/backend/.env
+    environment:
+      POSTGRES_USER: backstage
+      POSTGRES_PASSWORD: password
     volumes:
       - postgres:/var/lib/postgresql/data
     ports:

package.json

@@ -11,34 +11,26 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "fix": "yarn prettier:fix && backstage-cli repo fix --publish && backstage-cli repo lint --fix && yarn dedupe --strategy highest",
-    "check": "yarn prettier:check && yarn tsc:full && yarn lint && yarn test:all && yarn dedupe --check",
-    "check:agent": "./scripts/check-agents.sh",
-    "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
-    "start": "yarn workspace app start",
-    "start-backend": "yarn workspace backend start",
-    "build:backend": "yarn workspace backend build",
-    "build:all": "backstage-cli repo build --all",
     "build-image": "yarn workspace backend build-image",
-    "build:api-reports": "yarn build:api-reports:only --tsc",
-    "build:api-reports:only": "NODE_OPTIONS=--max-old-space-size=8192 backstage-repo-tools api-reports --allow-all-warnings -o ae-wrong-input-file-type --validate-release-tags",
+    "build:all": "backstage-cli repo build --all",
+    "build:backend": "yarn workspace backend build",
+    "check": "yarn prettier:check && yarn tsc:full && yarn repo:lint && yarn test:all && yarn dedupe --check",
+    "clean": "backstage-cli repo clean",
     "docker-deps": "docker compose up -d",
     "generate": "yarn workspace @secustor/backstage-plugin-renovate-backend generate",
-    "tsc": "tsc",
-    "tsc:full": "tsc --incremental false",
-    "clean": "backstage-cli repo clean",
-    "jest": "jest",
-    "test": "backstage-cli repo test",
-    "test:all": "backstage-cli repo test --coverage",
-    "test:jest": "jest --coverage",
-    "test:e2e": "playwright test",
-    "lint": "backstage-cli repo lint --since origin/main",
-    "lint:fix": "yarn prettier:fix && backstage-cli repo lint --fix && yarn tsc:full && yarn dedupe --strategy highest",
+    "fix": "yarn prettier:fix && backstage-cli repo fix --publish && backstage-cli repo lint --fix && yarn dedupe --strategy highest",
     "lint:all": "backstage-cli repo lint",
+    "new": "backstage-cli new",
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write .",
-    "new": "backstage-cli new --scope internal",
-    "prepare": "husky"
+    "repo:fix": "backstage-cli repo fix",
+    "repo:lint": "backstage-cli repo lint --since origin/main",
+    "start": "backstage-cli repo start",
+    "test": "backstage-cli repo test",
+    "test:all": "backstage-cli repo test --coverage",
+    "test:e2e": "playwright test",
+    "tsc": "tsc",
+    "tsc:full": "tsc --skipLibCheck false --incremental false"
   },
   "workspaces": {
     "packages": [
@@ -47,35 +39,22 @@
     ]
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.1",
-    "@backstage/e2e-test-utils": "0.1.1",
-    "@backstage/repo-tools": "0.15.1",
+    "@backstage/cli": "^0.34.1",
+    "@backstage/e2e-test-utils": "^0.1.1",
     "@changesets/changelog-github": "0.5.1",
     "@changesets/cli": "2.29.6",
     "@playwright/test": "1.55.0",
-    "@spotify/prettier-config": "15.0.0",
-    "@types/jest": "29.5.14",
-    "concurrently": "9.2.1",
-    "husky": "9.1.7",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "30.1.1",
-    "lerna": "8.2.3",
     "lint-staged": "16.1.5",
     "node-gyp": "11.4.2",
-    "pinst": "3.0.0",
     "prettier": "3.6.2",
-    "ts-jest": "29.4.1",
     "typescript": "5.9.2"
   },
   "resolutions": {
     "@types/react": "^18",
     "@types/react-dom": "^18"
   },
-  "prettier": "@spotify/prettier-config",
+  "prettier": "@backstage/cli/config/prettier",
   "lint-staged": {
-    "package.json": [
-      "prettier --write"
-    ],
     "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "eslint --fix",
       "prettier --write"
@@ -91,7 +70,19 @@
           "license": "LGPL-3.0",
           "namePrefix": "@secustor/",
           "namePluginInfix": "backstage-plugin-"
-        }
+        },
+        "templates": [
+          "@backstage/cli/templates/new-frontend-plugin",
+          "@backstage/cli/templates/new-frontend-plugin-module",
+          "@backstage/cli/templates/backend-plugin",
+          "@backstage/cli/templates/backend-plugin-module",
+          "@backstage/cli/templates/plugin-web-library",
+          "@backstage/cli/templates/plugin-node-library",
+          "@backstage/cli/templates/plugin-common-library",
+          "@backstage/cli/templates/web-library",
+          "@backstage/cli/templates/node-library",
+          "@backstage/cli/templates/scaffolder-backend-module"
+        ]
       }
     }
   },

packages/app/e2e-tests/app.test.ts

@@ -19,5 +19,9 @@ import { test, expect } from '@playwright/test';
 test('App should render the welcome page', async ({ page }) => {
   await page.goto('/');
 
+  const enterButton = page.getByRole('button', { name: 'Enter' });
+  await expect(enterButton).toBeVisible();
+  await enterButton.click();
+
   await expect(page.getByText('My Company Catalog')).toBeVisible();
 });

packages/app/package.json

@@ -14,52 +14,38 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
-    "@backstage-community/plugin-github-actions": "^0.13.0",
-    "@backstage-community/plugin-tech-radar": "^1.0.0",
-    "@backstage/app-defaults": "^1.6.5",
-    "@backstage/catalog-model": "^1.7.5",
     "@backstage/cli": "^0.34.1",
-    "@backstage/core-app-api": "^1.18.0",
+    "@backstage/core-compat-api": "^0.5.1",
     "@backstage/core-components": "^0.17.5",
     "@backstage/core-plugin-api": "^1.10.9",
+    "@backstage/frontend-defaults": "^0.3.0",
+    "@backstage/frontend-plugin-api": "^0.11.0",
     "@backstage/integration-react": "^1.2.9",
-    "@backstage/plugin-api-docs": "^0.12.10",
+    "@backstage/plugin-app-visualizer": "^0.1.22",
     "@backstage/plugin-catalog": "^1.31.2",
-    "@backstage/plugin-catalog-common": "^1.1.5",
-    "@backstage/plugin-catalog-graph": "^0.4.22",
-    "@backstage/plugin-catalog-import": "^0.13.4",
-    "@backstage/plugin-catalog-react": "^1.20.1",
+    "@backstage/plugin-notifications": "^0.5.8",
     "@backstage/plugin-org": "^0.6.43",
-    "@backstage/plugin-permission-react": "^0.4.36",
     "@backstage/plugin-scaffolder": "^1.34.0",
     "@backstage/plugin-search": "^1.4.29",
-    "@backstage/plugin-search-react": "^1.9.3",
-    "@backstage/plugin-techdocs": "^1.14.1",
-    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.27",
-    "@backstage/plugin-techdocs-react": "^1.3.2",
+    "@backstage/plugin-signals": "^0.0.22",
     "@backstage/plugin-user-settings": "^0.8.25",
-    "@backstage/theme": "^0.6.8",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
-    "@mui/styles": "^6.1.0",
+    "@backstage/ui": "^0.7.0",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
     "@secustor/backstage-plugin-renovate": "workspace:^",
-    "history": "^5.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-use": "^17.2.4"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@backstage/test-utils": "1.7.11",
+    "@backstage/frontend-test-utils": "^0.3.5",
     "@playwright/test": "1.55.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/react-dom": "18.3.7",
+    "@types/react-dom": "*",
     "cross-env": "10.0.0"
   },
   "browserslist": {

packages/app/public/index.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Backstage is an open platform for building developer portals"
+      content="Backstage is an open source framework for building developer portals"
     />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -41,7 +41,7 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <title><%= config.getString('app.title') %></title>
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/app/src/App.test.tsx

@@ -19,7 +19,7 @@ describe('App', () => {
       ] as any,
     };
 
-    const rendered = render(<App />);
+    const rendered = render(App.createRoot());
 
     await waitFor(() => {
       expect(rendered.baseElement).toBeInTheDocument();