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 Angular avec ServBay ​

Vue d’ensemble ​

Ce document a pour objectif de vous guider dans la création, la configuration et l’exécution d’un projet Angular au sein de l’environnement de développement Web local ServBay. Nous exploiterons le puissant environnement Node.js fourni par ServBay, ainsi que les fonctionnalités flexibles de gestion de site (anciennement appelées « hôtes »), afin de mettre en place facilement des environnements de développement et de production, tout en assurant un accès sécurisé grâce à des domaines personnalisés et des certificats SSL. ServBay intègre de nombreux packages indispensables au développement (« services »), tels que Node.js, PHP, Python, Go, Java, des bases de données, etc., ce qui en fait un choix idéal pour le développement full-stack en local.

Qu’est-ce qu’Angular ? ​

Angular est un framework frontend open source maintenu par Google, conçu pour construire des applications monopage (SPA) dynamiques et performantes. Basé sur TypeScript, il offre un ensemble complet d’outils et une approche structurée du développement, ce qui le rend particulièrement adapté à la création d’applications d’entreprise de grande envergure et complexes.

Fonctionnalités et avantages clés d’Angular ​

  • Architecture basée sur les composants : Créez des interfaces utilisateurs avec des composants réutilisables, pour une meilleure maintenance et évolutivité du code.
  • Support de TypeScript : Bénéficiez du typage statique et de solides fonctionnalités orientées objet pour renforcer la qualité et l’efficacité du développement.
  • Injection de dépendances : Facilite les tests et la gestion des dépendances de vos composants.
  • CLI puissante (Interface en ligne de commande) : Simplifie la création de projets, la génération de composants/services/modules, ainsi que les tâches de build et de test.
  • Solutions intégrées : Inclut des modules prêts à l’emploi pour le routage, la gestion de formulaires, le client HTTP, etc.
  • Optimisations des performances : Prend en charge la compilation AOT (Ahead-of-Time), Tree-shaking et d’autres techniques pour améliorer la performance de vos applications.

En combinant Angular avec l’environnement stable de ServBay, les développeurs peuvent se concentrer pleinement sur la logique métier.

Prérequis ​

Avant de commencer, assurez-vous d’avoir réalisé les étapes suivantes :

  1. Installer ServBay : ServBay est installé et lancé avec succès sur votre macOS.
  2. Activer le package Node.js : Dans le panneau de contrôle ServBay, assurez-vous que la version de Node.js souhaitée est installée et activée. ServBay permet d’installer plusieurs versions de Node.js et de passer facilement de l’une à l’autre.

Mise en place et exécution d’un projet Angular avec ServBay ​

Nous allons utiliser l’environnement Node.js intégré à ServBay pour créer et exécuter un projet Angular. En mode développement, ServBay nous servira à configurer un proxy inverse pointant vers le serveur de développement Angular ; en production, nous compilerons le projet et utiliserons ServBay comme serveur de fichiers statiques.

1. Créer un projet Angular ​

Tout d’abord, créons un nouveau projet avec Angular CLI.

  1. Installer Angular CLI : Ouvrez votre terminal et installez Angular CLI globalement en utilisant l’environnement Node.js fourni par ServBay. Si l’environnement Node.js de ServBay n’est pas ajouté automatiquement à votre PATH système, il peut être nécessaire de basculer manuellement vers l’environnement ServBay. En règle générale, ServBay gère le PATH pour vous.

    bash
    npm install -g @angular/cli

    Cette commande installe l’outil Angular CLI (ng) globalement pour une utilisation dans tout le système.

  2. Créer un nouveau projet Angular : Placez-vous dans le répertoire racine préconisé par ServBay pour vos sites : /Applications/ServBay/www, puis créez un nouveau projet avec la commande ng new. Nous recommandons de nommer le projet avec une mention de ServBay, par exemple servbay-angular-app.

    bash
    cd /Applications/ServBay/www
ng new servbay-angular-app

    L’interface CLI d’Angular vous posera quelques questions sur la configuration du projet. Suivez les instructions :

    ? Would you like to add Angular routing? Yes  # Ajouter le module de routage ? Recommandé : Yes
