DEV Community

Eduardo Bueno
Eduardo Bueno

Posted on

16

Backstage: Facilitando a criação de componentes e melhorando a governança no desenvolvimento de software

Oi, eu sou o Edu!

Pra mim, uma das coisas mais bacanas de trabalhar com tecnologia é a possibilidade de estar sempre aprendendo e aplicando algo novo, como uma nova linguagem de programação, uma abordagem diferente para lidar com problemas relacionados ao desenvolvimento de software, ou uma nova ferramenta ou metodologia que possa melhorar a experiência do desenvolvedor. Isso me proporciona a oportunidade de descobrir o que são, para que servem e como funcionam coisas como aquela que vou comentar hoje: o Backstage.

Algumas das preocupações que afetam as empresas que possuem equipes de desenvolvimento de software estão relacionadas a como oferecer aos desenvolvedores uma boa experiência de trabalho, reduzindo o overhead com aspectos que não fazem parte de seu dia a dia, permitindo que se concentrem na melhor forma de transformar requisitos de negócios em código.

O Backstage, uma plataforma open-source criada pelo Spotify, pode ser descrito como uma ferramenta focada em aumentar e aprimorar a experiência e agilidade da equipe de desenvolvimento. Ela permite a criação de componentes de software de forma padronizada e facilita a governança dos serviços disponíveis. Isso possibilita uma rápida resposta a perguntas como "Qual equipe desenvolveu ou é responsável por esta API?", "Quais são os serviços desenvolvidos pela equipe X?", "Quais são as dependências deste componente?" e "Para que serve e como consumo esta API?".

Meu objetivo aqui não é apresentar em detalhes o Backstage (muitas pessoas já fizeram isso e de forma muito melhor do que eu poderia fazer), mas sim compartilhar um pouco do que aprendi ao trabalhar em uma PoC com o objetivo de avaliar a ferramenta. Não encontrei muito material relacionado à configuração da ferramenta para aproveitar os principais benefícios que ela oferece. Portanto, o primeiro ponto que abordarei aqui está relacionado à criação de templates de software.

Antes, porém, cabe revisar o passo a passo que utilizei para instalar e configurar o Backstage

O Backstage foi escrito em NodeJS e React, o que quer dizer que você precisa tê-los no seu ambiente antes de seguir com a instalação. Para isso, eu fiz o seguinte:

  • Instalei o Curl: ```lang-bash

apt install curl


![Instalando o curl no Ubuntu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0dcphibbms4v0amka5t.gif)

- Daí instalei o **NVM**: 
```lang-bash


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash


Enter fullscreen mode Exit fullscreen mode

Instalação do NVM

  • E então instalei a versão LTS do NodeJS: ```lang-bash

nvm install --lts


![Instalando a versão LTS do NodeJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsyelabszmgrk7yov627.gif)

- Pra concluir, também instalei o **Yarn**: 
```lang-bash


npm install --global yarn


Enter fullscreen mode Exit fullscreen mode

Instalando o Yarn

  • E o Git:


apt install git


Enter fullscreen mode Exit fullscreen mode

Instalando o Git

Em tempo: eu fiz tudo isso no Ubuntu, então dependendo do ambiente que você tiver usando pode haver pequenas variações.

Feito isso, você já tem os requisitos necessários para instalar o Backstage, então o próximo passo é iniciar a instalação, usando o comando abaixo:



npx @backstage/create-app


Enter fullscreen mode Exit fullscreen mode

Instalando o Backstage

Após concluir essas etapas, o Backstage estará instalado e pronto para ser executado. Para isso, basta acessar o diretório de instalação do Backstage (se você seguiu a recomendação, o diretório será chamado "backstage") e, em seguida, executar o comando:



yarn dev


Enter fullscreen mode Exit fullscreen mode

Executando o Backstage

Atenção! Talvez você receba algumas mensagens de erro relacionadas ao Git quando subir o Backstage pela primeira vez. Para resolver isso, basta inicializar o Git no diretório do Backstage, e fazer o commit dos arquivos de lá, usando o git init, e depois os comandos git add . e então o git commit -m“Primeiro commit”.

Pronto, o Backstage foi instalado e iniciado, e já pode ser acessado a partir da url http://localhost:3000. Assim que a página carregar, você verá isso:

Página inicial do Backstage

Com o Backstage devidamente instalado, podemos iniciar a configuração dele

Configurando o banco de dados

Por padrão, o Backstage é iniciado com um banco de dados "in-memory", o que significa que todos os dados manipulados nele são armazenados na memória. No entanto, assim que o Backstage é interrompido, esses dados são perdidos. Então, a primeira coisa que eu recomendo fazer é configurá-lo para utilizar um banco de dados para armazenamento destas informações.

Se você já tiver um banco de dados que possa ser utilizado (eu usei o PostgreSQL), basta alterar o arquivo app-config.local.yaml, que está dentro do diretório do backstage, incluindo as configurações necessárias.

Ao abrir o arquivo em um editor, você verá o seguinte:

Arquivo app-config.local.yaml padrão

As configurações que você deverá incluir nele, para que possa utilizar um banco de dados como repositório são:



backend:
  database:
    connection:
      host: localhost
      port: 5432
      user: postgres
      password: secret


Enter fullscreen mode Exit fullscreen mode

Importante! Não esqueça de alterar as configurações do host, port, user e password de acordo com as do banco que você irá utilizar!

Depois de alterado, o arquivo deverá estar assim:

Arquivo app-config.local.yaml configurado

Para aplicar as novas configurações, é só parar o Backstage (Control+C) e iniciá-lo novamente (yarn dev).

Configurando os repositórios

O Backstage possui um arquivo chamado app-config.yaml. É nele que estão as configurações que iremos alterar.

Configurando o Github como repositório

Ao abrir o arquivo app-config.yaml, localize a seção integrations:

Seção integrations do arquivo app-config.yaml

Você verá que o arquivo já está preparado para integrar com o Github - para isto basta apenas criar uma variável de ambiente com o nome GITHUB_TOKEN, e atribuir a ela o seu Personal Access Token.

Se você não quiser ou não puder criar uma variável de ambiente, pode inserir no próprio arquivo o seu token no lugar da variável GITHUB_TOKEN. Dessa forma, ele ficará assim:

Token do Github inserido no arquivo app-config.yaml

Configurando o Azure como repositório

A configuração do Azure é basicamente a mesma que a do Github. A diferença é que como não existe uma seção para o Azure dentro da seção integrations, você terá que criá-la. E, do mesmo jeito que no Github, você poderá utilizar uma variável de ambiente para armazenar seu Personal Acess Token (informando ela no arquivo de configuração), ou inserir o token diretamente no arquivo.

Dica: O host do Azure é o dev.azure.com!

Se fizer usando a variável de ambiente, seu arquivo ficará assim:

Configurando o Azure no Backstage

Pronto! Com essa configuração já podemos partir para o próximo passo: demonstrar como criar templates de software para o desenvolvimento de novas aplicações. Mas isso é assunto para o próximo post.

Bem, por hora é isso... como sempre, comentários, críticas e sugestões são sempre bem-vindos.

Grande abraço, e até mais!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay