Gérez le projet avec Git et GitHub

Vous rejoignez l'équipe technique en tant que développeur web junior sur le projet d'application la librairie "Au fil des pages". Votre première mission consiste à récupérer le codebase source et à préparer votre espace de travail sans altérer la branche principale ni gêner les autres développeurs de l'équipe. Dans ce chapitre, vous allez apprendre à dupliquer le dépôt officiel, à isoler vos développements sur une branche dédiée, à installer les dépendances du projet Node.js via npm et à auditer la sécurité de ces modules.

Pourquoi tant de précautions ?

Sur un projet réel, plusieurs développeurs modifient le même code en même temps. Git, un système de gestion de versions distribué, enregistre chaque modification dans un historique de commits : on sait qui a changé quoi, quand et pourquoi, et l'on peut revenir en arrière. GitHub ajoute la couche collaborative : chacun travaille sur sa propre copie et sa propre branche, puis propose ses modifications via une Pull Request, relue par l'équipe avant d'être fusionnée. C'est ce qui permet de travailler en parallèle sans écraser le travail des autres.

Clonez le dépôt de l'application Au fil des pages

Pour collaborer sereinement au sein d'une équipe, vous devez distinguer trois espaces d'hébergement :

  1. Le dépôt source principal (Upstream) : Le dépôt officiel de la librairie géré par l'organisation GitHub.

  2. Votre Fork distant (Origin) : Votre copie personnelle du dépôt sur GitHub, sur laquelle vous disposez des droits d'écriture.

  3. Votre Clone local : La copie physique rapatriée sur le disque dur de votre poste de travail.

Commencez par effectuer un Fork du dépôt officiel depuis l'interface GitHub. Une fois cette copie distante créée sur votre compte, ouvrez votre terminal et exécutez la commande  git clone  suivie de l'URL de votre fork :

git clone https://github.com/votre-nom-utilisateur/Au-fil-des-pages.git
cd Au-fil-des-pages

Après le clonage, inspectez l'arborescence pour repérer les fichiers structurants du projet Node.js :

  • le manifeste  package.json  ,

  • le répertoire des sources et les scripts de test.

  • le serveur  server.js  , les dossiers  public/  et  views/

  • le dossier  db/init/  et le fichier  docker-compose.yml  .

Déclarez ensuite le dépôt officiel comme second dépôt distant, nommé upstream. Il vous permettra de récupérer régulièrement le travail intégré par vos collègues :

git remote add upstream https://github.com/organisation/Au-fil-des-pages.git
git pull up stream main

Dans cette vidéo tutoriel, vous allez observer la réalisation pas à pas des opérations de récupération du projet de la librairie depuis GitHub jusqu'à votre terminal local. L'objectif est de visualiser le déroulement fluide des commandes et l'inspection de l'arborescence clonée.

Voici les étapes clés présentées dans cette démonstration :

  • Fork du dépôt depuis l'interface web de GitHub : Montre la duplication du projet central vers votre compte personnel afin d'isoler vos futurs droits d'écriture.

  • Copie de l'URL HTTPS du fork et exécution de git clone dans le terminal : Illustre le téléchargement intégral de l'historique et des fichiers du projet sur votre machine.

  • Vérification des dépôts distants avec git remote -v: Permet de contrôler que l'aliasorigincorrespond bien à l'adresse de votre fork distant.

  • Inspection du répertoire cloné en ligne de commande : Montre l'utilisation dels -lapour repérer le dossier caché.git, le manifestepackage.jsonet les fichiers sources.

En résumé, ce screencast vous permet de visualiser la transition entre GitHub et votre terminal. Maintenant que votre dépôt local est prêt, vous allez pouvoir isoler vos travaux sur une branche dédiée.

Appliquez le workflow Git sur une branche dédiée

Pour préserver la stabilité du code et travailler en parallèle avec vos collègues, vous ne devez pas développer sur la branche principale (main). Vous devez créer une branche dédiée à chaque nouvelle fonctionnalité.

Pour créer et basculer sur votre branche de travail, exécutez :

git switch -c feature/env-setup

Au fur et à mesure de votre avancement, enregistrez vos modifications sous forme de commits clairs et isolés :

git status 
git add <fichier-modifié>
git commit -m "feat: initialisation du projet et des configurations"

