WhitepaperSelf-hosting Backstage vs managed Backstage
Roadie
← Backstage Plugins Guides
Home Page logo

Backstage Home Page Plugin

See GitHub Actions builds in Backstage

Created by Spotify, with extensions by Roadie

Available on Roadie

Set up Backstage in minutes with Roadie

Get a demo

Installation steps

Install the plugin into your Backstage instance.

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

Create a new file for the Home page component at packages/app/src/components/home/HomePage.tsx.

import React from 'react';

export const homePage = (
  /* TODO: Compose a Home Page here */
);

Add routes to App.tsx for the new component. The below examples assumes you'll be pointing the root at the Home page.

// packages/app/src/App.tsx

import { HomepageCompositionRoot } from '@backstage/plugin-home';
import { homePage } from './components/home/HomePage';

// ...
<Route path="/" element={<HomepageCompositionRoot />}>
  {homePage}
</Route>;
// ...

The Home page is then composed like any React-based page, by stacking different components as you see fit. You can either write your own or find open source components.

Roadie have two open sourced Home page components that can be used.

To use the HomePageMarkdown component which renders arbitrary markdown on the Home page, install the plugin.

yarn add @roadiehq/backstage-plugin-home-markdown

Add the associatede type

export type MarkdownContentProps = {
  owner: string;
  repo: string;
  path: string;
  branch?: string;
};

Then use the component.

import { HomePageMarkdown } from '@roadiehq/backstage-plugin-home-markdown';

export const HomePage = () => {
    return (
      ...
          <Grid item xs={12} md={6}>
              <HomePageMarkdown
                  title="Neeews!"
                  owner="RoadieHQ"
                  repo="roadie-backstage-plugins"
                  path=".backstage/README.md"
              />
          </Grid>
      ...
      );
    };

There is also a HomePageRSS RSS feed component. To use it, install the plugin.

yarn add @roadiehq/backstage-plugin-home-rss

Configure the proxy to pull information for the feed. For example, the Reuters feed.

proxy:
  '/reuters-news-feed':
    target: 'https://www.reutersagency.com/feed'

Then use the component in your Home page.

// packages/app/src/components/home/HomePage.tsx
import { HomePageRSS } from '@roadiehq/backstage-plugin-home-rss';

export const HomePage = () => {
  return (
    ...
    <Grid item xs={12} md={6}>
        <HomePageRSS
            feedURL="http://localhost:7007/api/proxy/reuters-news-feed/?best-topics=tech&post_type=best"
            title="Reuters News"
            paging={false} // Optional. By default the paging is enabled, but it can be disabled
        />
    </Grid>
    ...
  );
};

Found a mistake? Update these instructions.

Things to know

Set up Backstage in minutes with Roadie

Get a demo