? Which stylesheet format would you like to use? CSS # Choisissez le format des feuilles de style, par exemple CSS

    Une fois la commande exécutée, Angular CLI crée un dossier servbay-angular-app sous /Applications/ServBay/www contenant la structure de base du projet.

  3. Installer les dépendances du projet : Accédez au répertoire du projet fraîchement créé et installez les dépendances listées.

    bash
    cd servbay-angular-app
npm install

    La commande npm install lit le fichier package.json du projet afin d’installer toutes les dépendances requises dans le dossier node_modules.

2. Modifier la page d’accueil Angular (optionnel) ​

Pour vérifier que le projet fonctionne correctement, modifions la page d’accueil avec un message de test.

  1. Modifiez le fichier src/app/app.component.html : Ouvrez servbay-angular-app/src/app/app.component.html dans votre éditeur de code favori. Remplacez ou simplifiez le contenu par un titre, par exemple « Hello ServBay! ».

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Ceci est votre application Angular qui tourne avec ServBay !</p>
</div>

3. Exécuter le projet en mode développement ​

Durant le développement, nous utilisons généralement le serveur de développement intégré à Angular CLI (ng serve), qui prend en charge le rechargement à chaud. Nous allons configurer ServBay comme proxy inverse afin d’accéder à ce serveur via un nom de domaine local.

  1. Lancez le serveur de développement Angular : Depuis le répertoire racine du projet (/Applications/ServBay/www/servbay-angular-app), lancez le serveur avec le port de votre choix (par exemple 8585 pour éviter tout conflit avec le port par défaut de ServBay).

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585

    Cette commande compile l’application et lance un serveur Web local sur http://localhost:8585/. Maintenez la fenêtre du terminal ouverte pour que le serveur reste actif.

  2. Configurer un site dans ServBay (Proxy Inverse) : Dans le panneau de contrôle ServBay, ouvrez la section « Sites » (anciennement appelée « Hôtes ») et ajoutez une nouvelle configuration de site. Configurez un proxy inverse pointant vers le serveur Angular.

    • Nom : Par exemple Mon Site Angular Dev (nom affiché en interne dans ServBay)
    • Domaine : Il est conseillé d’utiliser un domaine de test de la forme servbay-angular-dev.servbay.demo. ServBay résout automatiquement les domaines en .servbay.demo vers 127.0.0.1.
    • Type de site : Sélectionnez Proxy Inverse.
    • Adresse du proxy : Entrez 127.0.0.1.
    • Port du proxy : Saisissez le port utilisé avec ng serve, ici par exemple 8585.

    Une fois la configuration terminée, sauvegardez et appliquez les modifications dans ServBay.

  3. Accéder au site en mode développement : Lancez votre navigateur et allez à l’adresse https://servbay-angular-dev.servbay.demo.

    Comme vous passez par ServBay, celui-ci peut générer et configurer automatiquement des certificats SSL pour vos sites locaux (grâce à ServBay User CA ou ServBay Public CA). Vous pouvez donc accéder à votre application de développement en HTTPS, simulant ainsi très tôt le contexte de production.

4. Compiler et héberger la version de production ​

Une fois le développement terminé, vous allez construire la version optimisée pour la production de votre application Angular. Ce processus crée des fichiers statiques qui peuvent être servis par n’importe quel serveur de fichiers statiques. Nous utiliserons la fonctionnalité « Site statique » de ServBay à cet effet.

  1. Compiler la version production : Dans le dossier du projet (/Applications/ServBay/www/servbay-angular-app), lancez la commande suivante :

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Ou bien, avec les versions récentes du CLI :
# ng build

    Le flag --prod (désormais activé par défaut sur les dernières versions du CLI) active les optimisations de production comme la compilation AOT, la minification, le Tree-shaking, etc. Les fichiers statiques générés se trouvent dans dist/servbay-angular-app (le nom du dossier dépend de la configuration du projet).

  2. Configurer un site ServBay (Site Statique) : Dans ServBay, rendez-vous dans la gestion des sites et ajoutez une nouvelle configuration pointant vers le dossier de build.

    • Nom : Par exemple Mon Site Angular Production
    • Domaine : Utilisez un autre domaine de test, comme servbay-angular-prod.servbay.demo.
    • Type de site : Choisissez Statique.
    • Racine du site : Indiquez le chemin vers le dossier de sortie de la compilation : généralement /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Assurez-vous de pointer vers le dossier contenant le fichier index.html.

    Sauvegardez et appliquez les modifications dans ServBay.

  3. Accéder au site en mode production : Rendez-vous sur https://servbay-angular-prod.servbay.demo dans votre navigateur.

    Vous accédez désormais à la version optimisée et construite de votre application Angular, diffusée par le serveur Web haute performance de ServBay (Caddy, Nginx selon votre configuration). ServBay configure le SSL automatiquement pour garantir une connexion sécurisée.

