Como adicionar informações do Git no ReactJS

Victhor Araújo
Mar 26 · 3 min read

Como todo desenvolvedor, gosto de navegar por páginas que considero oferecer uma boa experiência ao usuário como inspiração de novas features a serem implementadas em meus projetos.

Dando essa espiada na plataforma do QuintoAndar.com, vi algo que me chamou a atenção na última linha do footer da aplicação.

Achei bastante interessante apresentar a data da última versão ao usuário. Por diversas vezes é mostrado a versão com o padrão numérico (ex: Versão 1.17.06), que traz pouco ao usuário final sobre quão frequente/atualizado está a aplicação.

Gostei da ideia, hora de replicar!

A primeira ideia foi buscar a informação diretamente do Git, buscando o último commit enviado a uma determinada branch. No terminal é bem simples executar este:

git log <your-branch> -1

Onde <your-branch> deve ser substituído pela branch que você deseja monitorar (como a master, por exemplo).

Entretanto, o comando acima retorna todas as informações relacionadas ao último commit, incluindo várias informações que não são necessárias para o que desejamos implementar (por exemplo autor, hash, etc). Vamos aplicar alguns filtros para recuperar apenas a data formatada do commit .

git log master -1 — date=format:”%d/%m/%Y %T” — format=”%ad”

Agora sim! No meu caso retornou apenas “10/03/2020 09:51:39”.

Bem, mas executar essa informação no Terminal não é nosso objetivo. Precisamos que esta informação esteja disponível nos scripts de start e build da nossa aplicação. Para isto, adicionei um novo script no package.json da aplicação com a finalidade de criar um arquivo com o retorno da execução do comando acima. Posteriormente, editei o script de start e build para que estes só sejam executados após o comando de geração do git-info.

Assim ficou o trecho de scripts do package.json:

“scripts”: {
“git-info”: “echo export default \”{\\\”logMessage\\\”: \\\”$(git log master -1 — date=format:’%d/%m/%Y %T’ — format=’%ad’)\\\”}\” > src/_git_commit.js”,
“start”: “yarn git-info; react-scripts start”,
“build”: “yarn git-info; react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”
},

O git-info gera um arquivo em src/_git_commit.js com as informações atualizadas do último commit monitorado na branch master, todas as vezes que executo o script de start ou build. Este arquivo tem uma estrutura muito simples (e similar ao comando rodado anteriormente no Terminal).

export default {“logMessage”: “10/03/2020 09:51:39”}

Agora ficou fácil! Só importar o componente no arquivo que deseja apresentar os dados. Replicando, inclui os dados abaixo no meu arquivo:

import GitCommit from ‘./_git_commit’;<Section>
<span>QuintoAndar Serviços Imobiliários Ltda.</span>
<span>
CRECI-SP J24.344 (Ver outros) •{‘ ‘}
<Link to=”/”>Termos e Privacidade</Link>
</span>
<span>Versão: {GitCommit.logMessage}</span>
</Section>

E meu footer ficou assim:

Tchau brigado!

Victhor Araújo

Written by

Empreendedor, engenheiro, apaixonado por leitura e JS

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade