ServBay

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano

Appearance

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 :

  1. Installer ServBay : ServBay est installé et en cours d’exécution sur votre macOS.
  2. 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.

  1. 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 :

    bash
    cd /Applications/ServBay/www

  2. Cré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 :

    bash
    npx create-vite servbay-react-demo --template react
    • npx 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 de create-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.

  3. 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 :

    bash
    cd servbay-react-demo
npm install
    • Vous pouvez également utiliser yarn install ou pnpm install si vous préférez Yarn ou pnpm comme gestionnaire de paquets.

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.

  1. Ouvrir le fichier src/App.jsx ou src/App.tsx

    Utilisez l’éditeur de texte de votre choix pour ouvrir le fichier src/App.jsx (template JavaScript) ou src/App.tsx (template TypeScript).

  2. 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;

    Enregistrez 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.

  1. 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) :

    bash
    npm run dev -- --port 8585
    • npm run dev exécute le script dev défini dans le package.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.

  2. 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 vers http://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.

  3. 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é.

  1. Lancer l’assemblage de production dans le terminal

    Depuis le dossier racine du projet servbay-react-demo, exécutez :

    bash
    npm run build

    Cette commande lance le script build défini dans le package.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 dossier dist à la racine du projet. Un message indique la fin du processus.

  2. 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.

  3. 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 !