paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:spotify/backstage into mob/union-types

Browse Source
This commit is contained in:
blam
2020-08-12 02:03:07 +02:00
parent ce2ed89e57 0ef434d911
commit 6b7769ab95
165 changed files with 18150 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -5,3 +5,4 @@
**/build/**
**/.git/**
**/public/**
**/microsite/**
.github/workflows/frontend.yml
+5 -1
View File
@@ -2,7 +2,8 @@ name: Frontend CI
on:
pull_request:
paths:
- '!microsite/**'
jobs:
build:
runs-on: ubuntu-latest
@@ -44,6 +45,9 @@ jobs:
run: git diff --quiet origin/master HEAD -- yarn.lock
continue-on-error: true
- name: verify doc links
run: node docs/verify-links.js
- name: yarn install
run: yarn install --frozen-lockfile
.gitignore
+3
View File
@@ -119,3 +119,6 @@ dist
# MkDocs build output
site
# Local configuration files
*.local.yaml
README.md
+10 -23
View File
@@ -10,33 +10,20 @@
## What is Backstage?
[Backstage](https://backstage.io/) is an open platform for building developer portals. It’s based on the developer portal we’ve been using internally at Spotify for over four years. Backstage can be as simple as a services catalog or as powerful as the UX layer for your entire tech infrastructure.
[Backstage](https://backstage.io/) is an open platform for building developer portals. Powered by a centralized service catalog, Backstage restores order to your microservices and infrastructure. So your product teams can ship high-quality code quickly — without compromising autonomy.
For more information go to [backstage.io](https://backstage.io) or join our [Discord chatroom](https://discord.gg/EBHEGzX).
### Features
- Create and manage all of your organization’s software and microservices in one place.
- Services catalog keeps track of all software and its ownership.
- Visualizations provide information about your backend services and tooling, and help you monitor them.
- A unified method for managing microservices offers both visibility and control.
- Preset templates allow engineers to quickly create microservices in a standardized way ([coming soon](https://github.com/spotify/backstage/milestone/11)).
- Centralized, full-featured technical documentation with integrated tooling that makes it easy for developers to set up, publish, and maintain alongside their code ([coming soon](https://github.com/spotify/backstage/milestone/15)).
### Benefits
- For _engineering managers_, it allows you to maintain standards and best practices across the organization, and can help you manage your whole tech ecosystem, from migrations to test certification.
- For _end users_ (developers), it makes it fast and simple to build software components in a standardized way, and it provides a central place to manage all projects and documentation.
- For _platform engineers_, it enables extensibility and scalability by letting you easily integrate new tools and services (via plugins), as well as extending the functionality of existing ones.
- For _everyone_, it’s a single, consistent experience that ties all your infrastructure tooling, resources, standards, owners, contributors, and administrators together in one place.
## Backstage Service Catalog (alpha)
The Backstage Service Catalog — actually, a software catalog, since it includes more than just services — is a centralized system that keeps track of ownership and metadata for all the software in your ecosystem (services, websites, libraries, data pipelines, etc). The catalog is built around the concept of [metadata yaml files](https://github.com/spotify/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md#format) stored together with the code, which are then harvested and visualized in Backstage.
Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.
![service-catalog](https://backstage.io/blog/assets/6/header.png)
We have also found that the service catalog is a great way to organise the infrastructure tools you use to manage the software as well. This is how Backstage creates one developer portal for all your tools. Rather than asking teams to jump between different infrastructure UI’s (and incurring additional cognitive overhead each time they make a context switch), most of these tools can be organised around the entities in the catalog.
Out of the box, Backstage includes:
- [Backstage Service Catalog](https://github.com/spotify/backstage/blob/master/docs/features/software-catalog/index.md) for managing all your software (microservices, libraries, data pipelines, websites, ML models, etc.)
- [Backstage Software Templates](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/index.md) for quickly spinning up new projects and standardizing your tooling with your organization’s best practices
- [Backstage TechDocs](https://github.com/spotify/backstage/tree/master/docs/features/techdocs) for making it easy to create, maintain, find, and use technical documentation, using a "docs like code" approach
- Plus, a growing ecosystem of [open source plugins](https://github.com/spotify/backstage/tree/master/plugins) that further expand Backstage’s customizability and functionality
For more information go to [backstage.io](https://backstage.io) or join our [Discord chatroom](https://discord.gg/EBHEGzX).
## Project roadmap
docs/README.md
+1 -5
View File
@@ -43,11 +43,7 @@ better yet, a pull request.
- [Overview](features/techdocs/README.md)
- [Getting Started](features/techdocs/getting-started.md)
- [Concepts](features/techdocs/concepts.md)
- [Reading Documentation](features/techdocs/reading-documentation.md)
- [Writing Documentation](features/techdocs/writing-documentation.md)
- [Publishing Documentation](features/techdocs/publishing-documentation.md)
- [Contributing](features/techdocs/contributing.md)
- [Debugging](features/techdocs/debugging.md)
- [Creating and Publishing Documentation](features/techdocs/creating-and-publishing.md)
- [FAQ](features/techdocs/FAQ.md)
- Plugins
- [Overview](plugins/index.md)
docs/dls/design.md
+2 -4
View File
@@ -110,13 +110,11 @@ picked up by our team as something to be added to our design system.
components. If you’d like to help build up our design system, you can also add
components we’ve designed to the Storybook as well.
**[Figma](https://www.figma.com/@backstage)** - we're stoked to be using Figma Community to share our design assets. You can duplicate our component library and design your own plugin for Backstage.
**[Discord](https://discord.gg/EBHEGzX)** - all design questions should be
directed to the _#design_ channel.
**Documentation**
- Patterns (stay tuned)
- Figma files/libraries (stay tuned)
## 🔮 Future
docs/features/software-catalog/index.md
+4
View File
@@ -24,3 +24,7 @@ can be organised around the entities in the catalog.
TODO
![](service-catalog-home.png)
## Links
- [[Blog post] Backstage Service Catalog released in alpha](https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha)
docs/features/software-templates/adding-templates.md
+1 -1
View File
@@ -17,7 +17,7 @@ metadata:
# a description of the template
description: Next.js application skeleton for creating isomorphic web applications.
# some tags to display in the frontend
tags:
tags:
- Recommended
- React
spec:
docs/features/techdocs/README.md
+42 -5
View File
@@ -22,16 +22,53 @@ Spotify’s developer experience offering with 2,400+ documentation sites and
## Project roadmap
| Version | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| [TechDocs V.0 ✅][v0] | Read docs in Backstage - Enable anyone to get a reader experience working in Backstage. |
| [TechDocs V.1 🚧][v1] | TechDocs end to end - First and minimum release of TechDocs that you can use end to end - and contribute to. |
| [TechDocs V.2 🔮⌛][v2] | Widget Architecture - TechDocs widget architecture available, so the community can create their own customized features. |
| Version | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| [TechDocs V.0 ✅][v0] | Read docs in Backstage - Enable anyone to get a reader experience working in Backstage. [See V.0 Use Cases.](./#techdocs-v0) |
| [TechDocs V.1 🚧][v1] | TechDocs end to end (alpha) - Alpha of TechDocs that you can use end to end - and contribute to. [See V.1 Use Cases.](./#techdocs-v1) |
| [TechDocs V.2 🔮⌛][v2] | Platform stability and compatibility improvements. [See V.2 Use Cases.](./#techdocs-v2) |
| TechDocs V.3 🔮⌛ | Widget Architecture - TechDocs widget architecture available, so the community can create their own customized features. |
[v0]: https://github.com/spotify/backstage/milestone/15
[v1]: https://github.com/spotify/backstage/milestone/16
[v2]: https://github.com/spotify/backstage/milestone/17
<!-- TODO: Add link to milestone for v3 -->
## Use Cases
#### TechDocs V.0
- As a user I can navigate to a manually curated docs explore page.
- As a user I can navigte to and read mock documentation that is manually
uploaded by the TechDocs core team.
#### TechDocs V.1
- As a user I can run TechDocs locally and read documentation.
- As a user I can create a docs folder in my entity project and add a reference
in the entity configuration file (of the owning entity) to my documentation.
- Backstage will automatically build my documentation and serve it in
TechDocs.
- Documentation will be displayed under the docs tab in the service catalog.
- As a user I can create a docs only repository that will be standalone from any
other service.
- As a user I can choose my own storage solution for the documentation (as
example GCS/AWS/Azure etc)
- As a user I can define my own API to interface my own documentation solution.
#### TechDocs V.2
Platform stability and compatibility improvements
- As a user I can define the metadata generated for my documentation.
- As a user I will be able to browse metadata from within my documentation in
Backstage.
#### TechDocs V.3
more to come...
## Structure
- [Getting Started]
docs/getting-started/create-an-app.md
+1 -1
View File
@@ -22,7 +22,7 @@ This will create a new Backstage App inside the current folder. The name of the
app-folder is the name that was provided when prompted.
<p align='center'>
<img src='https://github.com/spotify/backstage/raw/master/docs/create-app_output.png' width='600' alt='create app'>
<img src='https://github.com/spotify/backstage/raw/master/docs/getting-started/create-app_output.png' width='600' alt='create app'>
</p>
Inside that directory, it will generate all the files and folder structure
docs/overview/what-is-backstage.md
+22 -20
View File
@@ -1,33 +1,35 @@
# [Backstage](https://backstage.io)
![headline](../headline.png)
![service-catalog](https://backstage.io/blog/assets/6/header.png)
## What is Backstage?
[Backstage](https://backstage.io/) is an open platform for building developer
portals. It’s based on the developer portal we’ve been using internally at
Spotify for over four years. Backstage can be as simple as a services catalog or
as powerful as the UX layer for your entire tech infrastructure.
portals. Powered by a centralized service catalog, Backstage restores order to
your microservices and infrastructure. So your product teams can ship
high-quality code quickly — without compromising autonomy.
Backstage unifies all your infrastructure tooling, services, and documentation
to create a streamlined development environment from end to end.
Out of the box, Backstage includes:
- [Backstage Service Catalog](https://github.com/spotify/backstage/blob/master/docs/features/software-catalog/index.md)
for managing all your software (microservices, libraries, data pipelines,
websites, ML models, etc.)
- [Backstage Software Templates](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/index.md)
for quickly spinning up new projects and standardizing your tooling with your
organization’s best practices
- [Backstage TechDocs](https://github.com/spotify/backstage/tree/master/docs/features/techdocs)
for making it easy to create, maintain, find, and use technical documentation,
using a "docs like code" approach
- Plus, a growing ecosystem of
[open source plugins](https://github.com/spotify/backstage/tree/master/plugins)
that further expand Backstage’s customizability and functionality
For more information go to [backstage.io](https://backstage.io) or join our
[Discord chatroom](https://discord.gg/EBHEGzX).
### Features
- Create and manage all of your organization’s software and microservices in one
place.
- Services catalog keeps track of all software and its ownership.
- Visualizations provide information about your backend services and tooling,
and help you monitor them.
- A unified method for managing microservices offers both visibility and
control.
- Preset templates allow engineers to quickly create microservices in a
standardized way
([coming soon](https://github.com/spotify/backstage/milestone/11)).
- Centralized, full-featured technical documentation with integrated tooling
that makes it easy for developers to set up, publish, and maintain alongside
their code ([coming soon](https://github.com/spotify/backstage/milestone/15)).
### Benefits
- For _engineering managers_, it allows you to maintain standards and best
docs/reference/utility-apis/AlertApi.md
+5 -5
View File
@@ -1,7 +1,7 @@
# AlertApi
The AlertApi type is defined at
[packages/core-api/src/apis/definitions/AlertApi.ts:29](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AlertApi.ts#L29).
[packages/core-api/src/apis/definitions/AlertApi.ts:29](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AlertApi.ts#L29).
The following Utility API implements this type: [alertApiRef](./README.md#alert)
@@ -38,7 +38,7 @@ export type AlertMessage = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/AlertApi.ts:19](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AlertApi.ts#L19).
[packages/core-api/src/apis/definitions/AlertApi.ts:19](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AlertApi.ts#L19).
Referenced by: [post](#post), [alert\$](#alert).
@@ -67,7 +67,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [alert\$](#alert).
@@ -86,7 +86,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -109,6 +109,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/reference/utility-apis/AppThemeApi.md
+16 -9
View File
@@ -1,7 +1,7 @@
# AppThemeApi
The AppThemeApi type is defined at
[packages/core-api/src/apis/definitions/AppThemeApi.ts:50](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AppThemeApi.ts#L50).
[packages/core-api/src/apis/definitions/AppThemeApi.ts:50](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AppThemeApi.ts#L50).
The following Utility API implements this type:
[appThemeApiRef](./README.md#apptheme)
@@ -76,7 +76,7 @@ export type AppTheme = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/AppThemeApi.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AppThemeApi.ts#L24).
[packages/core-api/src/apis/definitions/AppThemeApi.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AppThemeApi.ts#L24).
Referenced by: [getInstalledThemes](#getinstalledthemes).
@@ -87,7 +87,7 @@ export type BackstagePalette = Palette &amp; <a href="#paletteadditions">Palette
</pre>
Defined at
[packages/theme/src/types.ts:63](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/theme/src/types.ts#L63).
[packages/theme/src/types.ts:67](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/theme/src/types.ts#L67).
Referenced by: [BackstageTheme](#backstagetheme).
@@ -100,7 +100,7 @@ export interface BackstageTheme extends Theme {
</pre>
Defined at
[packages/theme/src/types.ts:66](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/theme/src/types.ts#L66).
[packages/theme/src/types.ts:70](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/theme/src/types.ts#L70).
Referenced by: [AppTheme](#apptheme).
@@ -129,7 +129,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [activeThemeId\$](#activethemeid).
@@ -148,7 +148,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -178,7 +178,10 @@ type PaletteAdditions = {
linkHover: string;
link: string;
gold: string;
sidebar: string;
navigation: {
background: string;
indicator: string;
};
tabbar: {
indicator: string;
};
@@ -193,11 +196,15 @@ type PaletteAdditions = {
icon: string;
background: string;
};
banner: {
info: string;
error: string;
};
}
</pre>
Defined at
[packages/theme/src/types.ts:23](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/theme/src/types.ts#L23).
[packages/theme/src/types.ts:23](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/theme/src/types.ts#L23).
Referenced by: [BackstagePalette](#backstagepalette).
@@ -220,6 +227,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/reference/utility-apis/BackstageIdentityApi.md
+3 -3
View File
@@ -1,7 +1,7 @@
# BackstageIdentityApi
The BackstageIdentityApi type is defined at
[packages/core-api/src/apis/definitions/auth.ts:144](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L144).
[packages/core-api/src/apis/definitions/auth.ts:144](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L144).
The following Utility APIs implement this type:
@@ -62,7 +62,7 @@ export type AuthRequestOptions = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L40).
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L40).
Referenced by: [getBackstageIdentity](#getbackstageidentity).
@@ -83,6 +83,6 @@ export type BackstageIdentity = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:157](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L157).
[packages/core-api/src/apis/definitions/auth.ts:157](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L157).
Referenced by: [getBackstageIdentity](#getbackstageidentity).
docs/reference/utility-apis/Config.md
+5 -5
View File
@@ -1,7 +1,7 @@
# Config
The Config type is defined at
[packages/config/src/types.ts:32](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/config/src/types.ts#L32).
[packages/config/src/types.ts:32](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/config/src/types.ts#L32).
The following Utility API implements this type:
[configApiRef](./README.md#config)
@@ -132,7 +132,7 @@ export type Config = {
</pre>
Defined at
[packages/config/src/types.ts:32](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/config/src/types.ts#L32).
[packages/config/src/types.ts:32](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/config/src/types.ts#L32).
Referenced by: [getConfig](#getconfig), [getOptionalConfig](#getoptionalconfig),
[getConfigArray](#getconfigarray),
@@ -145,7 +145,7 @@ export type JsonArray = <a href="#jsonvalue">JsonValue</a>[]
</pre>
Defined at
[packages/config/src/types.ts:18](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/config/src/types.ts#L18).
[packages/config/src/types.ts:18](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/config/src/types.ts#L18).
Referenced by: [JsonValue](#jsonvalue).
@@ -156,7 +156,7 @@ export type JsonObject = { [key in string]?: <a href="#jsonvalue">JsonValue</a>
</pre>
Defined at
[packages/config/src/types.ts:17](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/config/src/types.ts#L17).
[packages/config/src/types.ts:17](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/config/src/types.ts#L17).
Referenced by: [JsonValue](#jsonvalue).
@@ -173,7 +173,7 @@ export type JsonValue =
</pre>
Defined at
[packages/config/src/types.ts:19](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/config/src/types.ts#L19).
[packages/config/src/types.ts:19](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/config/src/types.ts#L19).
Referenced by: [get](#get), [getOptional](#getoptional),
[JsonObject](#jsonobject), [JsonArray](#jsonarray), [Config](#config).
docs/reference/utility-apis/ErrorApi.md
+6 -6
View File
@@ -1,7 +1,7 @@
# ErrorApi
The ErrorApi type is defined at
[packages/core-api/src/apis/definitions/ErrorApi.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/ErrorApi.ts#L53).
[packages/core-api/src/apis/definitions/ErrorApi.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/ErrorApi.ts#L53).
The following Utility API implements this type: [errorApiRef](./README.md#error)
@@ -41,7 +41,7 @@ type Error = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/ErrorApi.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/ErrorApi.ts#L24).
[packages/core-api/src/apis/definitions/ErrorApi.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/ErrorApi.ts#L24).
Referenced by: [post](#post), [error\$](#error).
@@ -58,7 +58,7 @@ export type ErrorContext = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/ErrorApi.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/ErrorApi.ts#L33).
[packages/core-api/src/apis/definitions/ErrorApi.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/ErrorApi.ts#L33).
Referenced by: [post](#post), [error\$](#error).
@@ -87,7 +87,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [error\$](#error).
@@ -106,7 +106,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -129,6 +129,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/reference/utility-apis/FeatureFlagsApi.md
+1 -1
View File
@@ -1,7 +1,7 @@
# FeatureFlagsApi
The FeatureFlagsApi type is defined at
[packages/core-api/src/apis/definitions/FeatureFlagsApi.ts:41](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/FeatureFlagsApi.ts#L41).
[packages/core-api/src/apis/definitions/FeatureFlagsApi.ts:41](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/FeatureFlagsApi.ts#L41).
The following Utility API implements this type:
[featureFlagsApiRef](./README.md#featureflags)
docs/reference/utility-apis/IdentityApi.md
+2 -2
View File
@@ -1,7 +1,7 @@
# IdentityApi
The IdentityApi type is defined at
[packages/core-api/src/apis/definitions/IdentityApi.ts:22](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/IdentityApi.ts#L22).
[packages/core-api/src/apis/definitions/IdentityApi.ts:22](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/IdentityApi.ts#L22).
The following Utility API implements this type:
[identityApiRef](./README.md#identity)
@@ -76,6 +76,6 @@ export type ProfileInfo = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:172](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L172).
[packages/core-api/src/apis/definitions/auth.ts:172](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L172).
Referenced by: [getProfile](#getprofile).
docs/reference/utility-apis/OAuthApi.md
+3 -3
View File
@@ -1,7 +1,7 @@
# OAuthApi
The OAuthApi type is defined at
[packages/core-api/src/apis/definitions/auth.ts:67](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L67).
[packages/core-api/src/apis/definitions/auth.ts:67](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L67).
The following Utility APIs implement this type:
@@ -88,7 +88,7 @@ export type AuthRequestOptions = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L40).
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L40).
Referenced by: [getAccessToken](#getaccesstoken).
@@ -114,6 +114,6 @@ export type OAuthScope = string | string[]
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:38](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L38).
[packages/core-api/src/apis/definitions/auth.ts:38](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L38).
Referenced by: [getAccessToken](#getaccesstoken).
docs/reference/utility-apis/OAuthRequestApi.md
+8 -8
View File
@@ -1,7 +1,7 @@
# OAuthRequestApi
The OAuthRequestApi type is defined at
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:99](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L99).
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:99](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L99).
The following Utility API implements this type:
[oauthRequestApiRef](./README.md#oauthrequest)
@@ -72,7 +72,7 @@ export type AuthProvider = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:27](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L27).
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:27](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L27).
Referenced by: [AuthRequesterOptions](#authrequesteroptions),
[PendingAuthRequest](#pendingauthrequest).
@@ -96,7 +96,7 @@ export type AuthRequester&lt;AuthResponse&gt; = (
</pre>
Defined at
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:66](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L66).
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:66](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L66).
Referenced by: [createAuthRequester](#createauthrequester).
@@ -121,7 +121,7 @@ export type AuthRequesterOptions&lt;AuthResponse&gt; = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:43](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L43).
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:43](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L43).
Referenced by: [createAuthRequester](#createauthrequester).
@@ -150,7 +150,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [authRequest\$](#authrequest).
@@ -169,7 +169,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -204,7 +204,7 @@ export type PendingAuthRequest = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:77](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L77).
[packages/core-api/src/apis/definitions/OAuthRequestApi.ts:77](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L77).
Referenced by: [authRequest\$](#authrequest).
@@ -227,6 +227,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/reference/utility-apis/OpenIdConnectApi.md
+2 -2
View File
@@ -1,7 +1,7 @@
# OpenIdConnectApi
The OpenIdConnectApi type is defined at
[packages/core-api/src/apis/definitions/auth.ts:104](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L104).
[packages/core-api/src/apis/definitions/auth.ts:104](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L104).
The following Utility APIs implement this type:
@@ -70,6 +70,6 @@ export type AuthRequestOptions = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L40).
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L40).
Referenced by: [getIdToken](#getidtoken).
docs/reference/utility-apis/ProfileInfoApi.md
+3 -3
View File
@@ -1,7 +1,7 @@
# ProfileInfoApi
The ProfileInfoApi type is defined at
[packages/core-api/src/apis/definitions/auth.ts:127](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L127).
[packages/core-api/src/apis/definitions/auth.ts:127](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L127).
The following Utility APIs implement this type:
@@ -61,7 +61,7 @@ export type AuthRequestOptions = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L40).
[packages/core-api/src/apis/definitions/auth.ts:40](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L40).
Referenced by: [getProfile](#getprofile).
@@ -89,6 +89,6 @@ export type ProfileInfo = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:172](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L172).
[packages/core-api/src/apis/definitions/auth.ts:172](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L172).
Referenced by: [getProfile](#getprofile).
docs/reference/utility-apis/README.md
+13 -13
View File
@@ -12,7 +12,7 @@ Used to report alerts and forward them to the app
Implemented type: [AlertApi](./AlertApi.md)
ApiRef:
[alertApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AlertApi.ts#L41)
[alertApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AlertApi.ts#L41)
### appTheme
@@ -21,7 +21,7 @@ API Used to configure the app theme, and enumerate options
Implemented type: [AppThemeApi](./AppThemeApi.md)
ApiRef:
[appThemeApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/AppThemeApi.ts#L74)
[appThemeApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/AppThemeApi.ts#L74)
### config
@@ -30,7 +30,7 @@ Used to access runtime configuration
Implemented type: [Config](./Config.md)
ApiRef:
[configApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/ConfigApi.ts#L22)
[configApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/ConfigApi.ts#L22)
### error
@@ -39,7 +39,7 @@ Used to report errors and forward them to the app
Implemented type: [ErrorApi](./ErrorApi.md)
ApiRef:
[errorApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/ErrorApi.ts#L65)
[errorApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/ErrorApi.ts#L65)
### featureFlags
@@ -48,7 +48,7 @@ Used to toggle functionality in features across Backstage
Implemented type: [FeatureFlagsApi](./FeatureFlagsApi.md)
ApiRef:
[featureFlagsApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/FeatureFlagsApi.ts#L58)
[featureFlagsApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/FeatureFlagsApi.ts#L58)
### githubAuth
@@ -60,7 +60,7 @@ Implemented types: [OAuthApi](./OAuthApi.md),
[SessionStateApi](./SessionStateApi.md)
ApiRef:
[githubAuthApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L230)
[githubAuthApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L230)
### gitlabAuth
@@ -72,7 +72,7 @@ Implemented types: [OAuthApi](./OAuthApi.md),
[SessionStateApi](./SessionStateApi.md)
ApiRef:
[gitlabAuthApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L260)
[gitlabAuthApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L260)
### googleAuth
@@ -85,7 +85,7 @@ Implemented types: [OAuthApi](./OAuthApi.md),
[SessionStateApi](./SessionStateApi.md)
ApiRef:
[googleAuthApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L213)
[googleAuthApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L213)
### identity
@@ -94,7 +94,7 @@ Provides access to the identity of the signed in user
Implemented type: [IdentityApi](./IdentityApi.md)
ApiRef:
[identityApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/IdentityApi.ts#L54)
[identityApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/IdentityApi.ts#L54)
### oauth2
@@ -105,7 +105,7 @@ Implemented types: [OAuthApi](./OAuthApi.md),
[ProfileInfoApi](./ProfileInfoApi.md), [SessionStateApi](./SessionStateApi.md)
ApiRef:
[oauth2ApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L270)
[oauth2ApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L270)
### oauthRequest
@@ -114,7 +114,7 @@ An API for implementing unified OAuth flows in Backstage
Implemented type: [OAuthRequestApi](./OAuthRequestApi.md)
ApiRef:
[oauthRequestApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L130)
[oauthRequestApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/OAuthRequestApi.ts#L130)
### oktaAuth
@@ -127,7 +127,7 @@ Implemented types: [OAuthApi](./OAuthApi.md),
[SessionStateApi](./SessionStateApi.md)
ApiRef:
[oktaAuthApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L243)
[oktaAuthApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L243)
### storage
@@ -136,4 +136,4 @@ Provides the ability to store data which is unique to the user
Implemented type: [StorageApi](./StorageApi.md)
ApiRef:
[storageApiRef](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/StorageApi.ts#L68)
[storageApiRef](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/StorageApi.ts#L68)
docs/reference/utility-apis/SessionStateApi.md
+5 -5
View File
@@ -1,7 +1,7 @@
# SessionStateApi
The SessionStateApi type is defined at
[packages/core-api/src/apis/definitions/auth.ts:201](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L201).
[packages/core-api/src/apis/definitions/auth.ts:201](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L201).
The following Utility APIs implement this type:
@@ -52,7 +52,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [sessionState\$](#sessionstate).
@@ -71,7 +71,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -87,7 +87,7 @@ export enum SessionState {
</pre>
Defined at
[packages/core-api/src/apis/definitions/auth.ts:192](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/auth.ts#L192).
[packages/core-api/src/apis/definitions/auth.ts:192](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/auth.ts#L192).
Referenced by: [sessionState\$](#sessionstate).
@@ -110,6 +110,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/reference/utility-apis/StorageApi.md
+6 -6
View File
@@ -1,7 +1,7 @@
# StorageApi
The StorageApi type is defined at
[packages/core-api/src/apis/definitions/StorageApi.ts:31](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/StorageApi.ts#L31).
[packages/core-api/src/apis/definitions/StorageApi.ts:31](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/StorageApi.ts#L31).
The following Utility API implements this type:
[storageApiRef](./README.md#storage)
@@ -79,7 +79,7 @@ export type Observable&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L53).
[packages/core-api/src/types.ts:53](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L53).
Referenced by: [observe\$](#observe), [StorageApi](#storageapi).
@@ -98,7 +98,7 @@ export type Observer&lt;T&gt; = {
</pre>
Defined at
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L24).
[packages/core-api/src/types.ts:24](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L24).
Referenced by: [Observable](#observable).
@@ -144,7 +144,7 @@ export interface StorageApi {
</pre>
Defined at
[packages/core-api/src/apis/definitions/StorageApi.ts:31](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/StorageApi.ts#L31).
[packages/core-api/src/apis/definitions/StorageApi.ts:31](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/StorageApi.ts#L31).
Referenced by: [forBucket](#forbucket).
@@ -158,7 +158,7 @@ export type StorageValueChange&lt;T = any&gt; = {
</pre>
Defined at
[packages/core-api/src/apis/definitions/StorageApi.ts:21](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/apis/definitions/StorageApi.ts#L21).
[packages/core-api/src/apis/definitions/StorageApi.ts:21](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/apis/definitions/StorageApi.ts#L21).
Referenced by: [observe\$](#observe), [StorageApi](#storageapi).
@@ -181,6 +181,6 @@ export type Subscription = {
</pre>
Defined at
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/53a229ea7576b1432835e54e41e0b9526038afa4/packages/core-api/src/types.ts#L33).
[packages/core-api/src/types.ts:33](https://github.com/spotify/backstage/blob/f8780ff32509d0326bc513791ea60846d7614b34/packages/core-api/src/types.ts#L33).
Referenced by: [Observable](#observable).
docs/verify-links.js
Executable
+89
View File
@@ -0,0 +1,89 @@
#!/usr/bin/env node
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const { resolve: resolvePath, dirname } = require('path');
const fs = require('fs-extra');
const fetch = require('node-fetch');
const recursive = require('recursive-readdir');
const projectRoot = resolvePath(__dirname, '..');
async function verifyUrl(basePath, url) {
url = url.replace(/#.*$/, '');
url = url.replace(
/https:\/\/github.com\/spotify\/backstage\/(tree|blob)\/master/,
'',
);
if (!url) {
return;
}
// Only verify existence of local files for now, so skip anything with a schema
if (!url.match(/[a-z]+:/)) {
const path = url.startsWith('/')
? resolvePath(projectRoot, `.${url}`)
: resolvePath(dirname(resolvePath(projectRoot, basePath)), url);
const exists = await fs.pathExists(path);
if (!exists) {
return { url, basePath };
}
}
return;
}
async function verifyFile(filePath) {
const content = await fs.readFile(filePath, 'utf8');
const mdLinks = content.match(/\[.+?\]\(.+?\)/g) || [];
const badUrls = [];
for (const mdLink of mdLinks) {
const url = mdLink.match(/\[.+\]\((.+)\)/)[1].trim();
const badUrl = await verifyUrl(filePath, url);
if (badUrl) {
badUrls.push(badUrl);
}
}
return badUrls;
}
async function main() {
process.chdir(projectRoot);
const files = await recursive('.', ['node_modules', 'dist', 'bin']);
const mdFiles = files.filter(f => f.endsWith('.md'));
const badUrls = [];
for (const mdFile of mdFiles) {
const badFileUrls = await verifyFile(mdFile);
badUrls.push(...badFileUrls);
}
if (badUrls.length) {
console.log(`Found ${badUrls.length} bad links within repo`);
for (const { url, basePath } of badUrls) {
console.error(`Unable to reach ${url}, linked from ${basePath}`);
}
process.exit(1);
}
}
main().catch(error => {
console.error(error.stack);
process.exit(1);
});
microsite/README copy.md
+182
View File
@@ -0,0 +1,182 @@
This website was created with [Docusaurus](https://docusaurus.io/).
# What's In This Document
- [Get Started in 5 Minutes](#get-started-in-5-minutes)
- [Directory Structure](#directory-structure)
- [Editing Content](#editing-content)
- [Adding Content](#adding-content)
- [Full Documentation](#full-documentation)
## Directory Structure
Your project file structure should look something like this
```
my-docusaurus/
docs/
doc-1.md
doc-2.md
doc-3.md
website/
blog/
2016-3-11-oldest-post.md
2017-10-24-newest-post.md
core/
node_modules/
pages/
static/
css/
img/
package.json
sidebars.json
siteConfig.js
```
# Editing Content
## Editing an existing docs page
Edit docs by navigating to `docs/` and editing the corresponding document:
`docs/doc-to-be-edited.md`
```markdown
---
id: page-needs-edit
title: This Doc Needs To Be Edited
---
Edit me...
```
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
## Editing an existing blog post
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
`website/blog/post-to-be-edited.md`
```markdown
---
id: post-needs-edit
title: This Blog Post Needs To Be Edited
---
Edit me...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
# Adding Content
## Adding a new docs page to an existing sidebar
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
```md
---
id: newly-created-doc
title: This Doc Needs To Be Edited
---
My new content here..
```
1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
```javascript
// Add newly-created-doc to the Getting Started category of docs
{
"docs": {
"Getting Started": [
"quick-start",
"newly-created-doc" // new doc here
],
...
},
...
}
```
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
## Adding a new blog post
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
```
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
`website/blog/2018-05-21-New-Blog-Post.md`
```markdown
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: New Blog Post
---
Lorem Ipsum...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
## Adding items to your site's top navigation bar
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
/* you can add docs */
{ doc: 'my-examples', label: 'Examples' },
/* you can add custom pages */
{ page: 'help', label: 'Help' },
/* you can add external links */
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
...
],
...
}
```
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
## Adding custom pages
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
...
],
...
}
```
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
# Full Documentation
Full documentation can be found on the [website](https://docusaurus.io/).
microsite/README.md
+182
View File
@@ -0,0 +1,182 @@
This website was created with [Docusaurus](https://docusaurus.io/).
# What's In This Document
- [Get Started in 5 Minutes](#get-started-in-5-minutes)
- [Directory Structure](#directory-structure)
- [Editing Content](#editing-content)
- [Adding Content](#adding-content)
- [Full Documentation](#full-documentation)
## Directory Structure
Your project file structure should look something like this
```
my-docusaurus/
docs/
doc-1.md
doc-2.md
doc-3.md
website/
blog/
2016-3-11-oldest-post.md
2017-10-24-newest-post.md
core/
node_modules/
pages/
static/
css/
img/
package.json
sidebars.json
siteConfig.js
```
# Editing Content
## Editing an existing docs page
Edit docs by navigating to `docs/` and editing the corresponding document:
`docs/doc-to-be-edited.md`
```markdown
---
id: page-needs-edit
title: This Doc Needs To Be Edited
---
Edit me...
```
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
## Editing an existing blog post
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
`website/blog/post-to-be-edited.md`
```markdown
---
id: post-needs-edit
title: This Blog Post Needs To Be Edited
---
Edit me...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
# Adding Content
## Adding a new docs page to an existing sidebar
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
```md
---
id: newly-created-doc
title: This Doc Needs To Be Edited
---
My new content here..
```
1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
```javascript
// Add newly-created-doc to the Getting Started category of docs
{
"docs": {
"Getting Started": [
"quick-start",
"newly-created-doc" // new doc here
],
...
},
...
}
```
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
## Adding a new blog post
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
```
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
`website/blog/2018-05-21-New-Blog-Post.md`
```markdown
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: New Blog Post
---
Lorem Ipsum...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
## Adding items to your site's top navigation bar
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
/* you can add docs */
{ doc: 'my-examples', label: 'Examples' },
/* you can add custom pages */
{ page: 'help', label: 'Help' },
/* you can add external links */
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
...
],
...
}
```
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
## Adding custom pages
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
...
],
...
}
```
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
# Full Documentation
Full documentation can be found on the [website](https://docusaurus.io/).
microsite/blog/2020-03-16-announcing-backstage.md
+44
View File
@@ -0,0 +1,44 @@
---
title: Announcing Backstage
author: Stefan Ålund
authorURL: http://twitter.com/stalund
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
---
## What is Backstage?
Backstage is Spotify's open source platform for building developer portals.
It’s the first open source infrastructure platform by Spotify that allows you to focus on building your application instead of reinventing the button. With an elegant and unified, yet opinionated UI/UX for all your tooling and infrastructure, Backstage enables engineers to get up and running faster, which ultimately makes their lives easier and more productive.
![img](assets/blog_1.png)
<!--truncate-->
## As simple as writing a plugin.
Backstage makes it easy to unify all of your infrastructure tooling, services, and documentation under a single, easy-to-use interface. So your engineers will always know where to find the right tool for the job. And engineers will already know how to use each tool — because everything uses the same, familiar UI.
The number of open source infrastructure projects and tools [landscape](https://landscape.cncf.io/) is exploding. As the sheer volume of projects increases, companies and their engineers find it increasingly difficult to keep track and adopt all of the tooling fast enough to keep pace. Most of the tools were built by a different individual, team, or company, which means that there is no single UI/UX, and simply getting the tool installed and started can be a painful challenge- let alone wrangling each tool to work with one another within your existing ecosystem. Due to varying qualities and the varying UI/UX of each open source project, we'd like to introduce Backstage as a best-of-breed platform for developers to use... all in service of ensuring a flawless, consistent user experience.
![illustration](assets/illustration.svg)
## The Spotify story
A best-in-class developer portal — from a music company? Since the very beginning, Spotify has been known for its agile, autonomous engineering culture. More than music, we’re a tech company that has always put engineers first, empowering our developers with the ability to innovate quickly and at scale. Backstage is the natural result of that focus.
Since adopting Backstage internally at Spotify, we’ve seen a 55% decrease in onboarding time for our engineers (as measured by time until 10th pull request). Over 280 engineering teams inside Spotify are using Backstage to manage 2,000+ backend services, 300+ websites, 4,000+ data pipelines, and 200+ mobile features.
## Project roadmap
We created Backstage about 4 years ago, and today, we’ve decided to share the goodness with the greater engineering community. While our version of Backstage has had the benefit of time to mature and evolve, the first iteration of our open source version is still nascent. I wanted to take a moment to share with you what our vision for Backstage OSS is so that 1. users and our community gain a better understanding of where we’re envisioning the product to go and more importantly, 2. you can provide input and feedback so that together, we can create a better infrastructure experience for developers everywhere.
We are envisioning three phases of the project and we have already begun work on various aspects of these phases:
- **Phase 1:** Extensible frontend platform (now) - You will be able to easily create a single consistent UI layer for your internal infrastructure and tools. A set of reusable UX patterns and components help ensure a consistent experience between tools.
- **Phase 2:** Manage your stuff (next 2-3 months) - Manage anything from microservices to software components to infrastructure and your service catalog. Regardless of whether you want to create a new library, view service deployment status in Kubernetes, or check the test coverage for a website -- Backstage will provide all of those tools - and many more - in a single developer portal.
- **Phase 3:** Ecosystem (later) - Everyone's infrastructure stack is different. By fostering a vibrant community of contributors we hope to provide an ecosystem of Open Source plugins/integrations that allows you to pick the tools that match your stack.
Our vision for Backstage is for it to become the trusted standard toolbox (read: UI layer) for the open source infrastructure landscape. Think of it like Kubernetes for developer experience. We realize this is an ambitious goal. We can’t do it alone. If this sounds interesting or you'd like to help us shape our product vision, we'd love to talk. You can email me directly: [alund@spotify.com](mailto:alund@spotify.com).
microsite/blog/2020-03-18-what-is-backstage.md
+88
View File
@@ -0,0 +1,88 @@
---
title: What the heck is Backstage anyway?
author: Stefan Ålund
authorURL: http://twitter.com/stalund
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
---
![img](assets/2/spotify-labs-header.png)
Two days ago, we released the open source version of [Backstage](https://backstage.io/), our homegrown developer portal. And we learned a thing or two via the feedback we received. So, I wanted to take this opportunity to further explain what we’re trying to do with Backstage — and more importantly, what we want to give to the greater engineering community beyond Spotify.
<!--truncate-->
## What’s the big infrastructure problem?
As companies grow, their infrastructure systems get messier. Consider a team that wants to deploy something to the cloud. While Spotify has many awesome engineers, not every engineer is well-versed in our chosen cloud-provider tooling. Yet everyone is required to know and understand Terraform, GCP/AWS/Azure CLIs, Gitlab CI, Prometheus, Kubernetes, Docker, various monitoring and alerting tools, and much, much more. Once other resources come into play (databases, queueing, etc.), each engineer requires even more tools and domain-specific knowledge (or “disciplines”), from backend to machine learning, to mobile and data.
## What’s the fix?
Backstage unifies all your infrastructure tooling, services, and documentation with a single, consistent UI. All of it! Imagine if all your tools — GCP, Bigtable, CI pipelines, TensorFlow Extended, and whatever else is hiding in your stack — all had the same, easy-to-use interface. That’s Backstage. One front end for all your infrastructure.
![img](assets/2/screen.gif)
Backstage gives developers a uniform overview of all their resources, regardless of how and where they are running, as well as an easy way to onboard and start using those tools. It also allows the creation of new resources, such as backend services running in Kubernetes, with a few clicks of a button — all without having to leave the same, familiar interface of Backstage.
## Why did we build it?
To some observers, it may seem odd that a music company is launching a best-in-class developer portal. But if you [dig deeper](https://backstage.io/background), you’ll find that since the very beginning, Spotify has been known for its agile, autonomous engineering culture. More than music, we’re a tech company that has always put engineers first, empowering our developers with the ability to innovate quickly and at scale. Backstage is the natural result of that focus.
## What are examples of how Backstage is used at Spotify?
Our internal installation of Backstage has over 100 different integrations — we call them “plugins”. Since the open-source version currently does not have any end-to-end use cases, it can be challenging to understand what problems Backstage can solve for you. To make things more tangible, let’s have a look at four of the common use-cases:
1. Creating a new microservice
2. Following a pull request from review to production
3. Centralised technical documentation
4. Review performance of your team’s mobile features
These are just a few examples. Expect us to continue providing examples of how Backstage is used inside Spotify while we build out more end-2-end use-cases in the open.
### 1. Creating a new microservice
Creating any new software component at Spotify, such as a new microservice, is done with a few clicks in Backstage. Developers choose between a number of standard templates — all with best-practices built in.
![img](assets/2/1.png)
After inputting some metadata about your service, a new repository is created with a “hello world” service that automatically builds and deploys in production on Kubernetes ([GKE](https://cloud.google.com/kubernetes-engine)). Ownership information is automatically captured in our service/software catalog and users can see a list of all the services they own.
![img](assets/2/2.png)
### 2. Following a pull request from review to production
As soon as you submit a pull request to Spotify’s GitHub Enterprise, our CI system automatically posts a link to the CI/CD view in Backstage. The view provides you with all the information you need: build progress, test coverage changes, a re-trigger button, etc., so that you don’t have to look for this information across different systems.
![img](assets/2/3.png)
Our homegrown CI system uses Jenkins under the hood, but Spotify engineers don’t need to know that. They interact directly with GitHub Enterprise and Backstage.
### 3. Centralised technical documentation
Spotify uses a [docs-like-code](https://www.youtube.com/watch?v=uFGCaZmA6d4) approach. Engineers write technical documentation in Markdown files that live together with the code. During CI, a beautiful-looking documentation site is created using [MkDocs](https://www.mkdocs.org/), and all sites are rendered centrally in a Backstage plugin.
![img](assets/2/4.png)
On top of the static documentation we also incorporate additional metadata about the documentation site — such as owner, open issue and related Stack Overflow tags.
### 4. Review performance of your team’s mobile features
Our mobile apps are developed by many different teams. The codebase is divided up into different features, each owned and maintained by a separate team. If an app developer on one team wants to understand how their feature is affecting overall app performance, there’s a plugin for that:
![img](assets/2/5.png)
_Figures above for illustrative purposes only._
Developers can also look at crashes, releases, test coverage over time and many more tools in the same location.
## Why did we make Backstage open source?
When discussing infrastructure challenges with peer companies, it’s clear that we are not alone in struggling with fragmentation across our developer ecosystem. As companies adopt more open-source tooling, and build more infrastructure internally, the complexity grows. It gets harder for individual engineers to find and use all these distinct tools.
Similar to how Backstage ties together all of Spotify’s infrastructure, our ambition is to make the open-source version of Backstage the standard UX layer across the broader infrastructure landscape. We decided to release Backstage early so we could collaborate more closely with companies that have a similar problem — and that want to provide a better developer experience to their teams.
## What’s next?
We are envisioning [three phases](https://github.com/spotify/backstage/milestones) of the project (so far), and we have already begun work on various aspects of these phases. The best way to track the work and see where you can jump in and help out is:
https://github.com/spotify/backstage/milestones
Want to discuss the project or need support? Join us on [Discord](https://discord.gg/MUpMjP2) or reach out on [alund@spotify.com](mailto:alund@spotify.com).
microsite/blog/2020-04-06-lighthouse-plugin.md
+40
View File
@@ -0,0 +1,40 @@
---
title: Introducing Lighthouse for Backstage
author: Paul Marbach
authorURL: http://twitter.com/fastfrwrd
authorImageURL: https://pbs.twimg.com/profile_images/1224058798958088192/JPxS8uzR_400x400.jpg
---
![image illustrating the Lighthouse plugin for Backstage](assets/3/lead.png)
We’re proud to announce that our first internal plugin at Spotify has been open-sourced as part of Backstage. This plugin works with the newly open-sourced [lighthouse-audit-service](https://github.com/spotify/lighthouse-audit-service) to run and track Lighthouse audits for your websites.
<!--truncate-->
## What is Lighthouse?
Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites is a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.
At Spotify, we keep track of Lighthouse audit scores over time to look at trends and areas for investment. We particularly look to Lighthouse to give us [accessibility recommendations](https://developers.google.com/web/tools/lighthouse/v3/scoring#a11y); in the next few months, we plan to roll out Lighthouse accessibility category scores as a benchmark metric for all websites at Spotify.
## Lighthouse, tracked over time
What makes the plugin unique is that we can track a website's audit performance over time using the main metrics that Lighthouse outputs, rather than simply running reports. The sparklines show, at a glance, how all of your websites are holding up over recent builds.
![image of the audit list in the Lighthouse plugin](assets/3/audit-list.png)
Lighthouse reports can be viewed directly in Backstage, with the ability to travel back and forth through your audit history, so you can quickly diagnose which release caused a performance or SEO regression.
![image of the audit view in the Lighthouse plugin](assets/3/audit-view.png)
Trigger an audit directly from Backstage, or trigger audits programmatically with your new lighthouse-audit-service instance. Schedule them after builds as a sort of smoke test, or trigger them on a schedule (as we do at Spotify) to get a daily snapshot of your website.
![image of the create audit form in the Lighthouse plugin](assets/3/create-audit.png)
## Using Lighthouse in Backstage
To learn how you can enable Lighthouse auditing within Backstage, head over to the [README](https://github.com/spotify/backstage/tree/master/plugins/lighthouse) for the plugin to get started.
## A personal note
I want to thank the folks on the Backstage team for approaching me to open-source this plugin. I have found working on Backstage to be a really rewarding and fun time, and I'm so glad that the core team members have put in the effort to make Backstage something that anyone in the industry can use. I can't wait to play with all the plugins the community is going to create. I am hopeful that this plugin can help illustrate just a sliver of what we use Backstage for at Spotify.
microsite/blog/2020-04-30-how-to-quickly-set-up-backstage.md
+135
View File
@@ -0,0 +1,135 @@
---
title: How to quickly set up Backstage
author: Marcus Eide
authorURL: https://github.com/marcuseide
authorImageURL: https://secure.gravatar.com/avatar/20223f1e03673c7c1e6282fbebaf6942
---
We wanted to make getting started with Backstage as easy as possible. Even though Backstage is still in the early phases of its development, we believe it is important for our users to get a feel for what Backstage really is.
We want users to be able to create their own version of Backstage quickly and easily, so that they can take advantage of all the infrastructure that we’ve built into it — and start exploring.
In this blog post we’ll look at what a Backstage app is and how to create one using our [CLI](https://www.npmjs.com/package/@backstage/cli).
<!--truncate-->
## What is a Backstage app?
![](assets/4/welcome.png)
A Backstage app is a modern monorepo web project that is built using Backstage packages. It includes all the configuration and architecture you need to run Backstage so that you don’t have to worry about setting everything up by yourself.
More specifically, a Backstage app includes the core packages and APIs that provide base functionality to the app. The actual UX is provided by plugins. As an example, when you first load the `/` page of the app, the content is provided by the `welcome` plugin.
Plugins are the essential building blocks of Backstage and extend the platform by providing additional features and functionality. Read more about [Backstage plugins](https://github.com/spotify/backstage/tree/master/docs/getting-started) on GitHub.
## A personalized platform
When you create a Backstage _app_, you are creating your own installation of Backstage, an application that is built on top of the Backstage _platform_.
You get to take full advantage of a platform that we at Spotify have been using internally for years. But you also get to make it your own — starting with its name. You can rename the Backstage app anything you want, so that you can call it something that best fits your organization. Be creative!
## How do I create an app?
Just run the backstage-cli:
```bash
npx @backstage/cli create-app
```
Name your app, and we will create everything you need:
![](assets/4/create-app.png)
The only thing you need to do is to start the app:
```bash
cd my-app
yarn start
```
And you are good to go! 👍
Read the full documentation on how to [create an app](https://github.com/spotify/backstage/blob/master/docs/create-an-app.md) on GitHub.
## What do I get? (Let's get technical...)
We’ve been using Backstage internally for years, and we’ve spent a lot of time adding to and tweaking the infrastructure so that it fits our needs. After all that testing and trial and error, we think it will fit your needs, too!
### 1. Lerna setup to manage multi-packages
The monorepo and its packages are managed by [Lerna](https://lerna.js.org/). It lets you work with individual packages in a controlled way.
### 2. Fast builds
Behind the scenes we use [Rollup](https://rollupjs.org/) to build the modules.
Each package is built individually. With the `--watch` flag you will be able to detect changes per package and therefore speed up the local development process.
To further speed things up, we have also included our own caching system to avoid rebuilding unchanged packages.
Our hope is that there will be thousands of Backstage plugins in the future, so we need a fast and stable build process.
### 3. Full TypeScript support
Most of the codebase is written in [TypeScript](https://www.typescriptlang.org/), and we aim for all of the core packages to be in TypeScript in the future.
All the knobs and handles needed for a stable and functioning TypeScript project are included.
Take a look at `@backstage/cli/config/tsconfig.json` for more details.
### 4. Tests and coverage out of the box
We include testing, linting, and end-to-end tests for your convenience.
```bash
yarn lint:all
yarn test:all
yarn test:e2e
```
## Extend the app with plugins
At Spotify, the main factor behind Backstage’s success has been our large and diverse collection of plugins — the result of contributions from various teams over the years. Internally, we have more than a hundred different plugins.
There are two ways to add plugins to your Backstage app: use a publicly available plugin or create your own.
### Using a public plugin
We provide a collection of public Backstage plugins (look for packages with the `plugin-` prefix under the `@backstage` namespace on [npm](https://www.npmjs.com/) that you can start using immediately.
Install in your app’s package folder (`<root>/packages/app`) with:
```bash
yarn add @backstage/plugin-<plugin-name>
```
Then add it to your app's `plugin.ts` file to import and register it:
`<root>/packages/app/src/plugin.ts`:
```js
export { plugin as PluginName } from '@backstage/plugin-<plugin-name>';
```
A plugin registers its own `route` in the app — read the documentation for the specific plugin you are installing for more information on that.
### Creating an internal plugin
We also know that each organization has different needs and will create their own plugins for internal purposes. To create an internal plugin, you can use our CLI again.
In the root of your app directory (`<root>`) run:
```bash
yarn create-plugin
```
This command will create a new plugin in `<root>/plugins/` and register it to your app automatically.
### Sharing is caring 🤗
If you are developing a plugin that might be useful for others, consider releasing it publicly. A large, diverse ecosystem of Backstage plugins benefits the whole community
## Ready to get started?
Head over to GitHub and check out the [project](https://github.com/spotify/backstage) or download our [CLI](https://www.npmjs.com/package/@backstage/cli). If you have more questions, join us on [Discord](https://discord.gg/MUpMjP2) or [create an issue](https://github.com/spotify/backstage/issues/new/choose).
microsite/blog/2020-05-14-tech-radar-plugin.md
+44
View File
@@ -0,0 +1,44 @@
---
title: Introducing Tech Radar for Backstage
author: Bilawal Hameed
authorURL: http://twitter.com/bilawalhameed
authorImageURL: https://avatars0.githubusercontent.com/bih
---
![image illustrating the Tech Radar plugin for Backstage](assets/5/lead.png)
Just a few weeks ago, we released our internal plugin for [Lighthouse website audits] as our first open source plugin, so the whole community could use it. Today, we’re excited to add a new plugin to that list — say hello to the [Tech Radar plugin]!
<!--truncate-->
## What is Tech Radar?
The Technology Radar is a concept created by [ThoughtWorks] which allows you to visualize the official guidelines of software languages, processes, infrastructure, and platforms at that particular company. The particular visualization above was created by [Zalando].
At Spotify, our central committee of technical architects own the Tech Radar with the input of engineers across the company. Anyone can and is encouraged to give recommendations. We segment entries in our Tech Radar by languages, frameworks, processes, and infrastructure, although you should pick whatever works best for your organization. Each entry in the Tech Radar can have one of the following lifecycle values: Use, Trial, Assess, and Hold.
We also assign clear definitions for each lifecycle:
- **Use:** This technology is recommended for use by the majority of teams with a specific use case.
- **Trial:** This technology has been evaluated for specific use cases and has showed clear benefits. Some teams adopt it in production, although it should be limited to low-impact projects as it might incur a higher risk.
- **Assess:** This technology has the potential to be beneficial for the company. Some teams are evaluating it and using it in experimental projects. Using it in production comes with a high cost and risk due to lack of in-house knowledge, maintenance, and support.
- **Hold:** We don’t want to further invest in this technology or we evaluated it and we don’t see it as beneficial for the company. Teams should not use it in new projects and should plan on migrating to a supported alternative if they use it for historical reasons. For broadly adopted technologies, the Radar should refer to a migration path to a supported alternative.
Since rolling out the Tech Radar, it has become the source of truth when creating, maintaining, or evolving our software ecosystem. Spotify has dozens of entries in our Radar and it can scale quite well whilst being easy for our engineers and engineering managers to consume.
## Using the Tech Radar in Backstage
To learn about how you can bring the Tech Radar to your Backstage installation, check out [the plugin README on GitHub][tech radar plugin].
## A personal note
I want to thank both the Backstage team and Spotify. Firstly, I’ve been working with our internal version of Backstage for over a year, and the developer experience since open sourcing has been even more of a joy to work with. Secondly, the 10% hack time that Spotify generously provides to all engineers enabled me to open source the Tech Radar plugin.
Since open sourcing it, the community has shown great interest in yet another powerful use case of Backstage. There was also an enthusiastic open source contributor who volunteered to migrate the plugin to TypeScript and React Hooks [in just 29 minutes](https://github.com/spotify/backstage/issues/661) of opening the issue!
I can’t wait to see how others benefit from the Tech Radar in their organizations!
[lighthouse website audits]: https://backstage.io/blog/2020/04/06/lighthouse-plugin
[tech radar plugin]: https://github.com/spotify/backstage/tree/master/plugins/tech-radar
[thoughtworks]: https://www.thoughtworks.com/radar
[zalando]: https://opensource.zalando.com/tech-radar/
microsite/blog/2020-05-14-weaveworks-covid-19-app-uses-backstage-ui.md
+33
View File
@@ -0,0 +1,33 @@
---
title: Weaveworks’ COVID-19 app uses Backstage UI
author: Jeff Feng
authorURL: https://github.com/fengypants
authorImageURL: https://avatars2.githubusercontent.com/u/46946747
---
![fk-covid-screenshot](assets/20-05-14/weaveworks-firekube-covid-19-spotify-backstage.png)
One of the great things about the open source community is once you put your work out there, you really never know where it might end up. That’s certainly the case here.
<!--truncate-->
When Weaveworks decided to build an X-ray diagnostics app to help fight COVID-19, they pulled together a lot of different open source resources — from projects big and small, built by both familiar tech partners and some brand new ones, too.
At the heart of their app — called [fk-covid][] — there’s a TensorFlow-based deep neural network that was developed by researchers on the DarwinAI team and others in the COVID R&D community. To package that network up for doctors and software developers to use, the app combines open source tools from Google, AWS, Azure, MinIO, the CNCF, and Weaveworks’ own Firekube bundle for Kubernetes.
And the user interface for all of this? Weaveworks built a custom plugin using the Backstage framework.
“We chose Backstage as a modern UI toolkit that we knew would work with Kubernetes apps,” said Alexis Richardson, CEO of Weaveworks. “We were also experimenting with Backstage for microservices and ML, so it was natural to try it here.”
Chanwit Kaewkasi, Weaveworks’ DX Engineer and a tech lead on the project, said, “Backstage offers very advanced plugin architecture which allows us to only focus on the plugin we're developing. Other things are taken care of by the framework.”
In other words, here’s Backstage doing what Backstage does best: unifying a bunch of technologies with a cohesive frontend, so that the whole thing is easier to build and easier to use.
Joining the fight against a global pandemic was not something the Backstage team at Spotify ever envisioned when we released our homegrown developer portal to the world back in March. But it’s a testament to the ingenuity (and serendipity) of the open source community that Backstage could be enlisted for such an unexpected use case.
We’re proud to see Backstage adopted as the UX layer for this meaningful cause. And we can’t wait to see what the open source community will build next.
To learn more about what fk-covid does, and how it works, jump on over to [the Weaveworks blog][] to hear it straight from the team that built it. It’s a great example of the possibilities that come from being a part of the open source community.
[fk-covid]: https://github.com/weaveworks/fk-covid
[the weaveworks blog]: https://www.weave.works/blog/firekube-covid-ml
microsite/blog/2020-05-22-phase-2-service-catalog.md
+54
View File
@@ -0,0 +1,54 @@
---
title: Starting Phase 2: The Service Catalog
author: Stefan Ålund
authorURL: http://twitter.com/stalund
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
---
**TL;DR** Thanks to the help from the Backstage community, we’ve made excellent progress and are now moving into Phase 2 of Backstage — building out a Service Catalog and the surrounding systems that will help unify the tools you use to manage your software.
We released the open source version of Backstage a little less than two months ago, and have been thrilled to see so many people jumping in and contributing to the project in its early stages. We’re excited to see what the community can build together as we progress through [each phase of Backstage](https://github.com/spotify/backstage#project-roadmap).
![img](assets/20-05-20/Service_Catalog_MVP.png)
<!--truncate-->
## Progress so far
Phase 1 was all about building an extensible frontend platform, enabling teams to start creating a single, consistent UI layer for your internal infrastructure and tools in the form of [plugins](https://github.com/spotify/backstage/labels/plugin). In fact, thanks to our amazing (30+) [contributors](https://github.com/spotify/backstage/graphs/contributors), we were able to complete most of Phase 1 earlier than expected. 🎉
Today, we are happy to announce that we are shifting our focus to Phase 2!
## So what is Phase 2?
> _The core of building Platforms rests in versatile entity management. Entities represent the nouns or the "truths" of our world._
Quote from [Platform Nuts & Bolts: Extendable Data Models](https://www.kislayverma.com/post/platform-nuts-bolts-extendable-data-models)
Entities, or what we refer to as “components” in Backstage, represent all software, including services, websites, libraries, data pipelines, and so forth. The focus of Phase 2 will be on adding an entity model in Backstage that makes it easy for engineers to create and manage the software components they own.
With the ability to create a plethora of components in Backstage, how does one keep track of all the software in the ecosystem? Therein lies the highlight feature of Phase 2: the [Service Catalog](https://github.com/spotify/backstage/milestone/4). The service catalog — or software catalog — is a centralized system that keeps track of ownership and metadata about all software in your ecosystem. The catalog is built around the concept of [metadata yaml files](https://github.com/spotify/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md) stored together with the code, which are then harvested and visualized in Backstage.
![img](assets/20-05-20/Service_Catalog_MVP.png)
![img](assets/20-05-20/Service_Catalog_MVP_service.png)
With a single catalog, Backstage makes it easy for a team to manage ten services — and makes it possible for your company to manage thousands of them. Because the system is practically self-organizing, it requires hardly any oversight from a governing or centralized team. Developers can get a uniform overview of all their software and related resources (such as server utilisation, data pipelines, pull request status), regardless of how and where they are running, as well as an easy way to onboard and manage those resources.
On top of that, we have found that the service catalog is a great way to organise the infrastructure tools you use to manage the software as well. This is how Backstage creates one developer portal for all your tools. Rather than asking teams to jump between different infrastructure UI’s (and incurring additional cognitive overhead each time they make a context switch), most of these tools can be organised around the entities in the catalog:
![img](assets/20-05-20/tabs.png)
More concretely, having this structure in place will allow plugins such as [CircleCI](https://github.com/spotify/backstage/tree/master/plugins/circleci) to show only the builds for the specific service you are viewing, or a [Spinnaker](https://github.com/spotify/backstage/issues/631) plugin to show running deployments, or an Open API plugin to [show documentation](https://github.com/spotify/backstage/issues/627) for endpoints exposed by the service, or the [Lighthouse](https://github.com/spotify/backstage/tree/master/plugins/lighthouse) plugin to show audit reports for your website. You get the point.
## Timeline
Our estimated timeline has us delivering these pieces in increments leading up to June 22. But with the support of the community we wouldn’t be surprised if things land earlier than that. 🙏
If you are interested in joining us, check out our [Milestones](https://github.com/spotify/backstage/milestones) and connected Issues.
## Long-term vision
Our vision for Backstage is for it to become the trusted, standard toolbox (read: UX layer) for the open source infrastructure landscape. Imagine a future where regardless of what infrastructure you use inside your company, there is an open source plugin available that you can pick up and add to your deployment of Backstage.
Spotify will continue to release more of our [internal](https://backstage.io/blog/2020/04/06/lighthouse-plugin) [plugins](https://backstage.io/blog/2020/05/14/tech-radar-plugin), but participation from developers and companies can help us build a healthy community. We are excited to see how Backstage has helped many of you, and look forward to seeing all the new plugins you and your teams will build!
microsite/blog/2020-06-22-backstage-service-catalog-alpha.md
+54
View File
@@ -0,0 +1,54 @@
---
title: Backstage Service Catalog released in alpha
author: Stefan Ålund
authorURL: http://twitter.com/stalund
image: https://backstage.io/blog/assets/6/header.png
---
**TL;DR** Today we are announcing the availability of the Backstage Service Catalog in alpha. This has been the community’s most requested feature. Even if the catalog is not ready for production yet, we think this release already demonstrates how Backstage can provide value for your company right out of the box. With your early input and feedback, we hope to create a stronger generally available product.
![img](assets/6/header.png)
<!--truncate-->
## You asked, we listened
When we [released](https://backstage.io/blog/2020/03/16/announcing-backstage) Backstage as an open source project back in March, it didn’t have all of the features that our internal version of Backstage has today. One of the main reasons we pushed to release it, despite it being in such a nascent stage, was so that we could start building the next phase of Backstage around the community’s needs. We’ve had hours of conversations with so many of you — thank you to everyone who has jumped on a video call, attended one of our working sessions, or watched our [demo videos](https://backstage.io/demos) and provided feedback via [Discord](https://discord.com/invite/MUpMjP2).
Today, we wanted to share what we’ve learned from talking with many of you at companies that have shown interest in adopting Backstage. Here it is in short:
- The problem of scaling autonomous engineering organisations without creating too much complexity is not a unique problem to Spotify.
- The "extensible frontend platform" that we focused on in the first phase of the project is not the only thing you are looking for.
With these insights we decided to re-focus our efforts towards the most requested feature: the Backstage Service Catalog.
## What is the service catalog?
The Backstage Service Catalog — actually, a software catalog, since it includes more than just services — is a centralized system that keeps track of ownership and metadata for all the software in your ecosystem (services, websites, libraries, data pipelines, etc). The catalog is built around the concept of [metadata yaml files](https://github.com/spotify/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md#format) stored together with the code, which are then harvested and visualized in Backstage.
This was our pitch for the virtues of a service catalog when we first [announced](https://backstage.io/blog/2020/05/22/phase-2-service-catalog) it as part of Phase 2:
> With a single catalog, Backstage makes it easy for a team to manage ten services — and makes it possible for your company to manage thousands of them. Because the system is practically self-organizing, it requires hardly any oversight from a governing or centralized team. Developers can get a uniform overview of all their software and related resources (such as server utilisation, data pipelines, pull request status), regardless of how and where they are running, as well as an easy way to onboard and manage those resources.
> On top of that, we have found that the service catalog is a great way to organise the infrastructure tools you use to manage the software as well. This is how Backstage creates one developer portal for all your tools. Rather than asking teams to jump between different infrastructure UI’s (and incurring additional cognitive overhead each time they make a context switch), most of these tools can be organised around the entities in the catalog:
![img](assets/20-05-20/tabs.png)
You’ll be able to see many of these virtues in action with this alpha release — though, with some caveats, of course, since it is, after all, an alpha.
## What does alpha mean?
Alpha is our shorthand for "we don’t yet think Backstage is ready for production, but we’d love for you to test it and provide us with feedback". However, you should be able to try out the functionality of the service catalog:
1. Register software components ([examples](https://github.com/spotify/backstage/tree/master/packages/catalog-model/examples))
2. See all components represented in the catalog
3. Search across all components
4. Get an overview of the metadata of the components
5. Click through and get more information about a specific component (service, website, etc)
6. See example tooling (plugins) that helps you manage the component
As with most alpha releases, you should expect things to change quite a lot until we reach the beta stage (we’re targeting the end of summer). There are obviously many things missing as well, but we wanted to start collecting feedback early and make it easier to see the end-to-end flow.
If you have feedback or questions, please open a [GitHub issue](https://github.com/spotify/backstage/issues), ping us on [Discord chat](https://discord.gg/EBHEGzX) or send me an email at [alund@spotify.com](mailto:alund@spotify.com) 🙏
To get regular product updates and news about the Backstage community, sign up for the [Backstage newsletter](https://mailchi.mp/spotify/backstage-community).
microsite/blog/2020-07-01-how-to-enable-authentication-in-backstage-using-passport.md
+46
View File
@@ -0,0 +1,46 @@
---
title: How to enable authentication in Backstage using Passport
author: Lee Mills
authorURL: https://github.com/leemills83
authorImageURL: https://avatars1.githubusercontent.com/u/1236238?s=460&v=4
---
![auth-landing-page](assets/20-07-01/auth-landing.png)
Getting authentication right is important. It helps keep your platform safe, it’s one of the first things users will interact with, and there are many different authentication providers to support. To this end, we chose to use [Passport](http://www.passportjs.org/) to provide an easy-to-use, out-of-the-box experience that can be extended to your own, pre-existing authentication providers (known as strategies). The Auth APIs in Backstage serve two purposes: identify the user and provide a way for plugins to request access to third-party services on behalf of the user. We’ve already implemented Google and GitHub authentication to provide examples and to get you started.
<!--truncate-->
## What is Passport?
[Passport](http://www.passportjs.org/) is Express-compatible authentication middleware for Node.js that provides access to over 500 authentication providers, covering everything from Google, Facebook, and Twitter to generic OAuth, SAML, and local. Check out all of the currently available [strategies listed on the Passport site](http://www.passportjs.org/).
Passport has allowed us to leverage an existing open-source authentication framework that will, in turn, give users the freedom to add and extend alternative authentication strategies to their instance of Backstage.
## Using authentication in Backstage
![auth-landing-page](assets/20-07-01/auth-sidebar.png)
First, check out the provided Google and GitHub implementations! [Spin up a local copy of Backstage](https://backstage.io/blog/2020/04/30/how-to-quickly-set-up-backstage) along with our example-backend. You can find more documentation on setting up the example backend [here](https://github.com/spotify/backstage/tree/master/packages/backend), but be sure to include the relevant client IDs and secrets when running `yarn start`:
```
AUTH_GOOGLE_CLIENT_ID=x AUTH_GOOGLE_CLIENT_SECRET=x AUTH_GITHUB_CLIENT_ID=x AUTH_GITHUB_CLIENT_SECRET=x SENTRY_TOKEN=x LOG_LEVEL=debug yarn start
```
You can find the implementation for these strategies along with a lightweight proof-of-concept implementation for SAML authentication at `<root>/plugins/auth-backend/src/providers`.
## Ready to get started by adding your chosen provider and implementation?
Getting started is really straightforward, and can be broadly broken down into five steps:
1. Install the [Passport-based provider package that best suits your needs](http://www.passportjs.org/).
2. Add a new provider to `plugins/auth-backend/src/providers/`
3. Implement the provider, extending the suitable framework, if needed.
4. Add the provider to the backend.
5. Add a frontend Auth Utility API.
For full details, take a look at our [“Adding authentication providers” documentation](https://github.com/spotify/backstage/blob/master/docs/auth/add-auth-provider.md) and at the [excellent documentation](http://www.passportjs.org/docs/) provided by Passport.
## Interested in contributing to the next steps for authentication?
We’ve already seen both GitLab and Okta contributions from the community — and we’re thinking about a few more providers we’d like to add to Backstage, too. You can find those, and other authentication-related issues, in our repository by filtering with the [auth label](https://github.com/spotify/backstage/issues?q=is%3Aissue+is%3Aopen+label%3Aauth).
microsite/blog/2020-08-05-announcing-backstage-software-templates.md
+78
View File
@@ -0,0 +1,78 @@
---
title: Announcing Backstage Software Templates
author: Stefan Ålund
authorURL: https://twitter.com/stalund
---
**TL;DR** Today we are announcing a new Backstage feature: Software Templates. Simplify setup, standardize tooling, and deploy with the click of a button. Using automated templates, your engineers can spin up a new microservice, website, or other software component with your organization’s best practices built-in, right from the start.
<video width="100%" height="100%" controls>
<source src="/blog/assets/2020-08-05/feature.mp4" type="video/mp4">
</video>
<!--truncate-->
## Balancing autonomy and standardization
At Spotify, we’ve always believed in the speed and ingenuity that comes from having autonomous development teams. But as we learned firsthand, the faster you grow, the more fragmented and complex your software ecosystem becomes. And then everything slows down again.
By centralizing services and standardizing your tooling, Backstage streamlines your development environment from end to end. Instead of restricting autonomy, standardization frees your engineers from infrastructure complexity. So you can return to building and scaling, quickly and safely.
Today we are releasing one of the key features that helps balance autonomy and standardization: templates for creating software.
## Backstage Software Templates: Push-button deployment
Backstage Software Templates automate and standardize the process of creating software components. To show you how they work, we created four sample templates to get you started — just configure them to fit your tooling and off you go:
- **Create React App Template** — create a new CRA website project
- **Golang Microservice** — create a Golang repo with this template built by members of the Go community
- **React SSR Template** — create a website powered with Next.js
- **Spring Boot GRPC** — create a simple microservice using gRPC and Spring Boot Java
### The getting started guide gets automated
Since the templates can be customized to integrate with your existing infrastructure, it’s easy to start a new project without ever having to leave Backstage. Let’s say you’re building a microservice. With three clicks in Backstage, you’ll have a new Spring Boot project with your repo automatically configured on GitHub and your CI already running the first build.
### Golden Paths pave the way
You can customize Backstage Software Templates to fit your organization’s standards. Using Go instead of Java? CircleCI instead of Jenkins? Serverless instead of Kubernetes? GCP instead of AWS? [Make your own recipes for any software component](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/adding-templates.md) and your best practices will be baked right in.
## Getting started
The sample Software Templates are available under `/create`. If you're setting up Backstage for the first time, follow [Getting Started with Backstage](https://github.com/spotify/backstage/blob/master/docs/getting-started/index.md) and go to `http://localhost:3000/create`. If you’ve already been running Backstage locally, run the command `yarn lerna run mock-data` to load the new sample templates into the Service Catalog first.
![available-templates](assets/2020-08-05/templates.png)
### Step 1: Choose a template
When you select a template that you want to create, you can ask for different input variables. These are then passed to the templater internally.
![template-form](assets/2020-08-05/template-form.png)
After filling in these variables, additional fields will appear so Backstage can be used. You’ll specify the owner, which is a `user` in the Backstage system, and the `Location`, which must be a GitHub organization and a non-existing GitHub repository name, formatted as `organization/reponame`.
### Step 2: Run!
Once you've entered values and confirmed, you'll then get a modal with live progress of what is currently happening with the creation of your template.
![create-component](assets/2020-08-05/create-component.png)
It shouldn't take too long before you see a success screen. At this point, a piece of “Hello World” software has been created in your repo, and the CI automatically picks it up and starts building the code.
Your engineers don’t have to bother with setting up underlying infrastructure, it’s all built into the template. They can start focusing on delivering business value.
### View new components in the Service Catalog
New components, of course, get added automatically to the Backstage Service Catalog. After creation, you'll see the `View in Catalog` button, which will take you to the registered component in the catalog:
![service-catalog](assets/2020-08-05/catalog.png)
## Define your standards
Backstage ships with four example templates, but since these are likely not the (only) ones you want to promote inside your company, the next step is to add [your own templates](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/adding-templates.md). Using Backstage’s Software Templates feature, it’s easy to help your engineers get started building software with your organization’s best practices built-in.
We have learned that one of the keys to getting these standards adopted is to keep an open process. Templates are code. By making it clear to your engineers that you are open to pull requests, and that teams with different needs can add their own templates, you are on the path of striking a good balance between autonomy and standardization.
If you have feedback or questions, please open a [GitHub issue](https://github.com/spotify/backstage/issues), ping us on [Discord chat](https://discord.gg/EBHEGzX) or send me an email at [alund@spotify.com](mailto:alund@spotify.com) 🙏
To get regular product updates and news about the Backstage community, sign up for the [Backstage newsletter](https://mailchi.mp/spotify/backstage-community).
microsite/blog/assets/2/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

microsite/blog/assets/2/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

microsite/blog/assets/2/3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

microsite/blog/assets/2/4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

microsite/blog/assets/2/5.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

microsite/blog/assets/2/screen.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

microsite/blog/assets/2/spotify-labs-header.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

microsite/blog/assets/20-05-14/weaveworks-firekube-covid-19-spotify-backstage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

microsite/blog/assets/20-05-20/Service_Catalog_MVP.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

microsite/blog/assets/20-05-20/Service_Catalog_MVP_service.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

microsite/blog/assets/20-05-20/tabs.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

microsite/blog/assets/20-07-01/auth-landing.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

microsite/blog/assets/20-07-01/auth-sidebar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

microsite/blog/assets/2020-08-05/cards.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

microsite/blog/assets/2020-08-05/catalog.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

microsite/blog/assets/2020-08-05/create-component.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

microsite/blog/assets/2020-08-05/feature.mp4
BIN
View File
Binary file not shown.
microsite/blog/assets/2020-08-05/template-form.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

microsite/blog/assets/2020-08-05/templates.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 476 KiB

microsite/blog/assets/3/audit-list.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 KiB

microsite/blog/assets/3/audit-view.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 609 KiB

microsite/blog/assets/3/create-audit.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 KiB

microsite/blog/assets/3/lead-copy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 503 KiB

microsite/blog/assets/3/lead.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

microsite/blog/assets/4/create-app.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 303 KiB

microsite/blog/assets/4/welcome.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 KiB

microsite/blog/assets/5/lead.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

microsite/blog/assets/6/header.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

microsite/blog/assets/blog_1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

microsite/blog/assets/illustration.svg
+104
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

microsite/core/Components.js
+114
View File
@@ -0,0 +1,114 @@
const React = require('react');
const PropTypes = require('prop-types');
const simpleComponent = (Component, baseClassName = '', mods = []) => {
const SimpleComponent = props => {
// Extra BEM modifiers, e.g. `Block__Container--reversed`
const modClasses = [];
const otherProps = {};
for (const prop in props) {
if (mods.indexOf(prop) !== -1) {
modClasses.push(`${baseClassName}--${prop}`);
} else {
otherProps[prop] = props[prop];
}
}
return (
<Component
{...otherProps}
className={`${baseClassName} ${props.className || ''} ${modClasses}`}
/>
);
};
SimpleComponent.displayName = `SimpleComponent(${Component}, ${baseClassName})`;
SimpleComponent.propTypes = {};
for (const mod of mods) {
SimpleComponent.propTypes[mod] = PropTypes.bool;
}
return SimpleComponent;
};
const Block = simpleComponent('section', 'Block', ['small', 'wrapped']);
Block.Container = simpleComponent('div', 'Block__Container', [
'reversed',
'wrapped',
'column',
]);
Block.TitleBox = simpleComponent('h1', 'Block__TitleBox', ['large', 'story']);
Block.TextBox = simpleComponent('div', 'Block__TextBox', ['wide', 'small']);
Block.Title = simpleComponent('h1', 'Block__Title', ['half', 'main']);
Block.Subtitle = simpleComponent('h1', 'Block__Subtitle');
Block.SmallTitle = simpleComponent('h2', 'Block__SmallTitle');
Block.SmallestTitle = simpleComponent('h3', 'Block__SmallestTitle');
const BulletLine = simpleComponent('div', 'BulletLine');
Block.Paragraph = simpleComponent('p', 'Block__Paragraph');
Block.LinkButton = simpleComponent('a', 'Block__LinkButton', ['stretch']);
Block.QuoteContainer = simpleComponent('div', 'Block__QuoteContainer');
Block.Quote = simpleComponent('p', 'Block__Quote');
Block.Divider = simpleComponent('p', 'Block__Divider', ['quote']);
Block.MediaFrame = simpleComponent('div', 'Block__MediaFrame');
Block.Graphics = ({ padding, children }) => {
const style = {};
if (padding) {
style.padding = `${padding}% 0`;
}
return (
<div className="Block__GraphicsContainer" style={style}>
<div className="Block__Graphics" children={children} />
</div>
);
};
Block.Graphic = props => {
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
const { x = 0, y = 0, width = 0, src, className = '' } = props;
const style = Object.assign(
{ left: `${x}%`, top: `${y}%`, width: `${width}%` },
props.style,
);
return (
<img
src={src}
alt=""
{...props}
style={style}
className={`Block__Graphic ${className}`}
/>
);
};
Block.Image = props => {
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
return (
<div
{...props}
className={`Block__Image${
props.wide ? '--wide' : props.narrow ? '--narrow' : ''
}`}
/>
);
};
const ActionBlock = simpleComponent('section', 'ActionBlock');
ActionBlock.Title = simpleComponent('h1', 'ActionBlock__Title');
ActionBlock.Subtitle = simpleComponent('h2', 'ActionBlock__Subtitle');
ActionBlock.Link = simpleComponent('a', 'ActionBlock__Link');
const Breakpoint = ({ narrow, wide }) => (
<React.Fragment>
<div className="Breakpoint--narrow">{narrow}</div>
<div className="Breakpoint--wide">{wide}</div>
</React.Fragment>
);
module.exports = {
Block,
ActionBlock,
Breakpoint,
BulletLine,
};
microsite/core/Footer.js
+115
View File
@@ -0,0 +1,115 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
class Footer extends React.Component {
docUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
const docsUrl = this.props.config.docsUrl;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
return `${baseUrl}${docsPart}${langPart}${doc}`;
}
pageUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
return baseUrl + (language ? `${language}/` : '') + doc;
}
render() {
return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<div className="footer-title">
<a href={this.props.config.baseUrl}>
<h2 className="footerLogo"></h2>
</a>
</div>
<div>
<h5>Docs</h5>
<a
href={`${this.props.config.repoUrl}/blob/master/docs/plugins/create-a-plugin.md`}
>
Create a Plugin
</a>
<a
href={`${this.props.config.repoUrl}/blob/master/docs/plugins/structure-of-a-plugin.md`}
>
Structure of a Plugin
</a>
<a href={`${this.props.config.repoUrl}/tree/master/docs`}>
API references
</a>
<a href={`${this.props.config.repoUrl}/blob/master/docs/FAQ.md`}>
FAQ
</a>
</div>
<div>
<h5>Community</h5>
<a href="https://discord.gg/MUpMjP2">Support chatroom</a>
<a href="https://mailchi.mp/spotify/backstage-community">
Subscribe to our newsletter
</a>
{/*
<h5>Docs</h5>
<a href={this.docUrl("developing-a-plugin.html", this.props.language)}>
Developing a Plugin
</a>
<a href={this.docUrl("apis.html", this.props.language)}>
API Overview
</a>
<a href={this.docUrl("layout-components.html", this.props.language)}>
Layout Components
</a>
*/}
</div>
<div>
<h5>More</h5>
<a href={this.props.config.fossWebsite}>
Open Source @ {this.props.config.organizationName}
</a>
<a href={this.props.config.repoUrl}>GitHub</a>
<a
className="github-button"
href={this.props.config.repoUrl}
data-icon="octicon-star"
data-count-href="/spotify/backstage/stargazers"
data-show-count="true"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star this project on GitHub"
>
Star
</a>
{this.props.config.twitterUsername && (
<div className="social">
<a
href={`https://twitter.com/${this.props.config.twitterUsername}`}
className="twitter-follow-button"
>
Follow @{this.props.config.twitterUsername}
</a>
</div>
)}
</div>
</section>
<a
href={this.props.config.fossWebsite}
target="_blank"
rel="noreferrer noopener"
className="spotifyOpenSource"
>
Made with <span>❤</span> at {this.props.config.organizationName}
</a>
<p className="copyright">{this.props.config.copyright}</p>
</footer>
);
}
}
module.exports = Footer;
microsite/core/GridBlockWithButton.js
+100
View File
@@ -0,0 +1,100 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const classNames = require('classnames');
const CompLibrary = require(`${process.cwd()}/node_modules/docusaurus/lib/core/CompLibrary.js`);
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
class GridBlockWithButton extends React.Component {
renderBlock(origBlock) {
const blockDefaults = {
imageAlign: 'left',
};
const block = {
...blockDefaults,
...origBlock,
};
const blockClasses = classNames('blockElement', this.props.className, {
alignCenter: this.props.align === 'center',
alignRight: this.props.align === 'right',
fourByGridBlock: this.props.layout === 'fourColumn',
imageAlignSide:
block.image &&
(block.imageAlign === 'left' || block.imageAlign === 'right'),
imageAlignTop: block.image && block.imageAlign === 'top',
imageAlignRight: block.image && block.imageAlign === 'right',
imageAlignBottom: block.image && block.imageAlign === 'bottom',
imageAlignLeft: block.image && block.imageAlign === 'left',
threeByGridBlock: this.props.layout === 'threeColumn',
twoByGridBlock: this.props.layout === 'twoColumn',
});
const topLeftImage =
(block.imageAlign === 'top' || block.imageAlign === 'left') &&
this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
const bottomRightImage =
(block.imageAlign === 'bottom' || block.imageAlign === 'right') &&
this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
return (
<div className={blockClasses} key={block.title}>
{topLeftImage}
<div className="blockContent">
{this.renderBlockTitle(block.title)}
<MarkdownBlock>{block.content}</MarkdownBlock>
<div className="pluginWrapper buttonWrapper">
<a className="button" href={block.href} target={block.target}>
{block.buttonContent}
</a>
</div>
</div>
{bottomRightImage}
</div>
);
}
renderBlockImage(image) {
if (!image) {
return null;
}
return <div className="displayImage">{image}</div>;
}
renderBlockTitle(title) {
if (!title) {
return null;
}
return (
<h2>
<MarkdownBlock>{title}</MarkdownBlock>
</h2>
);
}
render() {
return (
<div className="gridBlock">
{this.props.contents.map(this.renderBlock, this)}
</div>
);
}
}
GridBlockWithButton.defaultProps = {
align: 'left',
contents: [],
layout: 'twoColumn',
};
module.exports = GridBlockWithButton;
microsite/i18n/en.json
+290
View File
@@ -0,0 +1,290 @@
{
"_comment": "This file is auto-generated by write-translations.js",
"localized-strings": {
"next": "Next",
"previous": "Previous",
"tagline": "An open platform for building developer portals",
"docs": {
"api/backend": {
"title": "api/backend"
},
"api/utility-apis": {
"title": "api/utility-apis"
},
"architecture-decisions/adr001-add-adr-log": {
"title": "architecture-decisions/adr001-add-adr-log"
},
"architecture-decisions/adr002-default-catalog-file-format": {
"title": "architecture-decisions/adr002-default-catalog-file-format"
},
"architecture-decisions/adr003-avoid-default-exports": {
"title": "architecture-decisions/adr003-avoid-default-exports"
},
"architecture-decisions/adr004-module-export-structure": {
"title": "architecture-decisions/adr004-module-export-structure"
},
"architecture-decisions/adr005-catalog-core-entities": {
"title": "architecture-decisions/adr005-catalog-core-entities"
},
"architecture-decisions/adr006-avoid-react-fc": {
"title": "architecture-decisions/adr006-avoid-react-fc"
},
"architecture-decisions/adr007-use-msw-to-mock-service-requests": {
"title": "architecture-decisions/adr007-use-msw-to-mock-service-requests"
},
"architecture-decisions/adr008-default-catalog-file-name": {
"title": "architecture-decisions/adr008-default-catalog-file-name"
},
"architecture-decisions/index": {
"title": "architecture-decisions/index"
},
"auth/add-auth-provider": {
"title": "auth/add-auth-provider"
},
"auth/auth-backend": {
"title": "auth/auth-backend"
},
"auth/glossary": {
"title": "auth/glossary"
},
"auth/index": {
"title": "auth/index"
},
"auth/oauth": {
"title": "auth/oauth"
},
"conf/defining": {
"title": "conf/defining"
},
"conf/index": {
"title": "conf/index"
},
"conf/reading": {
"title": "conf/reading"
},
"conf/writing": {
"title": "conf/writing"
},
"dls/contributing-to-storybook": {
"title": "dls/contributing-to-storybook"
},
"dls/design": {
"title": "dls/design"
},
"dls/figma": {
"title": "dls/figma"
},
"FAQ": {
"title": "FAQ"
},
"features/software-catalog/api": {
"title": "features/software-catalog/api"
},
"features/software-catalog/descriptor-format": {
"title": "features/software-catalog/descriptor-format"
},
"features/software-catalog/extending-the-model": {
"title": "features/software-catalog/extending-the-model"
},
"features/software-catalog/external-integrations": {
"title": "features/software-catalog/external-integrations"
},
"features/software-catalog/index": {
"title": "features/software-catalog/index"
},
"features/software-catalog/populating": {
"title": "features/software-catalog/populating"
},
"features/software-catalog/system-model": {
"title": "features/software-catalog/system-model"
},
"features/software-templates/adding-templates": {
"title": "features/software-templates/adding-templates"
},
"features/software-templates/extending/create-your-own-preparer": {
"title": "features/software-templates/extending/create-your-own-preparer"
},
"features/software-templates/extending/create-your-own-publisher": {
"title": "features/software-templates/extending/create-your-own-publisher"
},
"features/software-templates/extending/create-your-own-templater": {
"title": "features/software-templates/extending/create-your-own-templater"
},
"features/software-templates/extending/index": {
"title": "features/software-templates/extending/index"
},
"features/software-templates/index": {
"title": "features/software-templates/index"
},
"features/techdocs/concepts": {
"title": "features/techdocs/concepts"
},
"features/techdocs/creating-and-publishing": {
"title": "features/techdocs/creating-and-publishing"
},
"features/techdocs/FAQ": {
"title": "features/techdocs/FAQ"
},
"features/techdocs/getting-started": {
"title": "features/techdocs/getting-started"
},
"features/techdocs/README": {
"title": "features/techdocs/README"
},
"getting-started/app-custom-theme": {
"title": "getting-started/app-custom-theme"
},
"getting-started/configure-app-with-plugins": {
"title": "getting-started/configure-app-with-plugins"
},
"getting-started/create-an-app": {
"title": "getting-started/create-an-app"
},
"getting-started/deployment-k8s": {
"title": "getting-started/deployment-k8s"
},
"getting-started/deployment-other": {
"title": "getting-started/deployment-other"
},
"getting-started/development-environment": {
"title": "getting-started/development-environment"
},
"getting-started/getting-started-index": {
"title": "Getting started",
"sidebar_label": "Getting started"
},
"getting-started/installation": {
"title": "getting-started/installation"
},
"journey": {
"title": "journey"
},
"overview/architecture-overview": {
"title": "overview/architecture-overview"
},
"overview/architecture-terminology": {
"title": "overview/architecture-terminology"
},
"overview/roadmap": {
"title": "overview/roadmap"
},
"overview/support": {
"title": "overview/support"
},
"overview/what-is-backstage": {
"title": "overview/what-is-backstage"
},
"plugins/backend-plugin": {
"title": "plugins/backend-plugin"
},
"plugins/call-existing-api": {
"title": "plugins/call-existing-api"
},
"plugins/create-a-plugin": {
"title": "plugins/create-a-plugin"
},
"plugins/existing-plugins": {
"title": "plugins/existing-plugins"
},
"plugins/index": {
"title": "plugins/index"
},
"plugins/plugin-development": {
"title": "plugins/plugin-development"
},
"plugins/proxying": {
"title": "plugins/proxying"
},
"plugins/publish-private": {
"title": "plugins/publish-private"
},
"plugins/publishing": {
"title": "plugins/publishing"
},
"plugins/structure-of-a-plugin": {
"title": "plugins/structure-of-a-plugin"
},
"plugins/testing": {
"title": "plugins/testing"
},
"README": {
"title": "README"
},
"reference/createPlugin-feature-flags": {
"title": "reference/createPlugin-feature-flags"
},
"reference/createPlugin-router": {
"title": "reference/createPlugin-router"
},
"reference/createPlugin": {
"title": "reference/createPlugin"
},
"reference/utility-apis/AlertApi": {
"title": "reference/utility-apis/AlertApi"
},
"reference/utility-apis/AppThemeApi": {
"title": "reference/utility-apis/AppThemeApi"
},
"reference/utility-apis/BackstageIdentityApi": {
"title": "reference/utility-apis/BackstageIdentityApi"
},
"reference/utility-apis/Config": {
"title": "reference/utility-apis/Config"
},
"reference/utility-apis/ErrorApi": {
"title": "reference/utility-apis/ErrorApi"
},
"reference/utility-apis/FeatureFlagsApi": {
"title": "reference/utility-apis/FeatureFlagsApi"
},
"reference/utility-apis/IdentityApi": {
"title": "reference/utility-apis/IdentityApi"
},
"reference/utility-apis/OAuthApi": {
"title": "reference/utility-apis/OAuthApi"
},
"reference/utility-apis/OAuthRequestApi": {
"title": "reference/utility-apis/OAuthRequestApi"
},
"reference/utility-apis/OpenIdConnectApi": {
"title": "reference/utility-apis/OpenIdConnectApi"
},
"reference/utility-apis/ProfileInfoApi": {
"title": "reference/utility-apis/ProfileInfoApi"
},
"reference/utility-apis/README": {
"title": "reference/utility-apis/README"
},
"reference/utility-apis/SessionStateApi": {
"title": "reference/utility-apis/SessionStateApi"
},
"reference/utility-apis/StorageApi": {
"title": "reference/utility-apis/StorageApi"
},
"tutorials/index": {
"title": "tutorials/index"
}
},
"links": {
"GitHub": "GitHub",
"Docs": "Docs",
"Blog": "Blog",
"Demos": "Demos",
"The Spotify story": "The Spotify story",
"Newsletter": "Newsletter"
},
"categories": {
"Getting Started": "Getting Started",
"Plugins": "Plugins",
"Test": "Test",
"API Overview": "API Overview",
"Layout components": "Layout components",
"Testing": "Testing"
}
},
"pages-strings": {
"Help Translate|recruit community translators for your project": "Help Translate",
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
}
}
microsite/package.json
+17
View File
@@ -0,0 +1,17 @@
{
"version": "1.0.0",
"name": "backstage-microsite",
"license": "Apache-2.0",
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus-start",
"build": "docusaurus-build && cp static/img/*.svg build/backstage/img/",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version"
},
"devDependencies": {
"docusaurus": "^1.14.4"
}
}
microsite/pages/en/background.js
+122
View File
@@ -0,0 +1,122 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const Components = require(`${process.cwd()}/core/Components.js`);
const Block = Components.Block;
const Breakpoint = Components.Breakpoint;
const Background = props => {
const { config: siteConfig } = props;
const { baseUrl } = siteConfig;
return (
<div className="mainWrapper">
<Block>
<Block.Container column>
<Block.TitleBox story>The Spotify Story</Block.TitleBox>
<Block.TextBox>
<Block.Paragraph>
Backstage was born out of necessity at Spotify. We found that as
we grew, our infrastructure was becoming more fragmented, our
engineers less productive.{' '}
</Block.Paragraph>
<Block.Paragraph>
Instead of building and testing code, teams were spending more
time looking for the right information just to get started.
“Where’s the API for that service we’re all supposed to be using?”
“What version of that framework is everyone on?” “This service
isn’t responding, who owns it?” “I can’t find documentation for
anything!”{' '}
</Block.Paragraph>
<Breakpoint
narrow={
<Block small>
<Block.QuoteContainer>
<Block.Divider quote />
<Block.Quote>
One place for everything. Accessible to everyone.
</Block.Quote>
</Block.QuoteContainer>
</Block>
}
></Breakpoint>
<Block.Paragraph>
Context switching and cognitive overload were dragging engineers
down, day by day. We needed to make it easier for our engineers to
do their work without having to become an expert in every aspect
of infrastructure tooling.
</Block.Paragraph>
<Block.Paragraph>
Our idea was to centralize and simplify end-to-end software
development with an abstraction layer that sits on top of all of
our infrastructure and developer tooling. That’s Backstage.
</Block.Paragraph>
<Block.Paragraph>
It’s a developer portal powered by a centralized service catalog —
with a plugin architecture that makes it endlessly extensible and
customizable.
</Block.Paragraph>
<Block.Paragraph>
Manage all your services, software, tooling, and testing in
Backstage. Start building a new microservice using an automated
template in Backstage. Create, maintain, and find the
documentation for all that software in Backstage.{' '}
</Block.Paragraph>
<Block.Paragraph>
One place for everything. Accessible to everyone.
</Block.Paragraph>
<Breakpoint
narrow={
<Block small>
<Block.LinkButton stretch href={'https://backstage.io/'}>
Explore Features
</Block.LinkButton>
</Block>
}
></Breakpoint>
</Block.TextBox>
</Block.Container>
</Block>
<Breakpoint
wide={
<Block small>
<Block.QuoteContainer>
<Block.Divider quote />
<Block.Quote>
One place for everything. Accessible to everyone.
</Block.Quote>
<Block.LinkButton stretch href={'https://backstage.io/'}>
Explore Features
</Block.LinkButton>
</Block.QuoteContainer>
</Block>
}
></Breakpoint>
<div
style={{
zIndex: -1,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage: `linear-gradient( to bottom, rgb(18, 18, 18), rgba(0, 0, 0, 0) ), url(../img/dot.svg);`,
}}
/>
</div>
);
};
module.exports = Background;
microsite/pages/en/demos.js
+217
View File
@@ -0,0 +1,217 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const Components = require(`${process.cwd()}/core/Components.js`);
const Block = Components.Block;
const Background = props => {
const { config: siteConfig } = props;
const { baseUrl } = siteConfig;
return (
<main className="MainContent">
<Block small className="stripe-bottom bg-black-grey">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>See us in action.</Block.Title>
<Block.Paragraph>
To illustrate the potential of Backstage, we’re showing you{' '}
<a href="https://labs.spotify.com/2020/04/21/how-we-use-backstage-at-spotify/">
how we use it here at Spotify
</a>
. The videos below feature the custom plugins and templates that
we built for our internal version of Backstage. You can use
Backstage to build the developer portal you want — integrating the
tools that you use in your own infrastructure ecosystem. (Or get
started by building an open source plugin for Backstage that
everyone can use, like our{' '}
<a href="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
Lighthouse Plugin
</a>
.)
</Block.Paragraph>
</Block.TextBox>
<Block.Graphics>
<Block.Graphic
x={-7}
y={-12}
width={120}
src={`${baseUrl}img/demo-illustration.svg`}
/>
</Block.Graphics>
</Block.Container>
</Block>
<Block small className="stripe bg-black">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>Introduction to Backstage</Block.Title>
<Block.Paragraph>
Backstage is an open source platform for building developer
portals. We’ve been using our homegrown version at Spotify for
years — so it’s already packed with features. (We have over 120
internal plugins, built by 60 different teams.) In this live demo
recording, Stefan Ålund, product manager for Backstage, tells the
origin story of Backstage and gives you a tour of how we use it
here at Spotify.
</Block.Paragraph>
<Block.LinkButton
href={'https://www.youtube.com/watch?v=1XtJ5FAOjPk'}
>
Watch now
</Block.LinkButton>
</Block.TextBox>
<Block.MediaFrame>
<iframe
width="800"
height="500"
src="https://www.youtube.com/embed/1XtJ5FAOjPk"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Block.MediaFrame>
</Block.Container>
</Block>
<Block small className="bg-black-grey">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>Manage your tech health</Block.Title>
<Block.Paragraph>
Instead of manually updating a spreadsheet, what if you had a
beautiful dashboard that could give you an instant, interactive
picture of your entire org’s tech stack? That’s how we do it at
Spotify. With our Tech Insights plugin for Backstage, anyone at
Spotify can see which version of which software anyone else at
Spotify is using — and a whole a lot more. From managing
migrations to fighting tech entropy, Backstage makes managing our
tech health actually kind of pleasant.
</Block.Paragraph>
<Block.LinkButton
href={
'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6'
}
>
Watch now
</Block.LinkButton>
</Block.TextBox>
<Block.MediaFrame>
<iframe
width="800"
height="500"
src="https://www.youtube.com/embed/K3xz6VAbgH8"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Block.MediaFrame>
</Block.Container>
</Block>
<Block small className="stripe bg-black">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>Create a microservice</Block.Title>
<Block.Paragraph>
You’re a Spotify engineer about to build a new microservice (or
any component) using Spring Boot. Where do you start? Search for a
quick start guide online? Create an empty repo on GitHub? Copy and
paste an old project? Nope. Just go to Backstage, and you’ll be up
and running in two minutes — with a “Hello World” app, CI, and
documentation all automatically set up and configured in a
standardized way.
</Block.Paragraph>
<Block.LinkButton
href={'https://www.youtube.com/watch?v=U1iwe3L5pzc'}
>
Watch now
</Block.LinkButton>
</Block.TextBox>
<Block.MediaFrame>
<iframe
width="800"
height="500"
src="https://www.youtube.com/embed/U1iwe3L5pzc"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Block.MediaFrame>
</Block.Container>
</Block>
<Block small className="bg-black-grey">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>Search all your services</Block.Title>
<Block.Paragraph>
All of Spotify’s services are automatically indexed in Backstage.
So our engineers can stop playing detective — no more spamming
Slack channels asking if anyone knows who owns a particular
service and where you can find its API, only to discover that the
owner went on sabbatical three months ago and you have to hunt
them down on a mountain in Tibet where they’re on a 12-day silent
meditation retreat. At Spotify, anyone can always find anyone
else’s service, inspect its APIs, and contact its current owner —
all with one search.
</Block.Paragraph>
<Block.LinkButton
href={'https://www.youtube.com/watch?v=vcDL9tOv7Eo'}
>
Watch now
</Block.LinkButton>
</Block.TextBox>
<Block.MediaFrame>
<iframe
width="800"
height="500"
src="https://www.youtube.com/embed/vcDL9tOv7Eo"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Block.MediaFrame>
</Block.Container>
</Block>
<Block className="stripe-bottom bg-black-grey">
<Block.Container style={{ justifyContent: 'flex-start' }}>
<Block.TextBox>
<Block.Title>Manage data pipelines</Block.Title>
<Block.Paragraph>
We manage a lot of data pipelines (also known as workflows) here
at Spotify. So, of course, we made a great workflows plugin for
our version of Backstage. All our workflow tools — including a
scheduler, log inspector, data lineage graph, and configurable
alerts — are integrated into one simple interface.
</Block.Paragraph>
<Block.LinkButton
href={'https://www.youtube.com/watch?v=rH46MLNZIPM '}
>
Watch now
</Block.LinkButton>
</Block.TextBox>
<Block.MediaFrame>
<iframe
width="800"
height="500"
src="https://www.youtube.com/embed/rH46MLNZIPM"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</Block.MediaFrame>
</Block.Container>
</Block>
</main>
);
};
module.exports = Background;
microsite/pages/en/index.js
+474
View File
@@ -0,0 +1,474 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const Components = require(`${process.cwd()}/core/Components.js`);
const Block = Components.Block;
const ActionBlock = Components.ActionBlock;
const Breakpoint = Components.Breakpoint;
const BulletLine = Components.BulletLine;
class Index extends React.Component {
render() {
const { config: siteConfig } = this.props;
const { baseUrl } = siteConfig;
return (
<main className="MainContent">
<Block small className="bg-black-grey stripe-bottom">
<Block.Container>
<Block.TextBox>
<Block.Title main>
An open platform for building developer portals
</Block.Title>
<Block.Paragraph>
Powered by a centralized service catalog, Backstage restores
order to your infrastructure. So your product teams can ship
high-quality code quickly — without compromising autonomy.
</Block.Paragraph>
<Block.LinkButton
href={'https://github.com/spotify/backstage#getting-started'}
>
GitHub
</Block.LinkButton>
</Block.TextBox>
<Block.Graphics>
<Block.Graphic
x={-12.5}
y={16}
width={120}
src={`${baseUrl}img/laptop.svg`}
/>
<Block.Graphic
x={5.8}
y={20}
width={88}
src={`${baseUrl}animations/backstage-logos-hero-8.gif`}
/>
</Block.Graphics>
</Block.Container>
</Block>
<Block small className="stripe-top bg-black">
<Block.Container wrapped>
<Block.TextBox>
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-speed-paradox-7.gif`}
/>
<Block.SmallTitle small>The Speed Paradox</Block.SmallTitle>
<Block.Paragraph>
At Spotify, we’ve always believed in the speed and ingenuity
that comes from having autonomous development teams. But as we
learned firsthand, the faster you grow, the more fragmented and
complex your software ecosystem becomes. And then everything
slows down again.
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox>
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-standards-paradox-4.gif`}
/>
<Block.SmallTitle small>The Standards Paradox</Block.SmallTitle>
<Block.Paragraph>
By centralizing services and standardizing your tooling,
Backstage streamlines your development environment from end to
end. Instead of restricting autonomy, standardization frees your
engineers from infrastructure complexity. So you can return to
building and scaling, quickly and safely.
</Block.Paragraph>
</Block.TextBox>
</Block.Container>
</Block>
<Block className="stripe-top bg-teal-top-right" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
{' '}
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-service-catalog-icon-1.gif`}
/>
<Block.Subtitle>
Backstage Service Catalog{' '}
<a
title="Submit feedback for this feature. Click to learn more about this release."
href="https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha"
>
(alpha)
</a>
</Block.Subtitle>
<Block.Title half>
Build an ecosystem, not a wilderness
</Block.Title>
</Block.TextBox>
<Breakpoint
narrow={
<Block.Graphics padding={5}>
<Block.Graphic
y={-8}
width={100}
src={`${baseUrl}img/components-with-filter-small.png`}
/>
</Block.Graphics>
}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Manage all your software, all in one place{' '}
</Block.SmallTitle>
<Block.Paragraph>
Backstage makes it easy for one team to manage 10 services — and
makes it possible for your company to manage thousands of them
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>A uniform overview</Block.SmallTitle>
<Block.Paragraph>
Every team can see all the services they own and related
resources (deployments, data pipelines, pull request status,
etc.)
</Block.Paragraph>
</Block.TextBox>
<Block.Image
wide
style={{
background: `url(${baseUrl}img/components-with-filter.png)`,
backgroundSize: '594px 435.5px',
width: '594px',
height: '435.5px',
margin: '-380px 105px 0 10px',
}}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Metadata on tap</Block.SmallTitle>
<Block.Paragraph>
All that information can be shared with plugins inside Backstage
to enable other management features, like resource monitoring
and testing
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Not just services</Block.SmallTitle>
<Block.Paragraph>
Libraries, websites, ML models — you name it, Backstage knows
all about it, including who owns it, dependencies, and more
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Discoverability & accountability
</Block.SmallTitle>
<Block.Paragraph>
No more orphan software hiding in the dark corners of your tech
stack
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small></Block.TextBox>
</Block.Container>
</Block>
<ActionBlock className="stripe bg-teal">
<ActionBlock.Title>
Learn more about the service catalog
</ActionBlock.Title>
<ActionBlock.Link
href={`https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha`}
>
Read
</ActionBlock.Link>
</ActionBlock>
<Block className="stripe-top bg-teal-bottom" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-software-templates-icon-5.gif`}
/>
<Block.Subtitle>
Backstage Software Templates{' '}
<a
title="Submit feedback for this feature. Click to learn more about this release."
href="https://backstage.io/blog/2020/08/05/announcing-backstage-software-templates"
>
(alpha)
</a>
</Block.Subtitle>
<Block.Title small>Standards can set you free</Block.Title>
</Block.TextBox>
<Breakpoint
narrow={
<Block.Graphics padding={20}>
<Block.Graphic
y={-38}
width={100}
src={`${baseUrl}img/service-cards.png`}
/>
</Block.Graphics>
}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Like automated getting started guides
</Block.SmallTitle>
<Block.Paragraph>
Using templates, engineers can spin up a new microservice with
your organization’s best practices built-in, right from the
start
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Push-button deployment</Block.SmallTitle>
<Block.Paragraph>
Click a button to create a Spring Boot project with your repo
automatically configured on GitHub and your CI already running
the first build
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Built to your standards</Block.SmallTitle>
<Block.Paragraph>
Go instead of Java? CircleCI instead of Jenkins? Serverless
instead of Kubernetes? GCP instead of AWS? Customize your
recipes with your best practices baked-in
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Golden Paths pave the way
</Block.SmallTitle>
<Block.Paragraph>
When the right way is also the easiest way, engineers get up and
running faster — and more safely
</Block.Paragraph>
</Block.TextBox>
<Breakpoint
wide={
<Block.Graphics>
<Block.Graphic
x={-50}
y={-2}
width={200}
src={`${baseUrl}img/cards.png`}
/>
</Block.Graphics>
}
/>
</Block.Container>
</Block>
<ActionBlock className="stripe bg-teal">
<ActionBlock.Title>
Build your own software templates
</ActionBlock.Title>
<ActionBlock.Link
href={`https://github.com/spotify/backstage/blob/master/docs/features/software-templates/extending/index.md`}
>
Contribute
</ActionBlock.Link>
</ActionBlock>
<Block className="stripe-top bg-teal-bottom" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-techdocs-icon-1.gif`}
/>
<Block.Subtitle>
Backstage TechDocs <span>(Coming Soon)</span>
</Block.Subtitle>
<Block.Title small>Docs like code</Block.Title>
</Block.TextBox>
<Breakpoint
narrow={
<React.Fragment>
<Block.Graphics padding={26}>
<Block.Graphic
x={-1.4}
y={-45}
width={107}
src={`${baseUrl}img/techdocs-static-mobile.png`}
/>
</Block.Graphics>
</React.Fragment>
}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Free documentation</Block.SmallTitle>
<Block.Paragraph>
Whenever you use a Backstage Software Template, your project
automatically gets a TechDocs site, for free
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Easy to write</Block.SmallTitle>
<Block.Paragraph>
With our docs-like-code approach, engineers write their
documentation in Markdown files right alongside their code
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Easy to maintain</Block.SmallTitle>
<Block.Paragraph>
Updating code? Update your documentation while you’re there —
with docs and code in the same place, it becomes a natural part
of your workstream
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Easy to find and use</Block.SmallTitle>
<Block.Paragraph>
Since all your documentation is in Backstage, finding any
TechDoc is just a search query away
</Block.Paragraph>
</Block.TextBox>
<Breakpoint
wide={
<img
style={{ margin: 'auto' }}
src={`${baseUrl}img/techdocs-web.png`}
/>
}
/>
</Block.Container>
</Block>
<ActionBlock className="stripe bg-teal">
<ActionBlock.Title>Subscribe to our newsletter</ActionBlock.Title>
<ActionBlock.Subtitle>
TechDocs is our most used feature at Spotify. Be the first to know
when{' '}
<a href="https://github.com/spotify/backstage/projects/5">
the open source version
</a>{' '}
ships.
</ActionBlock.Subtitle>
<ActionBlock.Link
href={`https://mailchi.mp/spotify/backstage-community`}
>
Subscribe
</ActionBlock.Link>
</ActionBlock>
<Block className="stripe-top bg-teal-bottom" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-plugin-icon-2.gif`}
/>
<Block.Subtitle>Customize Backstage with plugins</Block.Subtitle>
<Block.Title small>
An app store for your infrastructure
</Block.Title>
</Block.TextBox>
<Breakpoint
narrow={
<Block.Graphics padding={10}>
<Block.Graphic
y={-20}
width={100}
src={`${baseUrl}img/plugins.png`}
/>
</Block.Graphics>
}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>Add functionality</Block.SmallTitle>
<Block.Paragraph>
Want scalable website testing? Add the{' '}
<a href="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
Lighthouse
</a>{' '}
plugin. Wondering about recommended frameworks? Add the{' '}
<a href="https://backstage.io/blog/2020/05/14/tech-radar-plugin">
Tech Radar
</a>{' '}
plugin.{' '}
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>BYO Plugins</Block.SmallTitle>
<Block.Paragraph>
If you don’t see the plugin you need, it’s simple to build your
own
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Integrate your own custom tooling
</Block.SmallTitle>
<Block.Paragraph>
Building internal plugins lets you tailor your version of
Backstage to be a perfect fit for your infrastructure
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Share with the community
</Block.SmallTitle>
<Block.Paragraph>
Building{' '}
<a href="https://github.com/spotify/backstage/blob/master/docs/FAQ.md#how-do-i-find-out-if-a-plugin-already-exists">
open source plugins
</a>{' '}
contributes to the entire Backstage ecosystem, which benefits
everyone
</Block.Paragraph>
</Block.TextBox>
<Breakpoint
wide={<img src={`${baseUrl}img/cards-plugins.png`} />}
/>
</Block.Container>
</Block>
<ActionBlock className="stripe-top bg-teal">
<ActionBlock.Title>Build a plugin</ActionBlock.Title>
<ActionBlock.Link href="https://github.com/spotify/backstage/blob/master/docs/plugins/create-a-plugin.md">
Contribute
</ActionBlock.Link>
</ActionBlock>
</main>
);
}
}
module.exports = Index;
microsite/sidebars.json
+17
View File
@@ -0,0 +1,17 @@
{
"docs": {
"Getting Started": ["getting-started/getting-started-index"],
"Plugins": [
"developing-a-plugin",
"plugin-api",
"create-plugin-api-v2",
"plugin-structure",
"components",
"errors-notifications"
],
"Test": ["test"],
"API Overview": ["apis"],
"Layout components": ["layout-components"],
"Testing": ["testing-with-jest"]
}
}
microsite/siteConfig.js
+123
View File
@@ -0,0 +1,123 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// See https://docusaurus.io/docs/site-config for all the possible
// site configuration options.
// List of projects/orgs using your project for the users page.
const users = [];
const siteConfig = {
title: 'Backstage', // Title for your website.
tagline: 'An open platform for building developer portals',
url: 'https://backstage.io', // Your website URL
cname: 'backstage.io',
baseUrl: '/', // Base URL for your project */
// For github.io type URLs, you would set the url and baseUrl like:
// url: 'https://facebook.github.io',
// baseUrl: '/test-site/',
// Used for publishing and more
projectName: 'backstage',
organizationName: 'Spotify',
fossWebsite: 'https://spotify.github.io/',
// For top-level user or org sites, the organization is still the same.
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
// organizationName: 'JoelMarcey'
// Google Analytics
gaTrackingId: 'UA-48912878-10',
// For no header links in the top nav bar -> headerLinks: [],
headerLinks: [
{
href: 'https://github.com/spotify/backstage#backstage',
label: 'GitHub',
},
// {
// doc: 'getting-started/getting-started-index',
// label: 'Docs',
// },
{
page: 'blog',
blog: true,
label: 'Blog',
},
{
page: 'demos',
label: 'Demos',
},
{
page: 'background',
label: 'The Spotify story',
},
{
href: 'https://mailchi.mp/spotify/backstage-community',
label: 'Newsletter',
},
],
/* path to images for header/footer */
// headerIcon: "img/android-chrome-192x192.png",
footerIcon: 'img/android-chrome-192x192.png',
favicon: 'img/favicon.svg',
/* Colors for website */
colors: {
primaryColor: '#36BAA2',
secondaryColor: '#121212',
textColor: '#FFFFFF',
navigatorTitleTextColor: '#9e9e9e',
navigatorItemTextColor: '#616161',
},
/* Colors for syntax highlighting */
highlight: {
theme: 'dark',
},
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
copyright: `Copyright © ${new Date().getFullYear()} Spotify AB`,
highlight: {
// Highlight.js theme to use for syntax highlighting in code blocks.
theme: 'monokai',
},
// Add custom scripts here that would be placed in <script> tags.
scripts: ['https://buttons.github.io/buttons.js'],
// On page navigation for the current documentation page.
onPageNav: 'separate',
// No .html extensions for paths.
cleanUrl: true,
// Open Graph and Twitter card images.
ogImage: 'img/logo-gradient-on-dark.svg',
twitterImage: 'img/logo-gradient-on-dark.svg',
// For sites with a sizable amount of content, set collapsible to true.
// Expand/collapse the links and subcategories under categories.
docsSideNavCollapsible: true,
// Show documentation's last contributor's name.
// enableUpdateBy: true,
// Show documentation's last update time.
// enableUpdateTime: true,
// You may provide arbitrary config keys to be used as needed by your
// template. For example, if you need your repo's URL...
repoUrl: 'https://github.com/spotify/backstage',
twitterUsername: 'SpotifyEng',
stylesheets: [
'https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700&display=swap',
],
};
module.exports = siteConfig;
microsite/static/animations/backstage-logos-hero-8.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

microsite/static/animations/backstage-plugin-icon-2.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 KiB

microsite/static/animations/backstage-service-catalog-icon-1.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

microsite/static/animations/backstage-software-templates-icon-5.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

microsite/static/animations/backstage-speed-paradox-7.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

microsite/static/animations/backstage-standards-paradox-4.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 306 KiB

microsite/static/animations/backstage-techdocs-icon-1.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

microsite/static/css/custom.css
+1012
View File
File diff suppressed because it is too large Load Diff
microsite/static/img/android-chrome-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

microsite/static/img/android-chrome-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

microsite/static/img/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

microsite/static/img/backstage-logo-cncf.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

microsite/static/img/cards-mobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

microsite/static/img/cards-plugins.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

microsite/static/img/cards-wide.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

microsite/static/img/cards.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 KiB

microsite/static/img/code.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

microsite/static/img/code.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

microsite/static/img/compliance.svg
+68
View File
@@ -0,0 +1,68 @@
<svg width="1203" height="1128" viewBox="0 0 1203 1128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle r="18.901" transform="matrix(0 1 1 0 218.021 745.539)" fill="#9BF0E1"/>
<rect width="260.413" height="37.8019" transform="matrix(0 1 1 0 199.119 743.439)" fill="url(#paint0_linear)"/>
<circle r="18.901" transform="matrix(0 1 1 0 314.626 678.336)" fill="#9BF0E1"/>
<rect width="327.617" height="37.8019" transform="matrix(0 1 1 0 295.724 676.236)" fill="url(#paint1_linear)"/>
<ellipse rx="22.3294" ry="18.901" transform="matrix(0 1 1 0 990.866 222.336)" fill="#9BF0E1"/>
<rect width="779.047" height="37.8019" transform="matrix(0 1 1 0 971.96 224.814)" fill="url(#paint2_linear)"/>
<circle r="18.901" transform="matrix(0 1 1 0 411.231 594.331)" fill="#9BF0E1"/>
<rect width="411.621" height="37.8019" transform="matrix(0 1 1 0 392.329 592.231)" fill="url(#paint3_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M203.419 912.067L194.922 940.336L919.676 1123.91L1202.33 183.574L1152.73 171.01C1113.55 311.407 1027.41 459.533 898.339 591.608C688.649 806.179 420.821 921.924 203.419 912.067Z" fill="url(#paint4_radial)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.49696 916.158L0 944.426L724.755 1128L1007.41 187.664L957.809 175.101C918.627 315.497 832.49 463.624 703.419 595.699C493.729 810.27 225.899 926.015 8.49696 916.158Z" fill="url(#paint5_radial)"/>
<circle r="18.901" transform="matrix(0 1 1 0 507.837 480.944)" fill="#F037A5"/>
<rect width="525.027" height="37.8019" transform="matrix(0 1 1 0 488.935 478.844)" fill="url(#paint6_linear)"/>
<circle r="18.901" transform="matrix(0 1 1 0 604.439 539.728)" fill="#9BF0E1"/>
<rect width="466.224" height="37.8019" transform="matrix(0 1 1 0 585.539 537.63)" fill="url(#paint7_linear)"/>
<circle r="18.901" transform="matrix(0 1 1 0 701.049 594.331)" fill="#9BF0E1"/>
<rect width="407.421" height="37.8019" transform="matrix(0 1 1 0 682.147 596.431)" fill="url(#paint8_linear)"/>
<circle r="18.901" transform="matrix(0 1 1 0 797.652 510.345)" fill="#9BF0E1"/>
<rect width="495.625" height="37.8019" transform="matrix(0 1 1 0 778.75 508.246)" fill="url(#paint9_linear)"/>
<ellipse rx="21.4182" ry="18.901" transform="matrix(0 1 1 0 894.254 349.422)" fill="#9BF0E1"/>
<rect width="652.065" height="37.8019" transform="matrix(0 1 1 0 875.354 351.801)" fill="url(#paint10_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="32.5528" y1="19.4797" x2="232.692" y2="19.1309" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="40.9535" y1="19.4797" x2="292.742" y2="18.9277" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="97.3841" y1="19.4797" x2="696.103" y2="16.3586" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="51.4543" y1="19.4797" x2="367.803" y2="18.6083" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(595.63 492.857) rotate(69.5628) scale(444.189 541.718)">
<stop stop-color="#757575"/>
<stop offset="1" stop-color="#757575" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(400.708 496.947) rotate(69.5628) scale(444.189 541.718)">
<stop stop-color="#757575"/>
<stop offset="1" stop-color="#757575" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint6_linear" x1="65.6305" y1="19.4797" x2="469.134" y2="18.0621" gradientUnits="userSpaceOnUse">
<stop stop-color="#F037A5"/>
<stop offset="1" stop-color="#F037A5" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint7_linear" x1="58.2799" y1="19.4797" x2="416.592" y2="18.3618" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear" x1="50.9293" y1="19.4797" x2="364.05" y2="18.626" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear" x1="61.9552" y1="19.4797" x2="442.863" y2="18.2164" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint10_linear" x1="81.5109" y1="19.4797" x2="582.645" y2="17.2931" gradientUnits="userSpaceOnUse">
<stop stop-color="#9BF0E1"/>
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

microsite/static/img/components-with-filter-small.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

microsite/static/img/components-with-filter.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

microsite/static/img/demo-illustration.svg
+66
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

Some files were not shown because too many files have changed in this diff Show More