Let's build Developer Portal with Backstage

Let’s build Developer Portal
with
Jirayut Nimsaeng (Dear)
CEO & Founder, Opsta (Thailand) Co.,Ltd.
Dev Mountain Tech Festival @ Chiang Mai
November 12, 2022 https://bit.ly/opsta-dmtf-backstage

Developer Portal with Backstage
#whoami
Jirayut has been involved in DevSecOps, Container, Cloud Technology
and Open Source for over 10 years. He has experienced and
succeeded in transforming several companies to deliver greater
values and be more agile.
● He is Founder and CEO of Opsta (Thailand) Co.,Ltd.
● He is Cloud/DevSecOps Transformation Consultant and
Solution Architecture
● He is the first Certified Kubernetes Security Specialist (CKS)
and Certified Kubernetes Administrator (CKA) in Thailand
● He is first Thai Google Cloud Developer Expert (GDE) in
Thailand

What are we going to talk about today
● Platform Engineering
● Introduction to Backstage
● Backstage Software Catalog
● Backstage Software Templates
● Backstage TechDocs
● Demo
● Wrap up
● Q/A

Platform Engineering

What is Platform Engineering?
Platform Engineering is a practice of building and operating a common
platform as a product for technology teams. It reduces time to market and
complexity by providing self-service deployments for infrastructure and application
and ease of operating applications in production. The team building and operating
the common platform constantly innovates and provides best practices
implementation, tools, and automation.
https://shahadarsh.com/2020/10/12/platform-engineering/

Platform Engineering
Engineering
Applications
Platform
Operations
Application
Engineering
Platform
Engineering
https://docs.aws.amazon.com/wellarchitected/latest/operational-excellence-pillar/separated-aeo-and-ieo-with-centralized-governance.html
Developer
Platform
Engineering Team

[Gartner] Hype Cycle for Emerging Tech 2022
https://www.gartner.com/en/articles/what-s-new-in-the-2022-gartner-hype-cycle-for-emerging-technologies

Internal Developer Platform (IDP)
DevOps Infrastructure Operation
Automation
Security
Services
Developer
Platform
Engineering Team
Use
Consume
Build

Internal Developer Platform (IDP)
DevOps Infrastructure Operation
Automation
Security
Developer
Platform
Engineering Team
Use
Build
Consume

What is Backstage?
● Backstage is an open platform framework for building developer portals
● Backstage uniﬁes all your infrastructure tooling, services, and documentation
to create a streamlined development environment from end to end.
● Backstage was born out of necessity at Spotify
● Backstage is a CNCF Incubation project after graduating from Sandbox

Backstage Beneﬁts
● For engineering managers, it allows you to maintain standards and best practices
across the organization, and can help you manage your whole tech ecosystem, from
migrations to test certiﬁcation.
● For end users (developers), it makes it fast and simple to build software components in
a standardized way, and it provides a central place to manage all projects and
documentation.
● For platform engineers, it enables extensibility and scalability by letting you easily
integrate new tools and services (via plugins), as well as extending the functionality of
existing ones.
● For everyone, it’s a single, consistent experience that ties all your infrastructure tooling,
resources, standards, owners, contributors, and administrators together in one place.

Backstage Overview

Backstage Stack

Backstage Core Features
● Everything in Backstage are plugins
● Backstage Software Catalog for managing all your software (microservices,
libraries, data pipelines, websites, ML models, etc.)
● Backstage Software Templates for quickly spinning up new projects and
standardizing your tooling with your organization’s best practices
● Backstage TechDocs for making it easy to create, maintain, ﬁnd, and use
technical documentation, using a "docs like code" approach
● Plus, a growing ecosystem of open source plugins that further expand
Backstage’s customizability and functionality

Backstage Plugins
https://backstage.io/plugins

Backstage
Software Catalog

Backstage Software Catalog
● The Backstage Software Catalog 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 ﬁles stored
together with the code, which are then harvested and visualized in Backstage.

Backstage Software Catalog

Software Catalog Metadata

Integrated tooling through plugins

Sample Software Catalog Metadata
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: petstore
description: The Petstore is an example API used to show features of the OpenAPI spec.
links:
- url: https://github.com/swagger-api/swagger-petstore
title: GitHub Repo
icon: github
spec:
type: service
lifecycle: experimental
owner: team-c
providesApis:
- petstore
- streetlights
- hello-world

Backstage
Software Templates

Backstage Software Templates
● The Software Templates part of Backstage is a tool that can help you create
Components inside Backstage.
● By default, it has the ability to load skeletons of code, template in some
variables, and then publish the template to some locations like GitHub or
GitLab.

Create new component

Software Template
apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
name: react-ssr-template
title: React SSR Template
description: Create a website powered with Next.js
spec:
owner: web@example.com
type: website
parameters:
- title: Provide some simple information
required:
- component_id
- owner
properties:
component_id:
title: Name
type: string
description: Unique name of the component
ui:field: EntityNamePicker
owner:
title: Owner
type: string
description: Owner of the component
ui:field: OwnerPicker
ui:options:
allowedKinds:
- Group
steps:
- id: template
name: Fetch Skeleton + Template
action: fetch:template
input:
url: ./skeleton
copyWithoutRender:
- .github/workflows/*
values:
component_id: ${{ parameters.component_id }}
description: ${{ parameters.description }}
destination: ${{ parameters.repoUrl | parseRepoUrl }}
owner: ${{ parameters.owner }}
- id: publish
name: Publish
action: publish:github
input:
allowedHosts: ["github.com"]
description: This is ${{ parameters.component_id }}
repoUrl: ${{ parameters.repoUrl }}
- id: register
name: Register
action: catalog:register
input:
repoContentsUrl: ${{ steps.publish.output.repoContentsUrl }}
catalogInfoPath: "/catalog-info.yaml"
http://localhost:3000/create/actions

Backstage TechDocs

Backstage TechDocs
● TechDocs is Spotify’s homegrown docs-like-code solution built directly into
Backstage.
● Engineers write their documentation in Markdown ﬁles which live together
with their code - and with little conﬁguration get a nice-looking doc site in
Backstage.

TechDocs Architecture

TechDocs Output

Demo

Backstage at Spotify

Wrap Up

Wrap Up
● Backstage is really really early stage
● It needs a lot of programming knowledge
● But it is really promising!

VMware Tanzu Application Platform GUI
https://docs.vmware.com/en/VMware-Tanzu-Application-Platform/1.0/tap/GUID-tap-gui-about.html

Red Hat joins the Backstage.io community
● The concept of platform engineering and the end-to-end developer experience is a
burgeoning topic industry wide. Building an IdP (Internal Developer Portal) is
extremely complex. This topic is new for many, and there are still a lot of unknowns
regarding how to evolve an organization that has no, or a low, concept of internal
platforms.
● https://developers.redhat.com/articles/2022/10/24/red-hat-joins-backstageio-community

The Spotify Plugins for Backstage subscription
https://info.backstage.spotify.com/event

Q&A

Contact Us
Facebook:
Email:
Website:
fb.me/DearJirayut
jirayut@opsta.co.th
www.opsta.co.th
Founder & CEO

Let's build Developer Portal with Backstage

Related slideshows

More Related Content

Let's build Developer Portal with Backstage