Add app-next example

app-config.yaml

@@ -14,6 +14,8 @@ app:
         links:
           - url: https://backstage.io/blog/
             title: Backstage Blog
+  experimental:
+    packages: all
 
 organization:
   name: Backstage

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "start": "backstage-cli repo start",
     "start:app-migrated": "backstage-cli repo start app-migrated backend",
+    "start:app-next": "backstage-cli repo start app-next backend",
     "start:otel-prerequisites": "docker-compose -f ./open-telemetry/docker-compose.yaml up",
     "build:backend": "yarn workspace backend build",
     "build:all": "backstage-cli repo build --all",

packages/app-next/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

packages/app-next/config.d.ts

@@ -0,0 +1,14 @@
+export interface Config {
+  /**
+   * @visibility frontend
+   */
+  notificationsTester?: {
+    /**
+     * Flag to enable or disable the tester
+     * Default is enabled
+     *
+     * @visibility frontend
+     */
+    enabled: boolean;
+  };
+}

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2023 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from '@playwright/test';
+
+test('App should render the welcome page', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByText('My Company Catalog')).toBeVisible();
+});

packages/app-next/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "app-next",
+  "version": "0.0.0",
+  "private": true,
+  "backstage": {
+    "role": "frontend"
+  },
+  "bundled": true,
+  "dependencies": {
+    "@backstage-community/plugin-badges": "^0.9.0",
+    "@backstage-community/plugin-cost-insights": "^0.15.1",
+    "@backstage-community/plugin-explore": "^0.9.0",
+    "@backstage-community/plugin-github-actions": "^0.11.0",
+    "@backstage-community/plugin-graphiql": "^0.4.1",
+    "@backstage-community/plugin-tech-radar": "^1.6.0",
+    "@backstage-community/plugin-todo": "^0.9.0",
+    "@backstage/canon": "backstage:^",
+    "@backstage/cli": "backstage:^",
+    "@backstage/core-app-api": "backstage:^",
+    "@backstage/core-compat-api": "backstage:^",
+    "@backstage/core-components": "backstage:^",
+    "@backstage/core-plugin-api": "backstage:^",
+    "@backstage/frontend-defaults": "backstage:^",
+    "@backstage/frontend-plugin-api": "backstage:^",
+    "@backstage/integration-react": "backstage:^",
+    "@backstage/plugin-api-docs": "backstage:^",
+    "@backstage/plugin-catalog": "backstage:^",
+    "@backstage/plugin-catalog-graph": "backstage:^",
+    "@backstage/plugin-catalog-react": "backstage:^",
+    "@backstage/plugin-home": "backstage:^",
+    "@backstage/plugin-kubernetes": "backstage:^",
+    "@backstage/plugin-notifications": "backstage:^",
+    "@backstage/plugin-org": "backstage:^",
+    "@backstage/plugin-scaffolder": "backstage:^",
+    "@backstage/plugin-search": "backstage:^",
+    "@backstage/plugin-search-react": "backstage:^",
+    "@backstage/plugin-signals": "backstage:^",
+    "@backstage/plugin-techdocs": "backstage:^",
+    "@backstage/plugin-techdocs-module-addons-contrib": "backstage:^",
+    "@backstage/plugin-techdocs-react": "backstage:^",
+    "@backstage/plugin-user-settings": "backstage:^",
+    "@backstage/theme": "backstage:^",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "backstage-plugin-techdocs-addon-mermaid": "^0.21.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.32.3",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/d3": "^7.4.3",
+    "@types/node": "^22.0.0",
+    "@types/react-dom": "*"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint",
+    "clean": "backstage-cli package clean"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist",
+    "config.d.ts"
+  ],
+  "configSchema": "config.d.ts"
+}

packages/app-next/public/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Backstage is an open platform for building developer portals"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link
+      rel="manifest"
+      href="<%= publicPath %>/manifest.json"
+      crossorigin="use-credentials"
+    />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="<%= publicPath %>/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="<%= publicPath %>/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="<%= publicPath %>/favicon-16x16.png"
+    />
+    <link
+      rel="mask-icon"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <style>
+      #root {
+        min-height: 100%;
+      }
+    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <title><%= config.getString('app.title') %></title>
+  </head>
+  <body style="margin: 0">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

packages/app-next/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Backstage",
+  "name": "Backstage",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/app-next/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: /

packages/app-next/src/App.test.tsx

@@ -0,0 +1,27 @@
+import { render, waitFor } from '@testing-library/react';
+import app from './App';
+
+describe('App', () => {
+  it('should render', async () => {
+    process.env = {
+      NODE_ENV: 'test',
+      APP_CONFIG: [
+        {
+          data: {
+            app: {
+              title: 'Test',
+              support: { url: 'http://localhost:7007/support' },
+            },
+            backend: { baseUrl: 'http://localhost:7007' },
+          },
+          context: 'test',
+        },
+      ] as any,
+    };
+
+    const rendered = render(app);
+    await waitFor(() => {
+      expect(rendered.baseElement).toBeInTheDocument();
+    });
+  });
+});