-
Notifications
You must be signed in to change notification settings - Fork 470
docs: Add Backstage plugin integration documentation #6755
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
2c56f9f
docs: Add Backstage plugin integration documentation
talissoncosta 1b4a124
docs: Address PR review feedback for Backstage documentation
talissoncosta b5c18af
docs: Remove org-id requirement from Backstage documentation
talissoncosta f91f527
docs: Update Backstage plugin wording per review feedback
talissoncosta fd522ec
docs: Add expanded flag details screenshot to Backstage docs
talissoncosta cb2e48b
docs: rename to developer-tools directory and update title
talissoncosta 07d9870
docs: move Backstage to Additional Integrations category
talissoncosta 9c0e66a
fix: adjust title
talissoncosta c2fc9d6
fix: adjust title and navigation
talissoncosta 5dee644
fix: add note and rm section to set up api key
talissoncosta 0fd9bbd
refactor: improve the structure and the article flow
talissoncosta f1c2cfd
fix: improving the alt image texts
talissoncosta 1481a96
fix: identation
talissoncosta File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| --- | ||
| title: Backstage | ||
| description: 'Integrate Flagsmith feature flags into your Backstage developer portal' | ||
| --- | ||
|
|
||
| The [Flagsmith Backstage Plugin](https://github.com/Flagsmith/flagsmith-backstage-plugin) brings feature flag | ||
| observability directly into your [Backstage](https://backstage.io/) developer portal. It provides three components: | ||
|
|
||
| - **Feature Flags Tab** — A full-page table listing all flags, their tags, and environment states. | ||
| - **Overview Card** — A quick summary of your feature flags for entity overview pages. | ||
| - **Usage Card** — A chart showing flag usage metrics over time. | ||
|
|
||
|  | ||
|
|
||
| ## Integrate with Backstage | ||
|
|
||
| ### 1. Install the plugin | ||
|
|
||
| Install the plugin from your Backstage app root: | ||
|
|
||
| ```bash | ||
| yarn --cwd packages/app add @flagsmith/backstage-plugin | ||
| ``` | ||
|
|
||
| ### 2. Configure the proxy | ||
|
|
||
| Add the Flagsmith proxy configuration to your `app-config.yaml`: | ||
|
|
||
| ```yaml | ||
| proxy: | ||
| endpoints: | ||
| '/flagsmith': | ||
| target: 'https://api.flagsmith.com/api/v1' | ||
| headers: | ||
| Authorization: Api-Key FLAGSMITH_API_TOKEN | ||
| ``` | ||
|
|
||
| - `FLAGSMITH_API_TOKEN`: obtain from Organisation Settings > API Keys in Flagsmith. | ||
| - If you are self-hosting Flagsmith, replace the `target` URL with your own Flagsmith API address, e.g. | ||
| `https://flagsmith.example.com/api/v1`. | ||
|
|
||
| :::note | ||
|
|
||
| **Enterprise users:** when generating the Organisation API key, select permissions **View Project** and **View | ||
| Environment**, so that Backstage can see your _Environments_ and _Features_ in Flagsmith. | ||
|
|
||
| ::: | ||
|
|
||
| ### 3. Set up entity annotation | ||
|
|
||
| Annotate your entities in `catalog-info.yaml` so the plugin knows which Flagsmith project to display: | ||
|
|
||
| ```yaml | ||
| apiVersion: backstage.io/v1alpha1 | ||
| kind: Component | ||
| metadata: | ||
| name: my-service | ||
| annotations: | ||
| flagsmith.com/project-id: 'PROJECT_ID' | ||
| spec: | ||
| type: service | ||
| owner: my-team | ||
| lifecycle: production | ||
| ``` | ||
|
|
||
| - `PROJECT_ID`: obtain from the Flagsmith dashboard URL, e.g. `/project/<id>/...`. | ||
|
|
||
| ## Add Components to Backstage | ||
|
|
||
| Edit your `packages/app/src/components/catalog/EntityPage.tsx` to add the Flagsmith components. | ||
|
|
||
| ### Feature Flags Tab | ||
|
|
||
| Import and add the `FlagsTab` as a new tab on your entity page: | ||
|
|
||
| ```tsx | ||
| import { FlagsTab } from '@flagsmith/backstage-plugin'; | ||
|
|
||
| // Inside your entity page layout, add a new tab: | ||
| <EntityLayout.Route path="/feature-flags" title="Feature Flags"> | ||
| <FlagsTab /> | ||
| </EntityLayout.Route>; | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| Click a feature in the list to reveal its usage graphs and detailed information: | ||
|
|
||
|  | ||
|
|
||
| ### Overview Card | ||
|
|
||
| Add the `FlagsmithOverviewCard` to your entity overview page: | ||
|
|
||
| ```tsx | ||
| import { FlagsmithOverviewCard } from '@flagsmith/backstage-plugin'; | ||
|
|
||
| // Inside your overview grid: | ||
| <Grid item md={6}> | ||
| <FlagsmithOverviewCard /> | ||
| </Grid>; | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ### Usage Card | ||
|
|
||
| Add the `FlagsmithUsageCard` to display flag usage metrics: | ||
|
|
||
| ```tsx | ||
| import { FlagsmithUsageCard } from '@flagsmith/backstage-plugin'; | ||
|
|
||
| // Inside your overview grid: | ||
| <Grid item md={6}> | ||
| <FlagsmithUsageCard /> | ||
| </Grid>; | ||
| ``` | ||
|
|
||
|  |
talissoncosta marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.