Module 4Préparer l'environnement de développement web
Chapitre 10 sur 12
VS Code, DevTools, PHP, Node.js, Composer, npm, .env, règles de qualité, environnements et Docker.
Objectifs
Avec ce chapitre, tu sauras…
.env et des règles de qualité (EditorConfig, Prettier, ESLint) ;:::savoir Un chapitre rédigé à partir du programme Le résumé théorique fourni s'arrête avant la partie 4. Ce chapitre suit l'intitulé officiel « Appréhender l'environnement de développement web ». Les commandes ont été testées avec Node.js 22, npm 10, PHP 8.3 et Composer 2.8. :::
Leçon 1
| Composant | Rôle | Exemples |
|---|---|---|
| éditeur ou IDE | écrire le code, avec coloration, autocomplétion, débogage | VS Code (gratuit), PhpStorm et WebStorm (JetBrains, gratuits pour les étudiants) |
| navigateurs et leurs outils de développement | afficher, inspecter et déboguer le front-end | Chrome, Firefox, Edge, Safari ; DevTools (F12) |
| serveur local | exécuter le back-end sur sa machine | XAMPP, Laragon, WAMP, MAMP ; serveur intégré php -S ; Docker |
| environnements d'exécution | faire tourner le langage | PHP ; Node.js (JavaScript côté serveur et outils front) |
| gestionnaires de dépendances | installer et mettre à jour les bibliothèques | Composer (PHP), npm (JavaScript) |
| base de données et client | stocker les données, les consulter | MySQL ou MariaDB, PostgreSQL ; phpMyAdmin, DBeaver, MySQL Workbench |
| gestion de versions | historique du code, travail en équipe | Git + GitHub ou GitLab (module M202) |
| test d'API | envoyer des requêtes HTTP à la main | Postman, Bruno, extension Thunder Client, curl |
| terminal | lancer les commandes | terminal intégré de VS Code, PowerShell, Git Bash |
Leçon 2
| Extension | Utilité |
|---|---|
| PHP Intelephense | autocomplétion et analyse du code PHP |
| ESLint | signale les erreurs et les mauvaises pratiques en JavaScript et TypeScript |
| Prettier | formate automatiquement le code (indentation, guillemets) à chaque enregistrement |
| GitLens | historique Git de chaque ligne |
| PlantUML ou Markdown Preview Mermaid | aperçu des diagrammes (chapitre 5) |
Leçon 3
| Onglet | Usage |
|---|---|
| Éléments | voir et modifier le HTML et le CSS en direct, tester une règle CSS |
| Console | messages console.log, erreurs JavaScript, exécuter du code |
| Réseau | toutes les requêtes HTTP : code d'état, en-têtes, temps de chargement, poids ; simuler une connexion lente |
| Sources | déboguer le JavaScript avec des points d'arrêt |
| Application | cookies, localStorage, session |
Leçon 4
| npm (JavaScript) | Composer (PHP) | |
|---|---|---|
| fichier manifeste | package.json | composer.json |
| versions exactes installées | package-lock.json | composer.lock |
| dossier des bibliothèques | node_modules/ | vendor/ |
Leçon 5
| Outil | Rôle | Fichier |
|---|---|---|
| EditorConfig | mêmes réglages d'éditeur pour toute l'équipe : indentation, fin de ligne, encodage | .editorconfig |
| Prettier | formatage automatique du code (JavaScript, CSS, HTML, JSON) | .prettierrc |
| ESLint | analyse du JavaScript : erreurs probables, variables inutilisées, règles d'équipe | eslint.config.js |
Leçon 6
| Environnement | Où ? | Pour qui ? | Caractéristiques |
|---|---|---|---|
| développement (local) | la machine du développeur | le développeur | débogage activé, données fictives, erreurs détaillées |
| test / recette / staging | un serveur identique à la production | l'équipe de test, le client (recette, chapitre 1) | données proches du réel (anonymisées), même configuration que la production |
| production |
1Le gestionnaire de dépendances de PHP est…
2Le dossier des bibliothèques installées par npm est…
3Le fichier qui fixe les versions exactes installées par Composer est…
4Le fichier .env doit être…
5L'onglet des DevTools qui montre les requêtes HTTP est…
6L'outil qui formate automatiquement le code est…
7Pour Node.js, on installe une version…
8L'environnement où le client fait la recette est…
L'essentiel du chapitre
package.json, package-lock.json, node_modules/) et Composer (composer.json, composer.lock, vendor/) ; versionner manifestes et verrous, pas les dossiers de dépendances ni le .env (.gitignore, .env.example).compose.yaml pour des environnements identiques.| Live Server | recharge la page HTML automatiquement |
| Thunder Client | tester une API sans quitter l'éditeur |
| Docker | gérer les conteneurs |
Vidéo · À regarder
FRVS Code : Les Bases Essentielles pour Bien Débuter !
Ali Houssene · YouTube
| Lighthouse | audit de performance, d'accessibilité, de bonnes pratiques et de référencement, avec un score sur 100 |
| mode appareil (Ctrl + Maj + M) | simuler un téléphone ou une tablette pour tester le responsive |
Vidéo · À regarder
FRAtelier : inspecter une page HTML avec DevTools
YouTube (FR) · YouTube
| installer tout le projet | npm install | composer install |
| ajouter une bibliothèque | npm install chart.js | composer require monolog/monolog |
| dépendance de développement seulement | npm install --save-dev eslint | composer require --dev phpunit/phpunit |
| lancer un script | npm run dev | composer run test |
| formatage selon la norme PSR-12 et analyse statique du PHP |
.php-cs-fixer.php, phpstan.neon |
| le serveur public |
| les utilisateurs |
| débogage désactivé, HTTPS, sauvegardes, surveillance |
VS Code (Microsoft) est l'éditeur le plus utilisé par les développeurs web. Il est léger, gratuit, et s'adapte à chaque langage par ses extensions.
Ouverts avec F12 (ou clic droit → Inspecter), les DevTools sont indispensables au développeur front-end :
Le serveur local
Pour le M107, tu as utilisé XAMPP (Apache, MariaDB, PHP, phpMyAdmin). D'autres solutions existent : Laragon (Windows, très rapide, crée un domaine local kitab.test par projet), ou le serveur intégré de PHP pour un test rapide :
php -S localhost:8000 -t public # sert le dossier public sur http://localhost:8000Node.js et npm
Node.js exécute du JavaScript en dehors du navigateur. Même pour un projet PHP, il est indispensable : les outils du front-end (compilation de Sass, de TypeScript, regroupement des fichiers avec Vite) fonctionnent avec Node. On installe toujours une version LTS (Long Term Support, maintenue pendant 30 mois), jamais une version impaire de développement.
node -v # v22.22.0 (par exemple)
npm -v # 10.9.4
php -v # PHP 8.3.6 (cli)
composer -V # Composer version 2.8.12
git --versionUn gestionnaire de dépendances télécharge les bibliothèques dont le projet a besoin (et leurs propres dépendances), à la bonne version, et les enregistre dans un fichier manifeste. Ainsi, un nouveau développeur récupère tout avec une seule commande.
Prépare l'environnement de Kitab : (1) installe ou vérifie VS Code (avec au moins 5 extensions utiles), Git, PHP, Composer, Node.js LTS ; (2) crée le dossier du projet avec git init, un .gitignore, un .editorconfig, un .env.example et un README.md qui explique l'installation ; (3) initialise package.json avec npm init -y et ajoute Prettier en dépendance de développement ; (4) fais un premier commit. Note dans ton dossier de conception la liste des outils et de leurs versions.
Un nouveau développeur rejoint l'équipe de Kitab et clone le dépôt Git. Le projet contient composer.json, composer.lock, package.json, package-lock.json, .env.example, mais pas de dossiers vendor/ ni node_modules/. Écris dans l'ordre les commandes et actions qu'il doit faire pour lancer le projet, et explique pourquoi vendor/ et node_modules/ ne sont pas dans le dépôt.
Pour chaque problème, indique l'onglet des DevTools à utiliser et ce que tu y cherches : (1) une image ne s'affiche pas ; (2) un bouton ne réagit pas au clic ; (3) le menu déborde sur téléphone ; (4) l'utilisateur reste déconnecté après la connexion ; (5) la page met 6 secondes à charger ; (6) le client veut connaître le score d'accessibilité.
Ctrl + P ouvre un fichier par son nom ; Ctrl + Maj + P ouvre la palette de commandes ; Ctrl + ù (clavier AZERTY) ou Ctrl + ` ouvre le terminal ; F2 renomme un symbole partout ; Alt + Maj + F formate le document ; Ctrl + D sélectionne l'occurrence suivante (multicurseur).
Ce que tu vas voir (vidéo courte, entièrement sur ce sujet) : la prise en main de VS Code : l'interface, l'ouverture d'un dossier de projet, l'explorateur, le terminal intégré et l'installation d'extensions. C'est la prise en main de l'éditeur présenté dans cette section.
Ce que tu vas voir (vidéo courte, entièrement sur ce sujet) : l'ouverture des outils de développement du navigateur (F12), puis l'inspection du HTML et du CSS d'une page et leur modification en direct. Ce sont les outils de développement présentés dans cette section.
On versionne les manifestes et les fichiers de verrouillage (package.json, package-lock.json, composer.json, composer.lock) : tout le monde installe exactement les mêmes versions. On ne versionne pas node_modules/ ni vendor/ (des milliers de fichiers régénérables) ni le fichier .env (il contient des mots de passe) : ils sont listés dans le fichier .gitignore.
node_modules/
vendor/
.env
/public/build/
*.log
.DS_StoreLe fichier .env
La configuration qui change d'un environnement à l'autre (accès à la base, clés d'API, mode débogage) ne s'écrit pas dans le code : elle va dans un fichier .env, non versionné. On versionne à la place un modèle .env.example sans les secrets.
APP_ENV=local
APP_DEBUG=true
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kitab
DB_USERNAME=kitab_app
DB_PASSWORD=
PAIEMENT_CLE_API=root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.{js,json,css,html,yml}]
indent_size = 2Docker
Docker exécute chaque service (PHP, serveur web, base de données) dans un conteneur : un environnement isolé et léger, décrit par un fichier texte. Toute l'équipe, la recette et la production utilisent exactement les mêmes versions, quel que soit le système de chaque machine. Un fichier compose.yaml (Docker Compose) décrit l'ensemble des conteneurs du projet.
services:
web:
image: php:8.3-apache
ports:
- "8080:80" # http://localhost:8080
volumes:
- ./:/var/www/html # le code du projet est partagé avec le conteneur
depends_on:
- db
db:
image: mysql:8.4
environment:
MYSQL_DATABASE: kitab
MYSQL_USER: kitab_app
MYSQL_PASSWORD: changer_ce_mot_de_passe
MYSQL_ROOT_PASSWORD: changer_aussi_celui_ci
volumes:
- donnees:/var/lib/mysql # les données survivent à l'arrêt du conteneur
volumes:
donnees:docker compose up -d démarre les deux conteneurs, docker compose down les arrête. (L'image officielle php:8.3-apache n'inclut pas l'extension pdo_mysql : en pratique, on écrit un petit Dockerfile qui l'ajoute avec docker-php-ext-install pdo_mysql.)
Indique l'environnement concerné et corrige si nécessaire : (1) APP_DEBUG=true sur le site public ; (2) des tests avec les vrais numéros de téléphone des clients sur le poste d'un stagiaire ; (3) le client valide la nouvelle page de paiement avant sa mise en ligne ; (4) un développeur modifie directement un fichier PHP sur le serveur public pour corriger un bug urgent.