Backstage Stack Overflow Plugin

Set up Backstage in minutes with Roadie

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

Installation steps

As a prerequisite, you should have installed the <a href="https://github.com/backstage/community-plugins/tree/main/workspaces/stack-overflow/plugins/stack-overflow-backend'>Stack Overflow Backend plugin.

Install the Stack Overflow backend plugin package in your Backstage app

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

Add Stack Overflow to your app config.

// app-config.yaml
stackoverflow:
  baseUrl: https://api.stackexchange.com/2.2

If you have a private Stack Overflow instance and/or a private Stack Overflow Team you will need to supply an API key or Personal Access Token. You can read more about how to set this up by going to the Stack Overflow Help Page.

// app-config.yaml
stackoverflow:
  baseUrl: https://api.stackexchange.com/2.2 # alternative: your internal stack overflow instance
  apiKey: $STACK_OVERFLOW_API_KEY
  apiAccessToken: $STACK_OVERFLOW_API_ACCESS_TOKEN

To use Stack Overflow on your home page, add to you packages/app/src/components/home/HomePage.tsx

// packages/app/src/components/home/HomePage.tsx
<Grid item xs={12} md={6}>
  <HomePageStackOverflowQuestions
    requestParams={{
      tagged: 'backstage',
      site: 'stackoverflow',
      pagesize: 5,
    }}
  />
</Grid>

To return Stack Overflow results as part of the search results in Backstage, add StackOverflowSearchResultListItem to packages/app/src/components/search/SearchPage.tsx.

// packages/app/src/components/home/HomePage.tsx
<Grid item xs={12} md={6}>
  <HomePageStackOverflowQuestions
    requestParams={{
      tagged: 'backstage',
      site: 'stackoverflow',
      pagesize: 5,
    }}
  />
</Grid>

Found a mistake? Update these instructions.

Things to know

Useful Links

Set up Backstage in minutes with Roadie

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

Get a demo