Application full-stack React + Node.js, du code à la production
Application full-stack React + Node est un cours de niveau avancé de 5 leçons (environ 4 h 36), avec 15 exercices et 15 questions de quiz. Prérequis : API avec Express, React, Modélisation de bases de données. Le cours demande un environnement de projet complet, prévu dans une phase ultérieure de la plateforme.
- JavaScript côté serveur
- Avancé
- 5 leçons
- 4 h 36
- 15 exercices
- Environnement de projet complet (phase 2)
Le cours en bref
Ce cours avancé relie tout ce que vous avez appris côté front et côté serveur. Vous organiserez un projet full-stack avec Vite et Express 5, consommerez l'API depuis React en gérant chargement, erreurs et annulation, persisterez les données en SQL avec migrations et transactions, mettrez en place une authentification par session sécurisée, puis construirez et préparerez l'application pour la production.
Ce que tu sauras faire
- Organiser un projet full-stack React (Vite) + Express 5 et définir un contrat d'API
- Configurer le proxy de développement et CORS en connaissance de cause
- Écrire un client d'API robuste et gérer les états de requête dans React
- Persister les données avec un dépôt SQL, des migrations et des transactions
- Mettre en place une authentification par session et cookie HttpOnly, avec filtrage des données par utilisateur
- Construire le client, le servir avec repli SPA et cache adapté, et préparer le déploiement
Programme des 5 leçons
- Organiser un projet full-stack avec un client React (Vite) et une API Express
- Faire communiquer client et serveur en développement grâce au proxy Vite
- Comprendre et configurer CORS quand client et API sont sur des origines différentes
Architecture full-stackProxy de développementCORSContrat d'API
- 02
Consommer l'API depuis React : client HTTP, chargement et erreurs
- Écrire un client d'API réutilisable autour de fetch avec gestion des erreurs
- Gérer les états de chargement, succès et erreur dans un composant React
- Annuler les requêtes obsolètes et connaître les bibliothèques de cache (TanStack Query)
Client d'APIÉtats de requêteChargement de donnéesAnnulation de requêtes
- 03
Persister les données : l'API et sa base SQL
- Connecter l'API à une base SQL avec des requêtes paramétrées
- Écrire un dépôt (repository) qui isole l'accès aux données
- Gérer le schéma avec des migrations et les transactions
- 04
Authentification full-stack : sessions, cookies et routes protégées
- Mettre en place une connexion par session et cookie HttpOnly entre React et Express
- Protéger les routes de l'API et filtrer les données par utilisateur
- Gérer l'état de connexion côté React et protéger les pages
Authentification full-stackSessionsRoutes protégéesAutorisation par utilisateur
- 05
Construire et mettre en production l'application full-stack
- Construire le client React et le servir depuis Express avec le repli SPA
- Configurer le cache HTTP des fichiers statiques
- Préparer le déploiement : configuration, conteneur, santé et arrêt propre
Build de productionRepli SPACache HTTPDéploiement full-stack
Projet final
Application de gestion de tâches d'équipe, de bout en bout
Développez une application complète de gestion de tâches : inscription et connexion par session, tableaux de tâches par utilisateur, création, modification, filtrage et pagination, persistance SQL avec migrations, client React avec états de chargement et d'erreur, puis build de production servi par Express 5 et conteneurisé. Chaque utilisateur ne doit voir que ses propres données.
Livrables
- Le dépôt organisé en client/ (React + Vite) et server/ (Express 5), avec scripts npm de développement, test et build
- Les migrations SQL et le dépôt de données avec requêtes paramétrées
- Les tests : unitaires (validation, middlewares, réducteurs) et d'intégration de l'API, dont un test prouvant l'isolation des données entre utilisateurs
- Le Dockerfile multi-étapes et un README expliquant configuration, lancement et déploiement
Critères d'évaluation
- L'application fonctionne de bout en bout en local et en mode production
- Les routes de l'API sont protégées et filtrent toutes les données par utilisateur
- Le client gère explicitement chargement, erreurs (y compris de validation) et états vides
- Les cookies, CORS, le cache et les en-têtes de sécurité sont correctement configurés
- Le code est structuré en couches et couvert par des tests pertinents
Questions fréquentes
Quels prérequis pour ce cours full-stack ?
Il faut savoir créer une API avec Express (JS2), développer une application React avec routage et état (FE8) et écrire des requêtes SQL (S4).
Faut-il un framework comme Next.js ?
Non. Le cours utilise React avec Vite côté client et Express côté serveur, pour bien comprendre les échanges entre les deux. Ces notions restent valables avec un framework full-stack.
Quelle méthode d'authentification est enseignée ?
La session côté serveur transmise dans un cookie HttpOnly, Secure et SameSite, l'approche la plus robuste pour une application web. Les jetons de type JWT sont abordés dans le cours de sécurité.
Le cours explique-t-il le déploiement ?
Oui. Vous construisez le client, le servez depuis Express avec le bon cache et un repli SPA, puis préparez une image Docker multi-étapes. La mise en ligne est approfondie dans le cours Docker et déploiement.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Application full-stack React + Node » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.