Homepage

Question 1

What is the benefit of having a good homepage?

Answer 1

1) improve the discoverability of the platform
2) prevent users from remembering direct URLs
3) surface relevant info quick
4) provide convenient shortcuts for common tasks

Question 2

What plugin is used for composing a homepage?

Answer 2

Home plugin

Question 3

What is the first page you see by default when you install Backstage?

Answer 3

software catalog

Question 4

Command to install home plugin

Answer 4

yarn add –cwd packages/app @backstage/plugin-home

Question 5

Steps to add a new home page?

Answer 5

1) Install the home plugin
2) Create a new HomePage component
3) Update router for the root / route
4) Update sidebar items

Question 6

Create a new HomePage component

Answer 6

In packages/app/src/components/home/HomePage.tsx

import React from ‘react’;

export const HomePage = () => (

<h1>Welcome to Backstage!</h1>

);

Question 7

Update router for the root / route

Answer 7

In packages/app/src/App.tsx
Remove: <Navigate></Navigate>
Add:

import { HomepageCompositionRoot } from ‘@backstage/plugin-home’;
import { HomePage } from ‘./components/home/HomePage’;

<Route path=”/” element={<HomepageCompositionRoot></HomepageCompositionRoot>}>
<HomePage></HomePage>
</Route>

Question 8

Update sidebar items in home page creation process

Answer 8

In packages/app/src/components/Root/Root.tsx

Remove: HomeIcon from SidebarPage/Sidebar.

Add:
import CategoryIcon from ‘@material-ui/icons/Category’;

<SidebarItem icon={HomeIcon} to=”/” text=”Home” />
<SidebarItem icon={CategoryIcon} to=”catalog” text=”Catalog” />

Question 9

command to bump all @backstage packages and dependencies you’re using to the latest versions

Answer 9

yarn backstage-cli versions:bump

Question 10

How often is the main release line released?

Answer 10

monthly