diff --git a/microsite/README copy.md b/microsite/README copy.md new file mode 100644 index 0000000000..d7187888a3 --- /dev/null +++ b/microsite/README copy.md @@ -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/). diff --git a/microsite/README.md b/microsite/README.md new file mode 100644 index 0000000000..d7187888a3 --- /dev/null +++ b/microsite/README.md @@ -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/). diff --git a/microsite/blog/2020-03-16-announcing-backstage.md b/microsite/blog/2020-03-16-announcing-backstage.md new file mode 100644 index 0000000000..3911debf08 --- /dev/null +++ b/microsite/blog/2020-03-16-announcing-backstage.md @@ -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) + + + +## 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). diff --git a/microsite/blog/2020-03-18-what-is-backstage.md b/microsite/blog/2020-03-18-what-is-backstage.md new file mode 100644 index 0000000000..942adc607f --- /dev/null +++ b/microsite/blog/2020-03-18-what-is-backstage.md @@ -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. + + + +## 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). diff --git a/microsite/blog/2020-04-06-lighthouse-plugin.md b/microsite/blog/2020-04-06-lighthouse-plugin.md new file mode 100644 index 0000000000..2d5c7b96b7 --- /dev/null +++ b/microsite/blog/2020-04-06-lighthouse-plugin.md @@ -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. + + + +## 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. diff --git a/microsite/blog/2020-04-30-how-to-quickly-set-up-backstage.md b/microsite/blog/2020-04-30-how-to-quickly-set-up-backstage.md new file mode 100644 index 0000000000..b4fe534a67 --- /dev/null +++ b/microsite/blog/2020-04-30-how-to-quickly-set-up-backstage.md @@ -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). + + + +## 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 (`/packages/app`) with: + +```bash +yarn add @backstage/plugin- +``` + +Then add it to your app's `plugin.ts` file to import and register it: + +`/packages/app/src/plugin.ts`: + +```js +export { plugin as PluginName } from '@backstage/plugin-'; +``` + +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 (``) run: + +```bash +yarn create-plugin +``` + +This command will create a new plugin in `/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). diff --git a/microsite/blog/2020-05-14-tech-radar-plugin.md b/microsite/blog/2020-05-14-tech-radar-plugin.md new file mode 100644 index 0000000000..d78d5d67fa --- /dev/null +++ b/microsite/blog/2020-05-14-tech-radar-plugin.md @@ -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]! + + + +## 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/ diff --git a/microsite/blog/2020-05-14-weaveworks-covid-19-app-uses-backstage-ui.md b/microsite/blog/2020-05-14-weaveworks-covid-19-app-uses-backstage-ui.md new file mode 100644 index 0000000000..68e3f903c7 --- /dev/null +++ b/microsite/blog/2020-05-14-weaveworks-covid-19-app-uses-backstage-ui.md @@ -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. + + + +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 diff --git a/microsite/blog/2020-05-22-phase-2-service-catalog.md b/microsite/blog/2020-05-22-phase-2-service-catalog.md new file mode 100644 index 0000000000..631931bb82 --- /dev/null +++ b/microsite/blog/2020-05-22-phase-2-service-catalog.md @@ -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) + + + +## 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! diff --git a/microsite/blog/2020-06-22-backstage-service-catalog-alpha.md b/microsite/blog/2020-06-22-backstage-service-catalog-alpha.md new file mode 100644 index 0000000000..a352faf0cb --- /dev/null +++ b/microsite/blog/2020-06-22-backstage-service-catalog-alpha.md @@ -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) + + + +## 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). diff --git a/microsite/blog/2020-07-01-how-to-enable-authentication-in-backstage-using-passport.md b/microsite/blog/2020-07-01-how-to-enable-authentication-in-backstage-using-passport.md new file mode 100644 index 0000000000..5111f5c726 --- /dev/null +++ b/microsite/blog/2020-07-01-how-to-enable-authentication-in-backstage-using-passport.md @@ -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. + + + +## 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 `/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). diff --git a/microsite/blog/2020-08-05-announcing-backstage-software-templates.md b/microsite/blog/2020-08-05-announcing-backstage-software-templates.md new file mode 100644 index 0000000000..79b5ec45fd --- /dev/null +++ b/microsite/blog/2020-08-05-announcing-backstage-software-templates.md @@ -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. + + + + + +## 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). diff --git a/microsite/blog/assets/2/1.png b/microsite/blog/assets/2/1.png new file mode 100644 index 0000000000..21fb8bc26f Binary files /dev/null and b/microsite/blog/assets/2/1.png differ diff --git a/microsite/blog/assets/2/2.png b/microsite/blog/assets/2/2.png new file mode 100644 index 0000000000..16fa0cf5bf Binary files /dev/null and b/microsite/blog/assets/2/2.png differ diff --git a/microsite/blog/assets/2/3.png b/microsite/blog/assets/2/3.png new file mode 100644 index 0000000000..f610782186 Binary files /dev/null and b/microsite/blog/assets/2/3.png differ diff --git a/microsite/blog/assets/2/4.png b/microsite/blog/assets/2/4.png new file mode 100644 index 0000000000..d5e59ef92a Binary files /dev/null and b/microsite/blog/assets/2/4.png differ diff --git a/microsite/blog/assets/2/5.png b/microsite/blog/assets/2/5.png new file mode 100644 index 0000000000..00a6163c9a Binary files /dev/null and b/microsite/blog/assets/2/5.png differ diff --git a/microsite/blog/assets/2/screen.gif b/microsite/blog/assets/2/screen.gif new file mode 100644 index 0000000000..a0d52a23b4 Binary files /dev/null and b/microsite/blog/assets/2/screen.gif differ diff --git a/microsite/blog/assets/2/spotify-labs-header.png b/microsite/blog/assets/2/spotify-labs-header.png new file mode 100644 index 0000000000..8effd4b05a Binary files /dev/null and b/microsite/blog/assets/2/spotify-labs-header.png differ diff --git a/microsite/blog/assets/20-05-14/weaveworks-firekube-covid-19-spotify-backstage.png b/microsite/blog/assets/20-05-14/weaveworks-firekube-covid-19-spotify-backstage.png new file mode 100644 index 0000000000..fc5d05cd5d Binary files /dev/null and b/microsite/blog/assets/20-05-14/weaveworks-firekube-covid-19-spotify-backstage.png differ diff --git a/microsite/blog/assets/20-05-20/Service_Catalog_MVP.png b/microsite/blog/assets/20-05-20/Service_Catalog_MVP.png new file mode 100644 index 0000000000..4a50f17d15 Binary files /dev/null and b/microsite/blog/assets/20-05-20/Service_Catalog_MVP.png differ diff --git a/microsite/blog/assets/20-05-20/Service_Catalog_MVP_service.png b/microsite/blog/assets/20-05-20/Service_Catalog_MVP_service.png new file mode 100644 index 0000000000..8067f665c9 Binary files /dev/null and b/microsite/blog/assets/20-05-20/Service_Catalog_MVP_service.png differ diff --git a/microsite/blog/assets/20-05-20/tabs.png b/microsite/blog/assets/20-05-20/tabs.png new file mode 100644 index 0000000000..4a5b11f6fe Binary files /dev/null and b/microsite/blog/assets/20-05-20/tabs.png differ diff --git a/microsite/blog/assets/20-07-01/auth-landing.png b/microsite/blog/assets/20-07-01/auth-landing.png new file mode 100644 index 0000000000..e00f4c2e43 Binary files /dev/null and b/microsite/blog/assets/20-07-01/auth-landing.png differ diff --git a/microsite/blog/assets/20-07-01/auth-sidebar.png b/microsite/blog/assets/20-07-01/auth-sidebar.png new file mode 100644 index 0000000000..b089ab6c0a Binary files /dev/null and b/microsite/blog/assets/20-07-01/auth-sidebar.png differ diff --git a/microsite/blog/assets/2020-08-05/cards.png b/microsite/blog/assets/2020-08-05/cards.png new file mode 100644 index 0000000000..4779618b92 Binary files /dev/null and b/microsite/blog/assets/2020-08-05/cards.png differ diff --git a/microsite/blog/assets/2020-08-05/catalog.png b/microsite/blog/assets/2020-08-05/catalog.png new file mode 100644 index 0000000000..e9c0c65ade Binary files /dev/null and b/microsite/blog/assets/2020-08-05/catalog.png differ diff --git a/microsite/blog/assets/2020-08-05/create-component.png b/microsite/blog/assets/2020-08-05/create-component.png new file mode 100644 index 0000000000..4d815393fc Binary files /dev/null and b/microsite/blog/assets/2020-08-05/create-component.png differ diff --git a/microsite/blog/assets/2020-08-05/feature.mp4 b/microsite/blog/assets/2020-08-05/feature.mp4 new file mode 100644 index 0000000000..a42d9da0e6 Binary files /dev/null and b/microsite/blog/assets/2020-08-05/feature.mp4 differ diff --git a/microsite/blog/assets/2020-08-05/template-form.png b/microsite/blog/assets/2020-08-05/template-form.png new file mode 100644 index 0000000000..5805243f59 Binary files /dev/null and b/microsite/blog/assets/2020-08-05/template-form.png differ diff --git a/microsite/blog/assets/2020-08-05/templates.png b/microsite/blog/assets/2020-08-05/templates.png new file mode 100644 index 0000000000..e350d463f6 Binary files /dev/null and b/microsite/blog/assets/2020-08-05/templates.png differ diff --git a/microsite/blog/assets/3/audit-list.png b/microsite/blog/assets/3/audit-list.png new file mode 100644 index 0000000000..84b64f976a Binary files /dev/null and b/microsite/blog/assets/3/audit-list.png differ diff --git a/microsite/blog/assets/3/audit-view.png b/microsite/blog/assets/3/audit-view.png new file mode 100644 index 0000000000..a2e9716cf4 Binary files /dev/null and b/microsite/blog/assets/3/audit-view.png differ diff --git a/microsite/blog/assets/3/create-audit.png b/microsite/blog/assets/3/create-audit.png new file mode 100644 index 0000000000..cb28de73a4 Binary files /dev/null and b/microsite/blog/assets/3/create-audit.png differ diff --git a/microsite/blog/assets/3/lead-copy.png b/microsite/blog/assets/3/lead-copy.png new file mode 100644 index 0000000000..fbf247eec8 Binary files /dev/null and b/microsite/blog/assets/3/lead-copy.png differ diff --git a/microsite/blog/assets/3/lead.png b/microsite/blog/assets/3/lead.png new file mode 100644 index 0000000000..4b60c4961c Binary files /dev/null and b/microsite/blog/assets/3/lead.png differ diff --git a/microsite/blog/assets/4/create-app.png b/microsite/blog/assets/4/create-app.png new file mode 100644 index 0000000000..52dcc13097 Binary files /dev/null and b/microsite/blog/assets/4/create-app.png differ diff --git a/microsite/blog/assets/4/welcome.png b/microsite/blog/assets/4/welcome.png new file mode 100644 index 0000000000..5de0d57098 Binary files /dev/null and b/microsite/blog/assets/4/welcome.png differ diff --git a/microsite/blog/assets/5/lead.png b/microsite/blog/assets/5/lead.png new file mode 100644 index 0000000000..657268fc09 Binary files /dev/null and b/microsite/blog/assets/5/lead.png differ diff --git a/microsite/blog/assets/6/header.png b/microsite/blog/assets/6/header.png new file mode 100644 index 0000000000..6908e40dbc Binary files /dev/null and b/microsite/blog/assets/6/header.png differ diff --git a/microsite/blog/assets/blog_1.png b/microsite/blog/assets/blog_1.png new file mode 100644 index 0000000000..f8c3516fa7 Binary files /dev/null and b/microsite/blog/assets/blog_1.png differ diff --git a/microsite/blog/assets/illustration.svg b/microsite/blog/assets/illustration.svg new file mode 100644 index 0000000000..50e865ed4f --- /dev/null +++ b/microsite/blog/assets/illustration.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/microsite/core/Components.js b/microsite/core/Components.js new file mode 100644 index 0000000000..49e7d7daca --- /dev/null +++ b/microsite/core/Components.js @@ -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 ( + + ); + }; + 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 ( +
+
+
+ ); +}; +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 ( + + ); +}; + +Block.Image = props => { + /* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */ + return ( +
+ ); +}; + +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 }) => ( + +
{narrow}
+
{wide}
+ +); + +module.exports = { + Block, + ActionBlock, + Breakpoint, + BulletLine, +}; diff --git a/microsite/core/Footer.js b/microsite/core/Footer.js new file mode 100644 index 0000000000..c44b8196a6 --- /dev/null +++ b/microsite/core/Footer.js @@ -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 ( + + ); + } +} + +module.exports = Footer; diff --git a/microsite/core/GridBlockWithButton.js b/microsite/core/GridBlockWithButton.js new file mode 100644 index 0000000000..0f77a6a148 --- /dev/null +++ b/microsite/core/GridBlockWithButton.js @@ -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 ( +
+ {topLeftImage} +
+ {this.renderBlockTitle(block.title)} + {block.content} + +
+ {bottomRightImage} +
+ ); + } + + renderBlockImage(image) { + if (!image) { + return null; + } + + return
{image}
; + } + + renderBlockTitle(title) { + if (!title) { + return null; + } + + return ( +

+ {title} +

+ ); + } + + render() { + return ( +
+ {this.props.contents.map(this.renderBlock, this)} +
+ ); + } +} + +GridBlockWithButton.defaultProps = { + align: 'left', + contents: [], + layout: 'twoColumn', +}; + +module.exports = GridBlockWithButton; diff --git a/microsite/i18n/en.json b/microsite/i18n/en.json new file mode 100644 index 0000000000..f190546dfc --- /dev/null +++ b/microsite/i18n/en.json @@ -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" + } +} diff --git a/microsite/package.json b/microsite/package.json new file mode 100644 index 0000000000..26c1b62f43 --- /dev/null +++ b/microsite/package.json @@ -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" + } +} diff --git a/microsite/pages/en/background.js b/microsite/pages/en/background.js new file mode 100644 index 0000000000..70a15421ab --- /dev/null +++ b/microsite/pages/en/background.js @@ -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 ( +
+ + + The Spotify Story + + + Backstage was born out of necessity at Spotify. We found that as + we grew, our infrastructure was becoming more fragmented, our + engineers less productive.{' '} + + + + 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!”{' '} + + + + + + + One place for everything. Accessible to everyone. + + + + } + > + + 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. + + + + 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. + + + + It’s a developer portal powered by a centralized service catalog — + with a plugin architecture that makes it endlessly extensible and + customizable. + + + + 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.{' '} + + + + One place for everything. Accessible to everyone. + + + + Explore Features + + + } + > + + + + + + + + + One place for everything. Accessible to everyone. + + + Explore Features + + + + } + > + +
+
+ ); +}; + +module.exports = Background; diff --git a/microsite/pages/en/demos.js b/microsite/pages/en/demos.js new file mode 100644 index 0000000000..9f9dcec819 --- /dev/null +++ b/microsite/pages/en/demos.js @@ -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 ( +
+ + + + See us in action. + + To illustrate the potential of Backstage, we’re showing you{' '} + + how we use it here at Spotify + + . 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{' '} + + Lighthouse Plugin + + .) + + + + + + + + + + + + Introduction to Backstage + + 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. + + + Watch now + + + + + + + + + + + + Manage your tech health + + 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. + + + + Watch now + + + + + + + + + + + + Create a microservice + + 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. + + + + Watch now + + + + + + + + + + + + Search all your services + + 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. + + + Watch now + + + + + + + + + + + + Manage data pipelines + + 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. + + + Watch now + + + + + + + +
+ ); +}; + +module.exports = Background; diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js new file mode 100644 index 0000000000..d140a2036b --- /dev/null +++ b/microsite/pages/en/index.js @@ -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 ( +
+ + + + + An open platform for building developer portals + + + 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. + + + GitHub + + + + + + + + + + + + + + The Speed Paradox + + 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. + + + + + The Standards Paradox + + 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. + + + + + + + + + {' '} + + + Backstage Service Catalog{' '} + + (alpha) + + + + Build an ecosystem, not a wilderness + + + + + + } + /> + + + + Manage all your software, all in one place{' '} + + + Backstage makes it easy for one team to manage 10 services — and + makes it possible for your company to manage thousands of them + + + + + A uniform overview + + Every team can see all the services they own and related + resources (deployments, data pipelines, pull request status, + etc.) + + + + + + Metadata on tap + + All that information can be shared with plugins inside Backstage + to enable other management features, like resource monitoring + and testing + + + + + + Not just services + + Libraries, websites, ML models — you name it, Backstage knows + all about it, including who owns it, dependencies, and more + + + + + + + Discoverability & accountability + + + No more orphan software hiding in the dark corners of your tech + stack + + + + + + + + + Learn more about the service catalog + + + Read + + + + + + + + + Backstage Software Templates{' '} + + (alpha) + + + Standards can set you free + + + + + } + /> + + + + Like automated getting started guides + + + Using templates, engineers can spin up a new microservice with + your organization’s best practices built-in, right from the + start + + + + + + Push-button deployment + + Click a button to create a Spring Boot project with your repo + automatically configured on GitHub and your CI already running + the first build + + + + + + Built to your standards + + 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 + + + + + + + Golden Paths pave the way + + + When the right way is also the easiest way, engineers get up and + running faster — and more safely + + + + + + } + /> + + + + + + Build your own software templates + + + Contribute + + + + + + + + + + Backstage TechDocs (Coming Soon) + + Docs like code + + + + + + + } + /> + + + Free documentation + + Whenever you use a Backstage Software Template, your project + automatically gets a TechDocs site, for free + + + + + + Easy to write + + With our docs-like-code approach, engineers write their + documentation in Markdown files right alongside their code + + + + + + Easy to maintain + + 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 + + + + + + Easy to find and use + + Since all your documentation is in Backstage, finding any + TechDoc is just a search query away + + + + } + /> + + + + + Subscribe to our newsletter + + TechDocs is our most used feature at Spotify. Be the first to know + when{' '} + + the open source version + {' '} + ships. + + + Subscribe + + + + + + + + + Customize Backstage with plugins + + An app store for your infrastructure + + + + + + } + /> + + + Add functionality + + Want scalable website testing? Add the{' '} + + Lighthouse + {' '} + plugin. Wondering about recommended frameworks? Add the{' '} + + Tech Radar + {' '} + plugin.{' '} + + + + + + BYO Plugins + + If you don’t see the plugin you need, it’s simple to build your + own + + + + + + + Integrate your own custom tooling + + + Building internal plugins lets you tailor your version of + Backstage to be a perfect fit for your infrastructure + + + + + + + Share with the community + + + Building{' '} + + open source plugins + {' '} + contributes to the entire Backstage ecosystem, which benefits + everyone + + + + } + /> + + + + + Build a plugin + + Contribute + + +
+ ); + } +} + +module.exports = Index; diff --git a/microsite/sidebars.json b/microsite/sidebars.json new file mode 100644 index 0000000000..1ac34b308a --- /dev/null +++ b/microsite/sidebars.json @@ -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"] + } +} diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js new file mode 100644 index 0000000000..f9dd3877bf --- /dev/null +++ b/microsite/siteConfig.js @@ -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