backstage-plugin-announcements

Installation

Backend

Old Backend System Setup

Add the plugin to your backend app:

yarn add --cwd packages/backend @procore-oss/backstage-plugin-announcements-backend

Create packages/backend/src/plugins/announcements.ts:

import {
  buildAnnouncementsContext,
  createRouter,
} from '@procore-oss/backstage-plugin-announcements-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin({
  logger,
  database,
  permissions,
}: PluginEnvironment): Promise<Router> {
  const announcementsContext = await buildAnnouncementsContext({
    logger: logger,
    database: database,
    permissions: permissions,
  });

  return await createRouter(announcementsContext);
}

In packages/backend/src/index.ts add the following:

import announcements from './plugins/announcements';

// ...
async function main() {
  // ...
  const announcementsEnv = useHotMemoize(module, () =>
    createEnv('announcements'),
  );

  const apiRouter = Router();
  apiRouter.use('/announcements', await announcements(announcementsEnv));
  // ...
}

New Backend System Setup

If you are migrating from the old backend system, you can delete packages/backend/src/plugins/announcements.ts and follow the instructions below

Add the plugin to your backend app:

yarn add --cwd packages/backend @procore-oss/backstage-plugin-announcements-backend

Update packages/backend/src/index.ts to import announcements plugin package and register it in your backend using:

// ...
const backend = createBackend();

backend.add(import('@procore-oss/backstage-plugin-announcements-backend'));
// ...

Frontend

Add the plugin to your frontend app:

yarn add --cwd packages/app @procore-oss/backstage-plugin-announcements

Expose the announcements page:

// packages/app/src/App.tsx
import { AnnouncementsPage } from '@procore-oss/backstage-plugin-announcements';

// ...

const AppRoutes = () => (
  <FlatRoutes>
    // ...
    <Route path="/announcements" element={<AnnouncementsPage />} />
    // ...
  </FlatRoutes>
);

An interface to create/update/edit/delete announcements is now available at /announcements.