Atouts de ServBay pour le développement Angular ​

  • Environnement intégré : Installation et gestion aisées de différentes versions de Node.js sans configuration manuelle complexe des variables d’environnement.
  • Gestion flexible des sites : Configurez via une interface intuitive des proxys inverses et des serveurs statiques, et passez rapidement d’un contexte de développement à la production.
  • Support SSL intégré : Fourniture automatique et gratuite de certificats SSL pour le développement local, simulant HTTPS en production et évitant les alertes de contenu mixte.
  • Support multi-stack : Que votre projet implique une API backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, etc.) ou des bases de données (MySQL, PostgreSQL, MongoDB, Redis), ServBay s’intègre facilement à ces services pour un environnement full-stack local complet. Tous ces packages sont supportés par ServBay et continuellement mis à jour, avec une couverture fonctionnelle désormais totale.
  • Sauvegarde et restauration des données : ServBay propose des fonctions pratiques de sauvegarde de vos configurations, sites, bases de données et certificats SSL pour sécuriser vos données de développement.
  • Réinitialisation des mots de passe base de données : Fonctionnalité intégrée pour réinitialiser le mot de passe root de MySQL, MariaDB ou PostgreSQL, résolvant un problème récurrent chez les développeurs.

Foire Aux Questions (FAQ) ​

  • Q : En lançant ng new ou ng serve, j’ai une erreur command not found: ng. Que faire ? R : Cela signifie généralement qu’Angular CLI n’est pas installé ou que le chemin (PATH) n’est pas défini correctement. Vérifiez que vous avez bien installé @angular/cli globalement (npm install -g @angular/cli) et que l’environnement Node.js de ServBay est bien pris en compte dans la variable d’environnement. Essayez de redémarrer le terminal ou ServBay.

  • Q : Le démarrage de ng serve échoue avec une erreur de port occupé. Que faire ? R : Cela veut dire que le port sélectionné (par exemple 8585) est déjà utilisé par une autre application. Relancez ng serve avec un autre port libre, comme ng serve --port 8586, puis mettez à jour la configuration proxy de ServBay pour ce nouveau port.

  • Q : J’ai configuré un site dans ServBay mais la page ne se charge pas via le nom de domaine. Pourquoi ? R : Vérifiez :

    • Que ServBay fonctionne bien.
    • En mode développement, que la commande ng serve fonctionne, et que le port correspond à celui configuré dans le proxy ServBay.
    • En production, que le « Racine du site » pointe vers le bon répertoire (celui contenant le index.html dans dist/nom-de-votre-projet).
    • Les logs de ServBay pour des messages d’erreur détaillés.
    • Que le nom de domaine entré dans ServBay correspond exactement à celui utilisé dans votre navigateur.

  • Q : Puis-je utiliser différents serveurs Web ServBay (Caddy/Nginx/Apache) pour héberger Angular en production ? R : Oui, ServBay prend en charge Caddy, Nginx ou Apache comme serveurs de fichiers statiques. Le serveur actuellement activé diffusera automatiquement votre site statique après la configuration.

Conclusion ​

Grâce à ce guide, vous pouvez désormais créer et exécuter un projet Angular dans l’environnement ServBay. Vous avez appris à utiliser le proxy inverse pour accéder au serveur de développement via un nom de domaine local en mode développement, et à compiler/héberger la version production de votre application avec ServBay. Avec Node.js intégré, une gestion des sites facilitée et le SSL automatique, ServBay optimise grandement la productivité et la sécurité de vos développements Angular en local. Son support complet des technologies vous offre une base solide pour vos projets full-stack.