Bulletin Board logo

Backstage Bulletin Board Plugin

Created by v-ngu

Bulletin Board gives your Backstage portal a simple place for short team updates. Think of it as an internal feed for ideas, news, and links. Posts appear as cards on a dedicated page. The most recently updated items move to the top so fresh work stays visible. Add tags to group topics. Filter the view to find what you need fast. Create a post, revise it later, or remove it when it is no longer useful.

Use it to share weekly engineering notes, release highlights, incident follow ups, RFC reminders, onboarding tips, or curated reading lists. It keeps those messages out of scattered chats and email. Everything lives where developers already spend time. Each bulletin becomes a lightweight record that is easy to discover later.

The plugin ships with a frontend part and a backend part so it fits a self hosted Backstage setup. It follows common Backstage patterns so it feels native for users. Teams get a low friction way to broadcast news without leaving the portal. The result is better awareness across services and squads with very little process overhead. If you want a focused space for timely updates inside Backstage, Bulletin Board does that job with a small footprint and a clear mental model.

Uploaded from temp/v-ngu/backstage-plugin-bulletin-board/media/homepage.png

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

  1. From your Backstage root
  2. Add the Bulletin Board frontend package to the app
Copy
yarn add --cwd packages/app backstage-plugin-bulletin-board

Add the page route

  1. Open packages/app/src/App.tsx
  2. Import the page component
  3. Add a route so users can reach the page
Copy
// packages/app/src/App.tsx
import { BulletinBoardPage } from 'backstage-plugin-bulletin-board';

// inside your routes
<FlatRoutes>
  {/* other routes */}
  <Route path="/bulletin-board" element={<BulletinBoardPage />} />
</FlatRoutes>
  1. Open packages/app/src/components/Root/Root.tsx
  2. Import an icon
  3. Add a sidebar item that points to the new route
Copy
// packages/app/src/components/Root/Root.tsx
import DashboardIcon from '@material-ui/icons/Dashboard';
import { SidebarItem, SidebarGroup } from '@backstage/core-components';

// inside your sidebar group
<SidebarGroup label="Menu" icon={<MenuIcon />}>
  {/* other items */}
  <SidebarItem icon={DashboardIcon} to="bulletin-board" text="Bulletin Board" />
</SidebarGroup>

Install the backend package for the classic backend system

  1. From your Backstage root
  2. Add the Bulletin Board backend package to the backend
Copy
yarn add --cwd packages/backend backstage-plugin-bulletin-board-backend

Create the backend plugin module

  1. Create a new file at packages/backend/src/plugins/bulletin-board.ts
  2. Paste the code below
Copy
// packages/backend/src/plugins/bulletin-board.ts
import { createRouter } from 'backstage-plugin-bulletin-board-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    database: env.database,
  });
}

Register the router in the backend index

  1. Open packages/backend/src/index.ts
  2. Import the plugin module
  3. Create the plugin environment
  4. Mount the router
Copy
// packages/backend/src/index.ts
import bulletinBoard from './plugins/bulletin-board';

async function main() {
  // existing setup
  const createEnv = makeCreateEnv(config);

  const catalogEnv = useHotMemoize(module, () => createEnv('catalog'));
  const bulletinBoardEnv = useHotMemoize(module, () => createEnv('bulletin-board'));

  const apiRouter = Router();
  apiRouter.use('/bulletin-board', await bulletinBoard(bulletinBoardEnv));

  apiRouter.use(notFoundHandler());
  // rest of your server setup
}

New backend system support

The backend package exposes a createRouter for the classic backend system. There are no setup steps for the new backend system in this plugin. Use the classic backend system for this plugin.

Set up Backstage in minutes with Roadie