git status  vous indique la branche active et les fichiers modifiés : vérifiez-le avant chaque commit. Ajoutez les fichiers nommément plutôt qu'avec  git add  : vous évitez ainsi de commiter par erreur un fichier sensible comme  .env  . Pour consulter l'historique du projet, utilisez  git log --oneline  .

 

Publiez ensuite votre branche de travail sur votre fork distant :

git push -u origin feature/env-setup

Enfin, rendez-vous sur GitHub pour ouvrir une Pull Request (PR). La Pull Request permet de soumettre vos modifications aux autres développeurs de la librairie afin qu'ils revoient votre code avant son intégration dans le projet principal.

Schéma illustrant le flux collaboratif Git/GitHub en 7 étapes. Étape 1 : Fork du dépôt principal de la libraire vers votre compte GitHub. Étape 2 : Clonage local sur votre machine. Étape 3 : Création de la branche locale feature/env-setup. Étape
Schéma du flux collaboratif Git/GitHub

Installez les dépendances du projet avec npm

L'application de la libraire s'appuie sur des modules externes gérés par npm (Node Package Manager).

Le fichier   package.json  situé à la racine du projet liste toutes les bibliothèques requises pour l'exécution (  dependencies  ) et le développement (  devDependencies  ).

Pour installer l'ensemble des modules déclarés, lancez à la racine du projet :

npm install

Cette commande télécharge les paquets dans le répertoire node_modules et génère le fichier  package-lock.json  .

Le fichier  package-lock.json  enregistre l'arbre de dépendances exact et les versions précises de chaque module. Il garantit que tous les développeurs de l'équipe travaillent avec des dépendances strictement identiques.

Le fichier  package-lock.json  doit donc être commité avec le projet. Pour une installation strictement conforme à ce fichier (sur un poste neuf, par exemple), vous pouvez utiliser  npm  ci.

Diagramme montrant la structure des dépendances Node.js. package.json contient les paquets déclarés. La commande npm install télécharge les paquets dans node_modules/ et génère package-lock.json pour verrouiller les versions exactes et garantir un
Structure des dépendances Node.js

Auditez la sécurité des dépendances avec npm audit

Lorsque vous installez des modules externes, vous intégrez du code tiers dans l'application de la librairie. Il est donc indispensable de vérifier qu'ils ne comportent pas de vulnérabilités connues.

Pour lancer un audit de sécurité automatisé, exécutez :

npm audit

Cette commande compare l'arbre de dépendances du projet (décrit dans  package-lock.json  ) avec la base des vulnérabilités connues du registre  npm  (Low, Moderate, High, Critical).

Adoptez une démarche méthodique :

  • Analyser le rapport pour identifier les modules vulnérables.

  • Utilisernpm audit fixpour corriger automatiquement les failles sans rupture de version. Évitez en revanche  npm audit fix --force  : cette option peut installer des versions majeures incompatibles et casser l'application.

  • Traiter en priorité les vulnérabilités critiques avant tout déploiement en production.

À vous de jouer !

Contexte :

Vous venez d'intégrer l'équipe technique de la librairie. Votre responsable vous demande de configurer votre poste de travail à partir du dépôt d'entraînement de la librairie. Vous devez récupérer le code source, créer votre branche de travail dédiée et installer les dépendances Node.js.

Consigne :

Forkez le dépôt de la librairie, clonez-le en local, créez la branche feature/env-setup et installez les dépendances.

En résumé

  • Le forking et le clonage permettent de rapatrier une copie de travail autonome du projet de la librairie sur votre machine sans altérer le dépôt officiel.

  • L'utilisation d'une branche de fonctionnalité (git checkout -b) isole vos modifications et permet de soumettre votre travail via une Pull Request sur GitHub.

  • L'installation des paquets avecnpm installs'appuie surpackage.jsonpour identifier les dépendances et surpackage-lock.jsonpour garantir un arbre de dépendances identique au sein de l'équipe.

  • L'exécution denpm auditpermet d'analyser l'arbre des dépendances afin d'identifier et de corriger les vulnérabilités de sécurité connues.

Bravo pour cette première étape ! Votre environnement de code et vos dépendances Node.js sont prêts. Rejoignez-moi dans le chapitre suivant pour déployer votre base de données avec Docker.

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous