fix: update create-app to match example-app

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -8,6 +8,7 @@ import {
 import { apis } from './apis';
 import * as plugins from './plugins';
 import { AppSidebar } from './sidebar';
+import { AppRoutes } from './components/AppRoutes';
 
 const app = createApp({
   apis,
@@ -16,7 +17,6 @@ const app = createApp({
 
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
-const AppRoutes = app.getRoutes();
 
 const App: FC<{}> = () => (
   <AppProvider>

packages/create-app/templates/default-app/packages/app/src/components/AppRoutes.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router';
+import { CatalogRouter } from '@backstage/plugin-catalog';
+import { EntityPage } from './catalog/EntityPage';
+
+export const AppRoutes = () => (
+  <Routes>
+    <Route
+      path="/catalog/*"
+      element={<CatalogRouter EntityPage={EntityPage} />}
+    />
+    <Route path="/" element={<Navigate to="/catalog" />} />
+  </Routes>
+);

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 { Router as GitHubActionsRouter } from '@backstage/plugin-github-actions';
+import React from 'react';
+import {
+  EntityPageLayout,
+  useEntity,
+  EntityMetadataCard,
+} from '@backstage/plugin-catalog';
+import { Entity } from '@backstage/catalog-model';
+
+const OverviewPage = ({ entity }: { entity: Entity }) => (
+  <EntityMetadataCard entity={entity} />
+);
+
+const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
+  <EntityPageLayout>
+    <EntityPageLayout.Content
+      path="/"
+      title="Overview"
+      element={<OverviewPage entity={entity} />}
+    />
+    <EntityPageLayout.Content
+      path="/ci-cd/*"
+      title="CI/CD"
+      element={<GitHubActionsRouter entity={entity} />}
+    />
+  </EntityPageLayout>
+);
+
+const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
+  <EntityPageLayout>
+    <EntityPageLayout.Content
+      path="/"
+      title="Overview"
+      element={<OverviewPage entity={entity} />}
+    />
+    <EntityPageLayout.Content
+      path="/ci-cd/*"
+      title="CI/CD"
+      element={<GitHubActionsRouter entity={entity} />}
+    />
+  </EntityPageLayout>
+);
+
+const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
+  <EntityPageLayout>
+    <EntityPageLayout.Content
+      path="/*"
+      title="Overview"
+      element={<OverviewPage entity={entity} />}
+    />
+  </EntityPageLayout>
+);
+
+export const EntityPage = () => {
+  const { entity } = useEntity();
+  switch (entity?.spec?.type) {
+    case 'service':
+      return <ServiceEntityPage entity={entity} />;
+    case 'website':
+      return <WebsiteEntityPage entity={entity} />;
+    default:
+      return <DefaultEntityPage entity={entity} />;
+  }
+};