Créer et exécuter un projet React en local sous macOS 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). Il permet de construire des UI interactives de manière modulaire via des composants, facilitant le développement d’applications monopage (SPA) ou de grandes applications web à la structure maintenable. Les atouts majeurs de React résident dans son approche déclarative, son mécanisme efficace de mise à jour via le DOM virtuel et la richesse de son écosystème communautaire.
Principales caractéristiques et avantages de React
- Développement basé sur les composants : Divisez des interfaces complexes en composants indépendants et réutilisables pour un code plus maintenable et modulaire.
- Vues déclaratives : Décrivez simplement l’état de vos interfaces ; React se charge de synchroniser le DOM, simplifiant ainsi la logique de développement des UI.
- Virtual DOM : Gère une représentation virtuelle du DOM en mémoire, minimise les opérations sur le DOM réel via le diffing, et améliore considérablement les performances.
- Flux de données unidirectionnel : Les données circulent de la racine vers les feuilles, rendant le suivi des changements d’état plus simple et prédictible.
- JSX : Extension de JavaScript permettant d’écrire des structures proches du HTML dans le code JS, améliorant la lisibilité et la clarté du code.
- Écosystème puissant : Profitez d’une vaste communauté et de bibliothèques tierces (React Router, Redux/Zustand/MobX, Material UI, etc.) pour la gestion d’état, le routage, les composants UI, et plus encore.
En utilisant React, les développeurs réalisent des applications web modernes hautement performantes plus rapidement et plus efficacement.
Préparer l’environnement de développement et de production React avec ServBay
ServBay est un environnement local de développement web complet pour macOS, intégrant notamment des paquets comme Node.js. Ce guide présente comment créer, configurer et exécuter étape par étape un projet React avec l'environnement Node.js de ServBay et la gestion des sites web, avec à la fois un proxy inverse pour le mode développement et un serveur de fichiers statiques pour le mode production.
Prérequis
Avant de commencer, assurez-vous d’avoir réalisé les étapes suivantes :
- Installer ServBay : ServBay est installé et en cours d’exécution sur votre macOS.
- Installer le paquet Node.js : Node.js a été installé via l’interface ServBay ou en ligne de commande. Pour plus de détails, consultez la documentation de ServBay sur l’installation de Node.js. ServBay gère automatiquement la version et les variables d’environnement Node.js.
Créer un projet React
Nous allons utiliser Vite, l’outil moderne et ultra-rapide de construction de projets frontend, pour générer rapidement une application React. Vite se démarque par ses temps de démarrage réduits et sa prise en charge du rechargement à chaud (HMR), et s’impose comme une alternative moderne à create-react-app
.
Ouvrir le terminal et accéder au dossier racine des sites web
Lancez votre terminal. Le dossier racine préconisé par ServBay est
/Applications/ServBay/www
. Accédez à ce dossier :bashcd /Applications/ServBay/www
1Créer un nouveau projet React avec Vite
Lancez la commande suivante pour créer un nouveau dossier nommé
servbay-react-demo
et initialiser le template React :bashnpx create-vite servbay-react-demo --template react
1npx
est l’outil d’exécution de commandes npm qui permet d’utiliser des outils sans installation globale, garantissant d’employer la version la plus récente decreate-vite
.create-vite
est l’outil officiel de scaffolding de projet Vite.servbay-react-demo
sera le nom de dossier de votre projet.--template react
indique de choisir le modèle React pour l’initialisation.
Suivez les instructions affichées dans le terminal pour finaliser la création du projet.
Entrer dans le dossier du projet et installer les dépendances
Rendez-vous dans le dossier nouvellement créé et installez les dépendances via 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 le contenu du projet React (optionnel)
Pour vérifier que tout fonctionne, modifions simplement le contenu de la page d’accueil de la nouvelle appli.
Ouvrir le fichier
src/App.jsx
ousrc/App.tsx
Utilisez l’éditeur de texte de votre choix pour ouvrir le fichier
src/App.jsx
(template JavaScript) ousrc/App.tsx
(template TypeScript).Modifier le contenu
Repérez la partie qui gère l’affichage principal, puis remplacez le titre par "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 le fichier.
Démarrer en mode développement
En phase de développement, on utilise généralement un serveur local qui propose le hot module replacement (HMR) pour accélérer les itérations. ServBay permet de rediriger les requêtes externes vers ce serveur via un proxy inverse.
Lancer le serveur de développement dans le terminal
Depuis la racine du projet
servbay-react-demo
, exécutez (par exemple sur le port 8585) :bashnpm run dev -- --port 8585
1npm run dev
exécute le scriptdev
défini dans lepackage.json
du projet (en principe Vite).-- --port 8585
indique à Vite d’utiliser le port 8585.
Après démarrage, le terminal affiche généralement une adresse locale, typiquement
http://localhost:8585
. Gardez ce terminal ouvert, le serveur doit rester actif.Configurer le proxy inverse dans ServBay
Dans l'interface de ServBay, accédez à la section Sites web (Websites). Cliquez sur Ajouter et créez une nouvelle configuration de site :
- Nom :
ServBay React Dev
(libelle descriptif) - Domaine :
servbay-react-dev.servbay.demo
(utilise un sous-domaine de démonstration lié à ServBay) - Type de site : Choisissez
Proxy inverse (Reverse Proxy)
- IP du proxy :
127.0.0.1
(le serveur Vite tourne en local) - Port du proxy :
8585
(identique au port utilisé précédemment)
Enregistrez la configuration. ServBay applique automatiquement les modifications et paramètre son serveur web intégré (Caddy ou Nginx) afin de router toute requête pour
servbay-react-dev.servbay.demo
vershttp://127.0.0.1:8585
.Pour des instructions détaillées sur l’ajout de sites dans ServBay, consultez la documentation sur la gestion des sites web de ServBay.
- Nom :
Accéder au site de développement
Ouvrez votre navigateur et saisissez :
https://servbay-react-dev.servbay.demo
.- Grâce aux fonctionnalités de ServBay, votre site local de développement dispose automatiquement d’un certificat SSL (signé par ServBay User CA ou ServBay Public CA), et est donc accessible en toute sécurité via HTTPS. Pour en savoir plus, consultez Protéger votre site avec SSL via ServBay.
- Maintenant, toute modification de fichiers sauvegardée dans l’éditeur de code déclenche un rafraîchissement automatique du navigateur : le hot module replacement fonctionne.
Générer la version de production
Lorsque votre projet React est prêt à être mis en ligne, il faut générer un build de production optimisé.
Lancer l’assemblage de production dans le terminal
Depuis le dossier racine du projet
servbay-react-demo
, exécutez :bashnpm run build
1Cette commande lance le script
build
défini dans lepackage.json
. Pour un projet React basé sur Vite, elle compile, prépare et optimise tout le code source et les assets, produisant un ensemble de fichiers statiques (HTML, CSS, JS, etc.) dans le dossierdist
à la racine du projet. Un message indique la fin du processus.Configurer un service de fichiers statiques dans ServBay
Le dossier
dist
issu du build contient les fichiers statiques à servir. Il suffit de configurer un site statique vers ce dossier dans ServBay.Depuis l’interface ServBay, accédez à la section Sites web (Websites) et créez une configuration de site :
- Nom :
ServBay React Prod
(libellé explicite) - Domaine :
servbay-react.servbay.demo
(différent du domaine de dev) - Type de site : Sélectionnez
Statique (Static)
- Répertoire racine :
/Applications/ServBay/www/servbay-react-demo/dist
(chemin vers le dossier généré)
Enregistrez la configuration. ServBay paramètre alors son serveur pour servir les fichiers statiques du dossier
dist
.- Nom :
Accéder au site de production
Dans votre navigateur, ouvrez :
https://servbay-react.servbay.demo
.Vous accédez à la version optimisée et assemblée pour la production. De plus, ce site bénéficie également de la prise en charge SSL automatique de ServBay.
Conclusion
En suivant ce guide, vous avez mis en place avec succès un projet React en local sur macOS à l’aide de ServBay, avec une configuration proxy inverse pour le développement et un service statique pour la production. Grâce à l’environnement intégré de ServBay — Node.js inclus, configuration flexible des sites (proxy, statique) et gestion automatique des certificats SSL — vous bénéficiez d’une expérience simplifiée et fiable pour le développement, les tests et la mise en ligne de vos applications React. Poursuivez vos travaux de développement, test et déploiement sur cette base robuste !