Running Gitlab on Backstage locally

Since Backstage is now the default developer portal for global teams nowadays to uplift engineering productivity, understandably, we FOMO'd 👻 and decided to do a PoC on this open-source platform built by Spotify from scratch.

The easiest way to verify if this baby 👶 works is by integrating it with our existing tech stack.

Without my typical witty backstory, I realised that I, myself, usually ignore the noise and just go straight to the steps when I'm SPIKE'ing something (see what I did there - used an agile term 🫶). Here's the steps on how I did it locally on a bare basic boilerplate level:

Cloned and installed a local copy of the core Backstage repository with the following command:

npx @backstage/create-app@latest

Note: Follow the prompts such as running npm run dev and you should be able to access http://localhost:3000.

Installed the Backstage Gitlab plugin with the following command:

# From your Backstage root directory
cd packages/app
npm install @loblaw/backstage-plugin-gitlab

Added the following on the app-config.yaml (or app-config.local.yaml if you like to play safe):

integrations:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}

Note: GITLAB_TOKEN can be grabbed from your Gitlab account > User Settings > Access Tokens

Selected an existing local repository and included a catalog-info.yml then pushed it to the remote Gitlab repository (this step automates the integration) with the following details:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: k6
  description: performance tests
  annotations:
      gitlab.com/project-id: '41414141' # This must be in quotes and can be found under Settings --> General
spec:
  type: service
  owner: poponuts@test.com # This can be your team's distribution list too
  lifecycle: experimental

Note: type should have the value service to render Gitlab entity.

Refresh or re-run (npm run dev) the app then go to the service and you should be able to see all the Gitlab details

Note: If you like it more fancy and have a separate Gitlab tab as per image above, the .tsx component files should be customised.