Unified Dev Portal

Inspiration

Having a DevOps internship at an early stage startup exposed me to the pains of constantly context switching between different services, both internal and public facing, managing the various open tabs for the services, and occasionally forgetting the file location (github) of a specific service or configuration that needs to be updated. Having a single portal, made possible by the Backstage open source project, act as a point of access and visibility to an increasingly complex infrastructure is much preferred in such situations to avoid a negative effect on developer morale and productivity.

What it does

It provides a highly configurable platform, due to it being an open source project, which can be enhanced using components known as plugins. These plugins help integrate various 3rd party sources such as Github, AWS, Prometheus, Grafana, Jira etc. and the project is set up in a way to allow individual devs to build their own plugins and contribute to the project

How we built it

Backstage offers an npx command to deploy a standalone bare bones version of the app with the configured frontend and backend servers (React and Express), similar to creating an Angular app. After creating the project, we then went through the docs to select the initial set of plugins we thought would be most useful for devs and made the appropriate yaml config changes and changes to the React code for adding the plugins as part of the UI. Also made similar changes to the Express + typescript based backend

Challenges we ran into

Getting the yaml configurations and the yarn dependency installations proved to be difficult at times and led to long hours of reading docs and checking similar issues on Discord and other community interactions related to Backstage. Since it's relatively obscure, not a lot of helpful documentation exists and therefore a lot of time was spent in this.

Accomplishments that we're proud of

Being able to work with a new framework/project structure and an unfamiliar programming language (Typescript). Being able to configure and build a valuable tool for developers.

What we learned

Learned about working with a React based open source project, and since it was our first time setting up a React app, we learned about installing dependencies using yarn package manager and reading documentation to pretty much figure out this completely new framework.