ServBay

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Français

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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 :

  1. Installation de ServBay : ServBay doit être installé et en cours d'exécution sur votre système.
  2. 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).

  1. Ouvrir le terminal et se placer dans le répertoire racine des sites

    Ouvrez votre terminal. Le répertoire racine recommandé par ServBay :

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

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

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

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

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

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

    Avec votre éditeur favori, ouvrez le fichier src/App.jsx (si vous avez opté pour le template JavaScript) ou src/App.tsx (pour le template TypeScript).

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

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

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

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

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

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

  1. Générer le build de production dans le terminal

    Depuis le dossier racine du projet, lancez la commande suivante :

    bash
    npm run build

    Cette commande exécute le script build déclaré dans le package.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 dossier dist à la racine du projet. Une fois la compilation terminée, le terminal affiche une confirmation.

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

    Validez la configuration. ServBay paramètre le serveur web intégré pour servir directement les fichiers du dossier dist.

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