Créer et exécuter un projet React avec ServBay
Qu’est-ce que React ?
React est une bibliothèque JavaScript open source maintenue par Meta (anciennement Facebook) et sa communauté, dédiée à la création d’interfaces utilisateur (UI). Fondée sur une architecture modulaire, elle permet aux développeurs de concevoir des interfaces interactives de manière efficace, qu’il s’agisse d’applications monopage (SPA) ou de sites web complexes. Les principaux atouts de React résident dans son approche déclarative, la mise à jour rapide du DOM virtuel et la richesse de son écosystème communautaire.
Principales caractéristiques et avantages de React
- Développement basé sur les composants : Simplifie les UI complexes en éléments indépendants et réutilisables, facilitant la maintenance et la réutilisation du code.
- Vues déclaratives : Décrivez simplement l’état de l’interface ; React gère alors la mise à jour du DOM pour refléter cet état, ce qui allège la logique de développement.
- DOM virtuel (Virtual DOM) : Maintient une représentation en mémoire du DOM et applique uniquement les changements nécessaires, optimisant ainsi les performances.
- Flux de données unidirectionnel : Les données circulent du haut vers le bas, ce qui rend les changements d’état plus faciles à suivre et à comprendre.
- JSX : Extension de la syntaxe JavaScript permettant d’écrire du code proche du HTML directement dans vos scripts, améliorant la lisibilité et la productivité.
- Écosystème puissant : Profitez d’une large communauté et de bibliothèques reconnues (comme React Router, Redux/Zustand/MobX, Material UI, etc.) pour la gestion d’état, le routage ou les composants d’interface.
Grâce à React, les développeurs peuvent concevoir plus rapidement des applications web modernes, performantes et évolutives.
Créer et configurer un environnement React avec ServBay
ServBay est un environnement local de développement web performant qui propose de nombreux paquets, dont Node.js, pour les utilisateurs macOS et Windows. Ce guide détaille comment tirer parti de l’environnement Node.js de ServBay et de la gestion des sites pour créer, configurer et exécuter un projet React étape par étape, que ce soit en mode développement (proxy inversé) ou en mode production (service de fichiers statiques).
Prérequis
Avant de commencer, assurez-vous d’avoir effectué les étapes suivantes :
- Installation de ServBay : ServBay doit être installé et en cours d'exécution sur votre système.
- Installation du paquet Node.js : Installez Node.js via l’interface ServBay ou en ligne de commande. Consultez la documentation sur l’installation de Node.js avec ServBay pour les étapes détaillées. ServBay s'occupe automatiquement de la version et de la configuration de Node.js.
Créer un projet React
Nous allons utiliser Vite, un outil moderne de build frontend, pour lancer rapidement notre projet React. Vite offre un démarrage ultra-rapide et le hot module reloading (HMR), ce qui en fait un choix privilégié pour débuter un projet React récent (il remplace create-react-app
dans de nombreux cas).
Ouvrir le terminal et se placer dans le répertoire racine des sites
Ouvrez votre terminal. Le répertoire racine recommandé par ServBay :
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1Créer un nouveau projet React avec Vite
Exécutez la commande suivante pour créer un nouveau projet nommé
servbay-react-demo
basé sur le template React grâce au scaffold de Vite :bashnpx create-vite servbay-react-demo --template react
1npx
est l’utilitaire d’exécution de paquets npm, qui permet d’utiliser des outils du registre npm sans installation globale. Cela garantit d’utiliser toujours la version la plus récente decreate-vite
.create-vite
est le générateur de projets officiel pour Vite.servbay-react-demo
est le nom du dossier de votre projet.--template react
spécifie le template React pour structurer votre projet.
Suivez les instructions à l’écran pour finaliser la création du projet.
Accéder au répertoire du projet et installer les dépendances
Rendez-vous dans le dossier du nouveau projet et installez les dépendances avec npm :
bashcd servbay-react-demo npm install
1
2- Vous pouvez également utiliser
yarn install
oupnpm install
si vous préférez Yarn ou pnpm comme gestionnaire de paquets.
- Vous pouvez également utiliser
Modifier l’interface de votre projet React (optionnel)
Pour vérifier que votre configuration fonctionne, nous allons modifier brièvement la page d’accueil du projet.
Ouvrir le fichier
src/App.jsx
ousrc/App.tsx
Avec votre éditeur favori, ouvrez le fichier
src/App.jsx
(si vous avez opté pour le template JavaScript) ousrc/App.tsx
(pour le template TypeScript).Modifier le contenu
Identifiez la section qui gère l’affichage principal et modifiez-la pour afficher "Hello ServBay!" :
javascript// ... autres imports ... import './App.css'; function App() { // ... autre code ... return ( <> {/* ... autres éléments ... */} <h1>Hello ServBay!</h1> {/* ... autres éléments ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Enregistrez les modifications.
Démarrer en mode développement
En phase de développement, on lance un serveur local qui propose le HMR et facilite l’itération. ServBay propose un proxy inversé pour rediriger les requêtes externes vers ce serveur local.
Démarrer le serveur de développement dans le terminal
Dans le dossier racine du projet
servbay-react-demo
, lancez le serveur Vite sur le port 8585 :bashnpm run dev -- --port 8585
1npm run dev
lance le scriptdev
défini dans le fichierpackage.json
, qui démarre généralement Vite.-- --port 8585
transmet le port à utiliser à la commande Vite.
Une fois lancé, l’adresse locale est indiquée dans le terminal, par exemple :
http://localhost:8585
. Gardez le terminal ouvert, ne fermez pas le serveur de développement.Configurer le proxy inversé dans ServBay
Ouvrez l’interface de ServBay. Rendez-vous dans la section Sites (Websites). Cliquez sur le bouton d’ajout pour créer une nouvelle configuration de site :
- Nom :
ServBay React Dev
(nom descriptif) - Domaine :
servbay-react-dev.servbay.demo
(nom de domaine de démonstration basé sur ServBay) - Type de site : sélectionnez
Proxy Inversé (Reverse Proxy)
- IP proxy :
127.0.0.1
(serveur local) - Port du proxy :
8585
(le même que celui utilisé pour Vite)
Enregistrez la configuration. ServBay applique automatiquement les modifications et configure le serveur web intégré (Caddy ou Nginx) pour rediriger les requêtes vers
servbay-react-dev.servbay.demo
à l’adressehttp://127.0.0.1:8585
.Pour plus de détails sur l’ajout d’un site dans ServBay, consultez la documentation sur la gestion des sites.
- Nom :
Accéder au site de développement
Ouvrez votre navigateur et rendez-vous sur :
https://servbay-react-dev.servbay.demo
.- Grâce à ServBay, le site de développement local est automatiquement sécurisé par un certificat SSL (signé par ServBay User CA ou ServBay Public CA), vous pouvez donc accéder à votre projet en HTTPS. Pour en savoir plus sur la gestion SSL avec ServBay, consultez Sécuriser votre site avec SSL.
- Désormais, toute modification sauvegardée dans vos fichiers de projet provoquera une mise à jour automatique du site dans le navigateur : c’est le hot module replacement (HMR) en action.
Construire la version de production
Lorsque votre projet est prêt à être déployé, vous devez générer une version optimisée pour la production.
Générer le build de production dans le terminal
Depuis le dossier racine du projet, lancez la commande suivante :
bashnpm run build
1Cette commande exécute le script
build
déclaré dans lepackage.json
du projet. Pour un projet React basé sur Vite, elle compile, regroupe et optimise le code source pour produire des fichiers statiques (HTML, CSS, JavaScript, ressources, etc.), stockés dans le dossierdist
à la racine du projet. Une fois la compilation terminée, le terminal affiche une confirmation.Configurer le service de fichiers statiques dans ServBay
Le dossier
dist
contient l’ensemble de fichiers statiques directement servis par un serveur web. Dans ServBay, configurez un nouveau site statique pointant vers ce dossier.Dans l’interface ServBay, section Sites (Websites), cliquez sur Ajouter et créez la configuration suivante :
- Nom :
ServBay React Prod
(nom descriptif) - Domaine :
servbay-react.servbay.demo
(domaine de démonstration pour la production, différent de celui du développement) - Type de site : sélectionnez
Statique (Static)
- Répertoire racine du site : pointez sur le dossier
dist
généré :- macOS :
/Applications/ServBay/www/servbay-react-demo/dist
- Windows :
C:\ServBay\www\servbay-react-demo\dist
- macOS :
Validez la configuration. ServBay paramètre le serveur web intégré pour servir directement les fichiers du dossier
dist
.- Nom :
Accéder au site de production
Ouvrez votre navigateur à l’adresse :
https://servbay-react.servbay.demo
.Vous accédez maintenant à la version optimisée du site, avec le support SSL fourni automatiquement par ServBay.
Conclusion
En suivant ces étapes, vous avez créé un projet React sur votre environnement local à l’aide de ServBay, mis en place un proxy inversé pour le mode développement et un service de fichiers statiques pour le mode production. Grâce à ServBay, la configuration et la gestion d’environnements locaux sont simplifiées, avec un support natif de Node.js, une gestion flexible des sites (proxy inversé ou statique), et une gestion SSL automatisée, aussi bien sur macOS que sur Windows. Cette solution apporte rapidité et sécurité au cycle de développement React, et vous pouvez maintenant continuer à développer, tester et déployer vos applications React efficacement.