NodeJS et NPM

Node.js et npm : Les Outils du Web Designer Moderne

En une phrase : Node.js te permet d'utiliser des outils de dev web (Vite, Tailwind, etc.) et npm gère l'installation de ces outils. Point. 🎯

Pourquoi Tu Dois Connaître Ça ? 🤔

Situation classique de designer en 2025 :

❌ Avant (2010) : Tu codes en HTML/CSS direct, tu refresh le navigateur, c'est bon.

✅ Maintenant : Tu veux utiliser :

Tailwind CSS → Besoin de npm
Vue.js / Nuxt → Besoin de npm
Vite (serveur de dev ultra rapide) → Besoin de npm
Autoprefixer (compatibilité navigateurs) → Besoin de npm

Bref : Si tu veux bosser avec des outils modernes (et pas coder comme en 2005), tu DOIS avoir Node.js et npm. 💀

C'est Quoi Node.js ? 🟢

La version simple :

Node.js = JavaScript qui tourne en dehors du navigateur (sur ton PC directement)
Ça permet d'exécuter des outils de développement web
C'est comme le moteur qui fait tourner toutes les apps de dev

Analogie :

Photoshop = outil pour designer
Node.js = outil pour développer/builder des sites web

Tu ne vas PAS coder en Node.js (t'es pas dev backend), mais tous tes outils de design/intégration web ont besoin de Node.js pour fonctionner.

C'est Quoi npm ? 📦

npm = Node Package Manager

En gros : Le "store d'applications" pour les outils de développement web.

Exemples concrets :

# Installer Tailwind CSS
npm install tailwindcss

# Installer Vue.js
npm install vue

# Créer un projet Nuxt
npm create nuxt@latest

Analogie :

npm = App Store / Google Play
Les "packages" = les apps que tu télécharges

Note : npm est installé automatiquement avec Node.js. T'as pas besoin de l'installer séparément. 👍

Vérifier Si Node.js est Installé 🔍

Ouvre le terminal Laragon et tape :

node --version

Si t'as un numéro qui s'affiche (genre v20.11.0), c'est bon, Node.js est installé ! ✅

Vérifie npm aussi :

npm --version

Exemple de résultat attendu :

C:\Users\thibs
λ node --version
v20.11.0

C:\Users\thibs
λ npm --version
10.2.4

Si tu vois des numéros → Everything is fine. 😎

Si tu vois "command not found" ou une erreur → Faut installer/mettre à jour Node.js (voir section suivante).

Mettre à Jour Node.js dans Laragon 🔄

Laragon vient avec une version de Node.js, mais elle peut être ancienne. Voici comment installer la dernière version.

Étape 1 : Télécharger Node.js

Va sur le site officiel : https://nodejs.org
Télécharge la version LTS (Long Term Support = stable et recommandée)
ATTENTION : Choisis "Standalone Binary (.zip)", PAS l'installeur Windows !

Où trouver le Standalone Binary ?

Sur la page de téléchargement
Télécharge la version Windows x64 (.zip)

Étape 2 : Décompresser l'Archive

Une fois le fichier .zip téléchargé, extrais-le
Tu devrais avoir un dossier avec dedans : node.exe, npm, etc.

Étape 3 : Placer dans Laragon

Ouvre le dossier d'installation de Laragon (par défaut : C:\laragon)
Va dans le dossier bin\nodejs\
Colle ton dossier Node.js décompressé ici

Structure finale :

C:\laragon\
+-- bin\
    +-- nodejs\
        |-- nodejs-20.11.0\    (ancienne version)
        +-- nodejs-22.0.0\     (nouvelle version)
            |-- node.exe
            |-- npm
            +-- ...

Étape 4 : Sélectionner la Version dans Laragon

Ouvre Laragon
Clique sur Menu (en haut à droite) ou clic droit sur l'icône Laragon
Va dans Node.js → Version
Sélectionne ta nouvelle version (genre nodejs-22.21.0)
Laragon va redémarrer automatiquement

Étape 5 : Vérifier que Ça Marche

Ouvre le terminal Laragon et vérifie :

node --version

Tu devrais voir ta nouvelle version ! 🎉

C:\Users\thibs
λ node --version
v22.21.0

Si ça affiche toujours l'ancienne version :

Rouvre un nouveau terminal

Les Commandes npm de Base (Que Tu Vas Utiliser Souvent) ⚡

Tu vas pas devenir expert npm, mais voici les 5 commandes que tu DOIS connaître :

1. `npm install` - Installer les Dépendances

Quand ? Quand tu télécharges un projet existant (GitHub, GitLab, etc.)

# Installe tous les packages listés dans package.json
npm install

Ce que ça fait : Télécharge toutes les dépendances du projet dans le dossier node_modules/.

2. `npm install <package>` - Installer UN Package

Quand ? Quand tu veux ajouter un outil à ton projet

# Installer Tailwind CSS
npm install tailwindcss

# Installer plusieurs packages d'un coup
npm install tailwindcss autoprefixer postcss

3. `npm run dev` - Lancer le Serveur de Développement

Quand ? Quand tu veux bosser sur ton projet (hot reload, etc.)

npm run dev

Ce que ça fait : Lance ton projet en mode développement (généralement sur http://localhost:5173 ou similaire)

4. `npm run build` - Builder pour la Production

Quand ? Quand tu veux déployer ton site en ligne

npm run build

Ce que ça fait : Crée une version optimisée et compressée de ton site dans un dossier dist/ ou build/.

5. `npm create <template>` - Créer un Nouveau Projet

Quand ? Quand tu démarres un nouveau projet from scratch

# Créer un projet Vue
npm create vue@latest

Ce que ça fait : Lance un assistant interactif pour générer la structure de base du projet.

Le Fichier `package.json` (Juste pour Comprendre) 📄

Quand tu crées un projet avec npm, tu vas trouver un fichier package.json à la racine.

C'est quoi ? Le "carnet de bord" de ton projet qui liste :

Les dépendances (packages installés)
Les scripts disponibles (dev, build, etc.)
Les infos du projet (nom, version, etc.)

Exemple simplifié :

{
  "name": "mon-projet",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "tailwindcss": "^3.4.0"
  }
}

Ce que tu dois retenir :

scripts = les commandes que tu peux lancer avec npm run
dependencies = la liste des packages installés

Tu ne vas PAS éditer ce fichier manuellement (sauf cas rares). npm le gère pour toi. 👌

Le Dossier `node_modules/` (À Ignorer) 📁

Quand tu fais npm install, un gros dossier node_modules/ apparaît.

C'est quoi ? Tous les packages téléchargés (peut peser 200-500 MB facile).

Ce que tu dois faire avec : RIEN. 🚫

❌ Ne le commite PAS sur Git
❌ Ne l'édite PAS manuellement
❌ Ne le partage PAS (trop gros)

Pourquoi ? Parce que n'importe qui peut recréer ce dossier en faisant npm install avec le fichier package.json.

Règle d'or : Si tu partages ton projet, tu partages package.json, PAS node_modules/. 📦

Récap' : Ce Que Tu Dois Retenir 🎯

Concept	C'est Quoi ?	Pourquoi Tu T'en Fous (ou Pas)
Node.js	Moteur JavaScript	Tu le lances jamais directement, mais t'en as besoin pour npm
npm	Gestionnaire de packages	Tu l'utilises TOUT LE TEMPS (install, run, etc.)
package.json	Fichier de config	npm le gère, tu le lis juste de temps en temps
node_modules/	Dossier des packages	Tu l'ignores complètement
npm install	Installe les dépendances	Commande #1 quand tu récupères un projet
npm run dev	Lance le serveur de dev	Commande #2 pour bosser sur ton projet

Prochaines Étapes 🚀

Maintenant que Node.js et npm sont opérationnels, tu es prêt pour :

✅ Créer ton premier projet Vue.js
✅ Installer Tailwind CSS
✅ Lancer un serveur de développement avec Vite
✅ Utiliser des outils modernes comme un pro

Let's gooo ! 🔥

Ressources Utiles 📚

Site officiel Node.js - Télécharger les nouvelles versions
Documentation npm - Si tu veux creuser
npm Package Search - Trouver des packages

Note : Tu vas pas lire la doc npm de A à Z (personne le fait). Tu cherches juste ce dont t'as besoin quand t'en as besoin. 😎

NodeJS et NPM

Node.js et npm : Les Outils du Web Designer Moderne

Pourquoi Tu Dois Connaître Ça ? 🤔#

C'est Quoi Node.js ? 🟢#

C'est Quoi npm ? 📦#

Vérifier Si Node.js est Installé 🔍#

Mettre à Jour Node.js dans Laragon 🔄#

Étape 1 : Télécharger Node.js#

Étape 2 : Décompresser l'Archive#

Étape 3 : Placer dans Laragon#

Étape 4 : Sélectionner la Version dans Laragon#

Étape 5 : Vérifier que Ça Marche#

Les Commandes npm de Base (Que Tu Vas Utiliser Souvent) ⚡#

1. npm install - Installer les Dépendances#

2. npm install <package> - Installer UN Package#

3. npm run dev - Lancer le Serveur de Développement#

4. npm run build - Builder pour la Production#

5. npm create <template> - Créer un Nouveau Projet#

Le Fichier package.json (Juste pour Comprendre) 📄#

Le Dossier node_modules/ (À Ignorer) 📁#

Récap' : Ce Que Tu Dois Retenir 🎯#

Prochaines Étapes 🚀#

Ressources Utiles 📚#