Backstage Dev Friends Days Plugin

Dev Friends Days adds a small touch of humanity to your Backstage. It tells you when it is a day worth celebrating for your teammates in engineering. It checks for Programmer Day, Tester Day, and sysadmin day. If today matches, the card shows a clear prompt so your team can say thanks or mark the moment together.

The plugin ships as a simple card you can drop on your homepage or any page in your portal. It stays out of the way on regular days. On special days it gives a friendly nudge with just enough context. No complex setup text or heavy UI. It is there when you need it. It is quiet when you do not.

Why add it to a self hosted Backstage instance. It helps reinforce team culture with almost no overhead. It reminds people to recognize the work of peers who keep systems running. It can kick off a short shoutout in standup. It can spark a chat thread for a small celebration. It can help new joiners learn about these dates without another calendar to watch.

If your goal is a developer portal that feels human, this plugin earns its spot. It is simple. It is lightweight. It does one thing well.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Step 1 Add the plugin package

Run from your Backstage root

Copy

yarn --cwd packages/app add @piatkiewicz/backstage-dev-friends-days

Step 2 Show the card on the Home page

Add the card to your Home page. This makes it easy to see right away.

Edit packages app src components home HomePage.tsx

Copy

import React from 'react';
import { Content, Header, Page } from '@backstage/core-components';
import { Grid } from '@material-ui/core';
import { DevFriendsDayCard } from '@piatkiewicz/backstage-dev-friends-days';

export const HomePage = () => (
  <Page themeId="home">
    <Header title="Home" />
    <Content>
      <Grid container spacing={3}>
        <Grid item xs={12} md={6} lg={4}>
          <DevFriendsDayCard />
        </Grid>
      </Grid>
    </Content>
  </Page>
);

Add a Home route if needed

If your App does not already route to the Home page, add it.

Edit packages app src App.tsx

Copy

import React from 'react';
import { FlatRoutes } from '@backstage/core-app-api';
import { Route } from 'react-router-dom';
import { HomePage } from './components/home/HomePage';

// other imports

export default function App() {
  return (
    <AppProvider>
      <AppRouter>
        <FlatRoutes>
          <Route path="/" element={<HomePage />} />
          {/* your other routes */}
        </FlatRoutes>
      </AppRouter>
    </AppProvider>
  );
}

Step 3 Use the card on an entity page optional

You can also place the card on an entity overview. This shows the card when viewing a service.

Edit packages app src components catalog EntityPage.tsx

Copy

import React from 'react';
import { Grid } from '@material-ui/core';
import { CatalogEntityPage } from '@backstage/plugin-catalog';
import { DevFriendsDayCard } from '@piatkiewicz/backstage-dev-friends-days';

// If your app has a custom OverviewContent, add the card inside its Grid
export const OverviewContent = () => (
  <Grid container spacing={3}>
    {/* existing overview cards */}
    <Grid item xs={12} md={6} lg={4}>
      <DevFriendsDayCard />
    </Grid>
  </Grid>
);

// If your app exports a page that assembles tabs, keep using that setup
export const EntityPage = () => <CatalogEntityPage />;

If your Entity page structure is different, place the DevFriendsDayCard inside a Grid item in the overview tab of that page.

Backend setup

This plugin is frontend only. No backend package to install for the new backend system or for the old backend system.

Changelog

The Dev Friends Days plugin has not seen any significant changes since 6 months ago.

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo