Building a Developer Portal

alpha2phi
5 min readJul 10, 2021

Building a developer portal using Backstage to unify all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.

Photo by Clark Tibbs on Unsplash

Overview

As developers, we build products, applications, and portals for others to use. As the team grows in size, slowly it becomes more challenging to deliver high-quality code.

In this article, let’s go through Backstage. This is an open-source platform for building developer portals to enable product teams to quickly ship high-quality code without compromising autonomy.

Getting Started

Let’s get started by creating a standalone Backstage app.

npx @backstage/create-app
Creating a Backstage App
  • For demonstration purposes, I use SQLite as the backend database. Other databases like PostgreSQL are supported.
  • Once the application is created, run “yarn dev” to start it.
  • You should be able to access the application at localhost:3000
Default Backstage Screen

app-config.yaml

This is the main configuration of the application. From within this file, you can configure basic information like title, base URL, organization name, etc.

app:
title: A Developer Portal
baseUrl:
http://localhost:3000
organization:
name: Alpha2Phi
backend:
baseUrl: http://localhost:7000
listen:
port: 7000
csp:
connect-src: ["'self'", 'http:', 'https:']
cors:
origin: http://localhost:3000
methods: [GET, POST, PUT, DELETE]
credentials: true
database:
client: sqlite3
connection: ':memory:'
cache:
store: memory

You will also notice by default github.com is configured as the GitHub provider, and a GITHUB_TOKEN environment variable is needed.

Generate GitHub Token

alpha2phi

Software engineer, Data Science and ML practitioner.