Finalisez la configuration de votre environnement

Votre base de données PostgreSQL fonctionne dans son conteneur Docker et vos dépendances Node.js sont installées. Pour achever la préparation de votre poste de travail, vous allez configurer Visual Studio Code, démarrer l'application web de la librairie et procéder à la recette technique officielle.

Dans ce chapitre, vous allez paramétrer VS Code avec le linter ESLint et des extensions d'accessibilité, exécuter l'application  Node.js  sur  localhost  , vérifier sa connexion à la base de données et constituer le dossier de preuves indispensables à la validation de votre installation.

Configurez VS Code et ses extensions de linter

Visual Studio Code (VS Code) est l'éditeur de code de référence pour le développement web. Pour garantir la qualité du code au sein de l'équipe de la librairie, vous devez le personnaliser avec des extensions adaptées.

L'extension principale à installer est ESLint.

Pour l'intégrer :

1. Ouvrez le panneau Extensions (Ctrl+Shift+X ou Cmd+Shift+X).

2. Recherchez ESLint (édité par Microsoft) et cliquez sur Installer.

3. Vérifiez qu'ESLint souligne directement dans votre éditeur les anomalies détectées dans les fichiers JavaScript du projet.

En complément, l'accessibilité web est un enjeu majeur pour le site de la librairie. Installez une extension comme axe DevTools, qui vous aide à repérer les oublis d'attributs alt sur les images, les boutons sans libellé ou les champs sans étiquette. Les contrastes de couleurs, eux, se vérifient dans le navigateur, par exemple avec l'extension axe DevTools.

Enfin, ajustez quelques paramètres visuels dans vos réglages (  settings.json  ) pour optimiser votre productivité :

• Activereditor.formatOnSave: truepour réaligner le code à chaque enregistrement.

• Choisir un thème sombre lisible (Dark+) et ajuster la taille de police (editor.fontSize).

Exécutez l'application Node.js en local

Votre éditeur est paramétré et votre conteneur PostgreSQL est actif. Vous allez à présent lancer le serveur d'application  Node.js  .

Ouvrez le terminal intégré de VS Code (  `Ctrl+``  ) à la racine du projet et lancez la commande de démarrage :

npm run start

Le serveur lit les variables d'environnement inscrites dans le fichier  .env  (  DB_HOST=localhost, DB_PORT=5432, DB_USER, DB_PASSWORD, DB_NAME  ) et établit la connexion avec la base de données PostgreSQL conteneurisée.

Observez les sorties du terminal. Vous devez lire des messages de confirmation :

[Server] Serveur Node.js démarré sur le port 3000
[Database] Connexion réussie à la base de données PostgreSQL (librairie_db)

Ouvrez votre navigateur web et naviguez vers l'adresse :

http://localhost:3000

Le site de la librairie s'affiche, présentant le catalogue de produits extrait de la base PostgreSQL.

Vérifiez que votre conteneur Docker est bien actif avec  docker compose ps  et que vos identifiants dans le fichier  .env  correspondent à la base.

Vérifiez aussi que les variables  DB_*  sont bien présentes dans  .env  .

Dans cette vidéo tutoriel, vous allez observer le lancement de l'application Node.js et la vérification de sa communication avec la base de données PostgreSQL. L'objectif est de contrôler chaque étape du démarrage jusqu'au rendu final sur le navigateur.

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

• Exécution de npm start dans le terminal de VS Code : Montre le démarrage du serveur Node.js et la lecture du fichier.env.

• Analyse des logs de démarrage du serveur : Permet de vérifier la confirmation de connexion entre Node.js et le conteneur PostgreSQL.

• Ouverture du navigateur sur http://localhost:3000: Illustre l'affichage de la page d'accueil de la librairie et le chargement dynamique des produits.

• Navigation sur une fiche produit et vérification des données : Montre l'interaction directe entre l'interface web, le serveur Node.js et la base de données.

En résumé, ce screencast vous permet de valider le fonctionnement de la chaîne applicative. Votre environnement local est opérationnel, il reste à formaliser votre recette technique.

Validez votre environnement avec les preuves officielles

Pour attester auprès de l'équipe technique que votre poste de travail est 100 % opérationnel, vous devez constituer un dossier de validation. Cette étape unique de recette évite les vérifications dispersées.

Le dossier de validation repose sur deux éléments indissociables :

1. La checklist de recette Oui/Non : Un tableau récapitulatif validant chaque composant de votre environnement.

2. Les trois captures d'écran de preuve obligatoires : Des preuves visuelles datées et légendées.

Voici le détail des trois captures d'écran de preuve à fournir :

• Preuve 1 : Outils CLI installés
  Capture du terminal affichant les versions des outils via la commande :

node -v && npm -v && git --version && docker --version

• Preuve 2 : Conteneur Docker actif
  Capture du terminal exécutantdocker compose psmontrant le conteneurlibrairie-dben statutUpavec le port5432redirigé.

• Preuve 3 : Application fonctionnelle sur localhost Capture du navigateur web affichant le site de la librairie surhttp://localhost:3000.

À vous de jouer !

Contexte :

Vous avez cloné le projet de la librairie , déployé la BDD PostgreSQL dans son conteneur Docker, configuré VS Code avec ESLint et lancé l'application  Node.js  sur  localhost  . Vous devez transmettre à votre responsable la preuve officielle que votre poste est opérationnel.

Consigne :

Remplissez la checklist de validation Oui/Non et joignez les trois captures d'écran légendées requises.

En résumé

• La configuration de VS Code avec ESLint et des outils d'accessibilité garantit la qualité du code au sein de l'équipe.

• Le lancement de l'application Node.js vianpm startinitialise le serveur web et valide la connexion avec la base de données PostgreSQL conteneurisée.

• L'accès àhttp://localhost:3000permet de vérifier le rendu fonctionnel du site et la restitution dynamique des données.

• La formalisation de la checklist Oui/Non associée aux trois captures d'écran de preuve (outils CLI, conteneur Docker actif, site surlocalhost) constitue la recette officielle de votre environnement.

Félicitations ! Votre environnement de développement est entièrement configuré et validé. Rejoignez-moi dans le chapitre suivant pour résoudre les dysfonctionnements de l'environnement !