Afficher le hash du commit

Nous allons mettre en place un système pour récupérer et afficher la version avec le hash du commit des projets Front et Back sur lesquels nous travaillons.

Vous allez comprendre pourquoi cela est important d'accéder rapidement à la version de votre application.

Introduction

Une version correspond à un commit

Dans un projet web nous déployons souvent notre application sur un serveur d'intégration, de recette ou de production.

Ces déploiements ont chacun leur règle, par exemple :

Le serveur d'intégration va refléter la branche develop du repository git, avec un décalage le temps que la pipeline de la CI/CD se termine.
Le serveur de recette représentera un tag sur git et se déploiera en fin de Sprint.
Le serveur de production représentera la branche master.

Dans tous ces cas, nous savons que la version déployée correspond à un certain commit sur notre repository.

Une version précise

Dans un projet web, il est nécessaire que toutes les personnes qui ont accès à votre application (utilisateurs, développeurs et testeurs) puissent vérifier la version utilisée.

Mais se baser seulement sur la version du package NPM est insuffisant, il est nécessaire de connaitre précisément la version avec le hash du commit.

Connaitre cette précision permet de :

Vérifier qu'un déploiement a bien eu lieu
Vérifier que c'est bien la version voulue qui a été déployée
Aider les testeurs à déclarer des anomalies pour une certaine version de l'application
Aider le développeur à reproduire l'environnement d'un serveur en local (Afin de reproduire une anomalie par exemple)
Aider le support à décrire le retour d'un utilisateur

Pour répondre à ce besoin, nous allons afficher dans la console du navigateur la version précise de votre projet Front et Back.

Générer un fichier project-version

Nous allons mettre en place un script qui va récupérer le hash du commit. Pour toujours être à jour, nous exécuterons ce script avant de lancer notre application (Pour le développement) et avant de build notre application (Pour le déploiement).

Une fois le hash du commit récupéré, le script générera un fichier qui contiendra les informations nécessaires pour identifier la version de notre projet.

Voici le fichier que nous voulons générer dans notre application Front ET Back.

// Generated
export const PROJECT_VERSION = {
    npmName: "project-back",
    npmVersion: "1.0.1",
    commitHash: "0624c8c7d76d98ebe96e425f0d6dfcf34c8a6ca6"
}

Fichier project-version.ts (Généré automatiquement)

L'avantage de générer un fichier Typescript, c'est que nous allons pouvoir l'importer facilement dans notre code et profiter du typage.

Ecriture du script generate-project-version-file.js

Le script qui génère le fichier project-version.ts se divise en trois étapes :

Récupération du package.json (Pour le nom et la version du projet)
Récupération du hash du commit
Ecriture du fichier project-version.ts

Ajoutez le fichier .scripts/generate-project-version-file.js dans les deux projets avec le contenu ci-dessous.

Mettre à jour le .gitignore

Dans les deux projets, ignorez le fichier project-version.ts en ajoutant la ligne suivante dans le fichier .gitignore.


...
/src/project-version/project-version.ts

Fichier .gitignore

Mettre à jour le .gitignore

Pour exécuter ce script javascript, rajoutez dans le package.json des deux projets un script "generate-project-version-file" et les hooks NPM associés au lancement et au build de votre projet.


"scripts": {
	"generate-project-version-file": "node .scripts/generate-project-version-file.js",
	"prestart": "npm run generate-project-version-file",
	"prebuild": "npm run generate-project-version-file",
	//...    
}

Fichier package.json

A partir de maintenant, votre fichier project-version.ts sera généré à chaque `npm start` ou `npm run build`.

Création d'un endpoint

Pour que le front récupère la version du projet back, nous avons besoin de définir un endpoint public. Voici un exemple avec Nest.js.


import { Controller, Get } from "@nestjs/common";
import { PROJECT_VERSION } from "src/project-version/project-version";

@Controller()
export class PublicController {
    @Get('project-version')
    getProjectVersion() {
        return PROJECT_VERSION
    }
}

Fichier public.controller.ts

Création d'un endpoint

Dans Angular, nous allons créer un service pour récupérer et afficher facilement les versions des différents projets.

La récupération de la version du projet Angular est simple, car il suffit d'importer le fichier Typescript.

Pour récupérer la version du projet Nest.js, nous devons appeler le endpoint 'project-version'.


import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PROJECT_VERSION } from 'src/project-version/project-version';

@Injectable({
  providedIn: 'root'
})
export class ProjectVersionService {

  constructor(private httpClient: HttpClient) { }

  getAngularProject() {
    return PROJECT_VERSION
  }

  getNestProject() {
    return this.httpClient.get('http://localhost:3000/project-version')
  }

  logProject(projectVersion: typeof PROJECT_VERSION) {
    console.log(projectVersion.npmName, projectVersion.npmVersion, projectVersion.commitHash.substring(0, 7))
  }

}

Fichier project-version.service.ts

Il ne nous reste plus qu'à afficher les versions au démarrage de notre application, ici dans le AppComponent pour Angular (On aurait pu aussi utiliser le APP_INITIALIZER).


import { Component } from '@angular/core';
import { ProjectVersionService } from './services/project/project-version.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private projectVersionLogService: ProjectVersionService) {
    // Affichage de la version du projet front
    const angularProject = projectVersionLogService.getAngularProject()
    projectVersionLogService.logProject(angularProject)

    // Affichage de la version du projet back
    projectVersionLogService.getNestProject().subscribe((nestProject => {
      projectVersionLogService.logProject(nestProject)
    }))
  }
}

Fichier app.component.ts

Maintenant lorsque l'utilisateur accède à l'application, les versions des deux projets sont affichées dans la console.

Lorsque l'utilisateur accède à l'application, les versions du Front et du Back sont disponibles dans la console.

Conclusion

C'est fait, vous avez mis en place un système qui permet aux utilisateurs de votre application de vérifier rapidement la version du projet Front et Back, que ce soit en local ou sur différents environnements.

Abonnez vous pour ne pas rater les nouveaux articles !