Installation d'ExpressJS

Vérification de l'installation de Node.js et npm

Exécutez les commandes suivantes dans votre terminal pour vérifier si Node.js et npm sont installés :

📋 Copier le code

node -v
v22.13.0

npm -v
10.9.2

Si vous obtenez un numéro de version, cela signifie que Node.js et npm sont correctement installés.

Comprendre npm

npm (Node Package Manager) est le gestionnaire de paquets officiel de Node.js.

Il permet d’installer et de gérer des bibliothèques JavaScript pour les applications web, mobiles et bien plus encore.

Vous pouvez consulter les paquets disponibles sur le site officiel : npmJS.

Installation des paquets avec npm

Il existe deux façons d’installer un paquet avec npm :

Installation Globale

Utilisée pour installer des outils de développement et des packages CLI.

📋 Copier le code

npm install -g <nom-du-package>

Installation Locale

Utilisée pour installer des frameworks et bibliothèques au sein d’un projet spécifique.

📋 Copier le code

npm install <nom-du-package>

Que signifie l'option -g dans npm install ?

Dans la commande npm install -g <nom-du-package>, l'option -g signifie "global". Cela indique que le package doit être installé globalement sur le système plutôt que localement dans un projet spécifique.

🔹 Différence entre installation globale et locale

🔹 Quand utiliser -g ?

Vous devez installer un package globalement lorsque :

• Vous utilisez des outils en ligne de commande (CLI) comme nodemon, gulp, npm-check.
• Vous voulez un framework accessible dans plusieurs projets sans avoir à le réinstaller.
• Vous souhaitez exécuter un outil depuis n'importe quel répertoire.

🔹 Exemples

✅ Installation globale de Nodemon

📋 Copier le code

npm install -g nodemon

Après installation, vous pouvez exécuter nodemon directement dans le terminal, peu importe où vous êtes.

✅ Installation locale d'Express

📋 Copier le code

npm install express

Cette commande installe Express uniquement dans le projet actuel et l’ajoute aux dépendances du package.json.

🔹 Bon à savoir

• Voir les packages installés globalement :

  📋 Copier le code

  npm list -g --depth=0
  

• Désinstaller un package global :

  📋 Copier le code

  npm uninstall -g <nom-du-package>
  

• Changer le dossier global de npm pour éviter sudo sous Linux/macOS :

  📋 Copier le code

  npm config set prefix ~/.npm-global
  

🔎 Conclusion

L’option -g est essentielle pour les outils CLI. Toutefois, pour les bibliothèques utilisées uniquement dans un projet, il vaut mieux les installer localement sans -g. 🚀

Création d'un Projet ExpressJS

Étape 1 - Création d'un répertoire

Dans votre terminal, créez un dossier nommé hello-world et accédez-y, pour ceci tappez le code qui suit dans votre terminal :

📋 Copier le code

mkdir hello-world
cd hello-world

mkdir crée le dossier "hello-world" et cd pour accéder au dossier créé

Étape 2 - Génération du fichier package.json

Utilisez la commande suivante pour générer le fichier package.json :

📋 Copier le code

npm init

Vous serez invité à entrer plusieurs informations. Vous pouvez simplement appuyer sur Entrée pour accepter les valeurs par défaut.

Comprendre le fichier package.json

Le fichier package.json est un élément clé d'un projet Node.js. Il contient des informations sur votre projet et ses dépendances.

🔹 Champs essentiels de package.json

• name : Le nom du projet.
• version : Version actuelle de votre projet.
• description : Courte description de votre projet.
• main : Fichier d'entrée principal (ex : index.js).
• scripts : Commandes npm personnalisées (ex : npm start).
• dependencies : Liste des bibliothèques utilisées dans le projet.
• devDependencies : Dépendances utilisées uniquement en développement.

Voici un exemple de package.json :

📋 Copier le code

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "Un projet ExpressJS",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  },
  "author": "Votre Nom",
  "license": "ISC"
}

Installation d'Express

Pour installer Express et l’ajouter à votre projet, exécutez :

📋 Copier le code

npm install --save express

--save pour ajouter express comme dépendance dans le fichier package.json

Astuce : Vous pouvez utiliser -S au lieu de --save. Express sera alors ajouté comme dépendance dans package.json.

Installation de Nodemon

Nodemon est un outil utile qui redémarre automatiquement le serveur à chaque modification de fichier.

Installez-le globalement avec :

📋 Copier le code

npm install -g nodemon

Vous êtes maintenant prêt à commencer votre développement avec ExpressJS ! 🚀

🚀 Optimisation des Commandes avec npx

Avec les versions récentes de Node.js et npm, il est possible d'éviter d'installer certains outils globalement grâce à npx. Cela permet d'exécuter des paquets npm sans les installer définitivement sur votre machine.

🔹 Pourquoi utiliser npx ?

• ✅ Évite d'installer des paquets globalement.
• ✅ Assure que vous utilisez toujours la dernière version disponible.
• ✅ Réduit les conflits entre différentes versions d'un même package.

📌 Exemple : Utiliser Nodemon sans Installation Globale

Normalement, pour installer nodemon de manière globale, vous utilisez :

📋 Copier le code

npm install -g nodemon
    

Avec npx, il suffit d'exécuter directement :

📋 Copier le code

npx nodemon index.js
    

📌 Autres Cas d'Utilisation de npx

• Créer un projet React sans installer Create React App :
  

  📋 Copier le code

  npx create-react-app my-app
              

• Exécuter ESLint sans installation :
  

  📋 Copier le code

  npx eslint myfile.js
              

🔎 Conclusion

L'utilisation de npx simplifie l'exécution de nombreux outils sans installation permanente. C'est une solution idéale pour tester rapidement des paquets ou éviter d'encombrer son environnement de développement avec des installations inutiles. 🚀

🚀 Mini-Projet Démo : Serveur Express.js

Nous allons créer une petite application Express qui affiche un message lorsqu'on accède à la page d'accueil.

📌 Étape 1 - Création du Fichier server.js

Créez un fichier server.js à la racine de votre projet et collez le code suivant :

📋 Copier le code

const express = require('express');
const app = express();

// Définition du port
const PORT = 3000;

// Route principale
app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

// Démarrage du serveur
app.listen(PORT, () => {
    console.log(`Serveur démarré sur http://localhost:${PORT}`);
});
    

📌 Étape 2 - Installation des Dépendances

Installez Express dans votre projet avec la commande suivante :

📋 Copier le code

npm install express
    

📌 Étape 3 - Exécution du Serveur

Démarrez votre serveur avec :

📋 Copier le code

node server.js
    

📌 Étape 4 - Tester l’Application

Ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir le message "Hello, Express!" s'afficher.

🎯 Bonus : Utiliser Nodemon

Pour éviter de redémarrer manuellement le serveur après chaque modification, installez nodemon :

📋 Copier le code

npm install -g nodemon
    

Puis exécutez le serveur avec :

📋 Copier le code

nodemon server.js
    

🚀 Conclusion

Félicitations ! 🎉 Vous venez de créer et d'exécuter votre premier serveur Express.js. Cette base vous servira pour des projets plus avancés, comme la gestion des routes et l'interaction avec une base de données.