Backstage Stack Overflow Plugin

Stack Overflow is where developers ask questions, share answers, and build a living record of what works. Many companies use Stack Overflow for Teams to capture the same kind of knowledge inside their walls. The Stack Overflow plugin brings that content into your Backstage portal so engineers can find help without switching tools.

The plugin adds Stack Overflow results to Backstage search. It can show recent questions on your homepage with filters by tag and site. You can surface top tags and top contributors so people know who to ask. It supports the public Stack Overflow API as well as private Teams or Enterprise instances, so you can expose trusted internal answers next to docs and services already in Backstage.

Typical use cases are straightforward. Speed up onboarding by pointing new hires to curated answers. Cut down on repeat questions by making known fixes searchable where work happens. Help incident responders find similar issues and follow ups. Highlight subject matter experts through tags so the right folks see the right questions.

The plugin ships UI components that fit Backstage conventions. It keeps pace with recent Backstage releases. If you already run Backstage and you already rely on Stack Overflow content, this plugin helps connect the two so teams get answers faster.

Install the frontend package

Add the package to your app

Copy

yarn --cwd packages/app add @backstage-community/plugin-stack-overflow

Add config to your app config

Copy

# app-config.yaml
stackoverflow:
  baseUrl: https://api.stackexchange.com/2.2
  # use your internal Stack Overflow instance here if you have one

New frontend system

Copy

// packages/app/src/App.tsx
import stackOverflowPlugin from '@backstage-community/plugin-stack-overflow';
import { createApp } from '@backstage/frontend-defaults'; // or your existing import

export const app = createApp({
  features: [
    // your existing features
    stackOverflowPlugin,
  ],
});

If you use feature discovery this is handled for you.

Legacy frontend system

Render Stack Overflow results on the search page

Copy

// packages/app/src/components/search/SearchPage.tsx
import React from 'react';
import { SearchResult } from '@backstage/plugin-search-react';
import { StackOverflowSearchResultListItem } from '@backstage-community/plugin-stack-overflow';

export const SearchPage = () => {
  return (
    <SearchResult
      resultItemComponent={({ result, rank, highlight }) => {
        switch (result.type) {
          case 'stack-overflow':
            return (
              <StackOverflowSearchResultListItem
                result={result}
                rank={rank}
                highlight={highlight}
              />
            );
          default:
            return null;
        }
      }}
    />
  );
};

Add Stack Overflow questions to your homepage

First set up the homepage using the Backstage homepage guide. Then add the card.

Copy

// packages/app/src/components/home/HomePage.tsx
import React from 'react';
import Grid from '@material-ui/core/Grid';
import { HomePageStackOverflowQuestions } from '@backstage-community/plugin-stack-overflow';

export const HomePage = () => (
  <Grid container spacing={3}>
    {/* your existing homepage cards */}
    <Grid item xs={12} md={6}>
      <HomePageStackOverflowQuestions
        requestParams={{
          tagged: 'backstage',
          site: 'stackoverflow',
          pagesize: 5,
        }}
      />
    </Grid>
  </Grid>
);

Note This homepage card is not available in the new frontend system

Install the backend module for search indexing

Stack Overflow results appear in search only after indexing. Install the Stack Overflow search backend module.

Copy

yarn --cwd packages/backend add @backstage/plugin-search-backend-module-stack-overflow-collator

New backend system

Copy

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

// search backend
backend.add(import('@backstage/plugin-search-backend'));

// stack overflow collator
backend.add(
  import(
    '@backstage/plugin-search-backend-module-stack-overflow-collator'
  ),
);

backend.start();

This module will read the stackoverflow config you added earlier.

Legacy backend system

Add the collator to your search backend

Copy

// packages/backend/src/plugins/search.ts
import { Router } from 'express';
import { PluginEnvironment } from '../types';
import {
  IndexBuilder,
  LunrSearchEngine,
  createRouter,
} from '@backstage/plugin-search-backend';
import { StackOverflowCollatorFactory } from '@backstage/plugin-search-backend-module-stack-overflow-collator';
import { Duration } from 'luxon';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  const searchEngine = new LunrSearchEngine({ logger: env.logger });

  const indexBuilder = new IndexBuilder({
    logger: env.logger,
    searchEngine,
  });

  indexBuilder.addCollator({
    factory: StackOverflowCollatorFactory.fromConfig(env.config, {
      logger: env.logger,
    }),
    schedule: env.scheduler.createScheduledTaskRunner({
      frequency: Duration.fromObject({ minutes: 30 }),
      timeout: Duration.fromObject({ minutes: 15 }),
    }),
  });

  const { scheduler } = await indexBuilder.build();
  scheduler.start();

  return await createRouter({
    engine: indexBuilder.getSearchEngine(),
    types: indexBuilder.getDocumentTypes(),
    logger: env.logger,
    config: env.config,
  });
}

No extra backend config is required beyond the stackoverflow section you already added.

Backstage Stack Overflow Plugin

Installation Instructions

Install the frontend package

New frontend system

Legacy frontend system

Install the backend module for search indexing

New backend system

Legacy backend system

Changelog

Breaking changes

Features

Maintenance

Set up Backstage in minutes with Roadie