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

Présentation ​

Ce guide vous explique comment créer, configurer et exécuter un projet Angular dans l'environnement local ServBay dédié au développement web. Nous tirerons parti du puissant environnement Node.js fourni par ServBay ainsi que de sa gestion flexible des sites web (anciennement appelés “hôtes”) afin de mettre en place simplement vos environnements de développement et de production, tout en assurant une connexion sécurisée via des noms de domaine personnalisés et des certificats SSL. ServBay intègre de nombreux outils essentiels au développement (anciennement “services”) comme Node.js, PHP, Python, Go, Java, bases de données, etc., faisant de ServBay la solution idéale pour un développement full stack local.

Qu’est-ce que Angular ? ​

Angular est un framework frontend open source développé et maintenu par Google, conçu pour la création d’applications monopage (SPA) dynamiques et performantes. Basé sur TypeScript, il propose une suite complète d’outils et une architecture structurée, parfaitement adaptée au développement d’applications complexes et de grande envergure pour les entreprises.

Atouts et caractéristiques principales d’Angular ​

  • Architecture basée sur les composants : L’interface utilisateur est construite sur des composants réutilisables, facilitant la maintenabilité et l’évolutivité du code.
  • Support de TypeScript : Typage statique et fonctionnalités orientées objet robustes, permettant d’améliorer la qualité du code et la productivité.
  • Injection de dépendances : Simplifie les tests et la gestion des relations entre composants.
  • CLI puissant (Interface en ligne de commande) : Facilite la création de projets, la génération de composants, services, modules, ainsi que les tâches de build et de test.
  • Modules intégrés : Routing, gestion de formulaires, client HTTP… Angular dispose de modules pour les fonctions les plus courantes.
  • Performance optimisée : Compilation anticipée (AOT), tree-shaking et autres optimisations pour maximiser la rapidité des applications.

En développant avec Angular sur ServBay, vous profitez d’un environnement stable et pouvez vous consacrer pleinement à la logique de votre application.

Prérequis ​

Avant de commencer, vérifiez que vous avez effectué les étapes suivantes :

  1. Installation de ServBay : ServBay est déjà installé et lancé sur votre système (compatible macOS et Windows).
  2. Activation du package Node.js : Depuis le panneau de contrôle ServBay, assurez-vous que la version souhaitée de Node.js est installée et activée. ServBay facilite la gestion de plusieurs versions de Node.js et le changement d'environnement.

Installation et exécution d’un projet Angular sur ServBay ​

Nous allons utiliser l’environnement Node.js de ServBay pour créer et faire tourner un projet Angular. En mode développement, nous configurerons un proxy inverse sur un site ServBay pour pointer vers le serveur Angular de développement ; en production, nous compilerons l’application et utiliserons ServBay pour servir les fichiers statiques.

1. Créer un projet Angular ​

D’abord, nous devons générer un nouveau projet avec Angular CLI.

  1. Installer Angular CLI : Ouvrez le terminal et installez Angular CLI globalement via l’environnement Node.js de ServBay. Si ce dernier n’est pas ajouté automatiquement à votre PATH système, commencez par basculer sur l’environnement Node.js fourni par ServBay. En général, ServBay s’occupe du PATH automatiquement.

    bash
    npm install -g @angular/cli

    Cette commande ajoute ng à votre système, permettant d’utiliser Angular CLI partout.

  2. Créer un nouveau projet Angular : Rendez-vous dans le dossier racine suggéré par ServBay pour vos sites et lancez la création du projet avec ng new. Nous recommandons un nom de projet avec la marque ServBay, par exemple servbay-angular-app.

    macOS :

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

    Windows :

    bash
    cd C:\ServBay\www
ng new servbay-angular-app

    Angular CLI vous posera quelques questions sur la configuration du projet. Répondez selon vos préférences :

    ? Would you like to add Angular routing? Yes  # Ajouter le routing ? Recommandé : Yes
? Which stylesheet format would you like to use? CSS # Format des stylesheets, par exemple CSS

    Attendez la fin du processus : Angular CLI créera un dossier, servbay-angular-app, avec la structure de base de votre projet :

    • macOS : /Applications/ServBay/www/servbay-angular-app
    • Windows : C:\ServBay\www\servbay-angular-app

  3. Installer les dépendances du projet : Entrez dans le répertoire du projet puis installez les packages locaux nécessaires.

    bash
    cd servbay-angular-app
npm install

    Cette commande lit les dépendances listées dans le package.json et les installe dans le dossier node_modules.

2. Modifier l’accueil Angular (optionnel) ​

Pour valider l'installation, changeons simplement le contenu affiché sur la page d’accueil.

  1. Modifier le fichier src/app/app.component.html : Via votre éditeur favori, ouvrez servbay-angular-app/src/app/app.component.html. Supprimez le contenu ou modifiez-le pour n’afficher qu’un titre simple, du type "Hello ServBay !".

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Voici votre app Angular lancée via ServBay !</p>
</div>

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

En cours de développement, nous utilisons le serveur intégré d’Angular CLI (ng serve), avec rechargement automatique, facilitant le debug. Ensuite, à travers ServBay, nous configurons un proxy inverse pour accéder au serveur via un nom de domaine local.

  1. Lancer le serveur de développement Angular : Dans le dossier racine du projet, exécutez la commande suivante pour démarrer le serveur sur un port (par exemple 8585) à l’écart du port web par défaut de ServBay.

    macOS :

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

    Windows :

    bash
    cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585

    Cette commande compile le projet et lance un serveur web local à l’adresse http://localhost:8585/. Gardez le terminal ouvert pour maintenir le serveur actif.

  2. Configurer un site ServBay (proxy inverse) : Ouvrez le panneau ServBay, rendez-vous dans la section “Sites” (anciennement “Hôtes”). Ajoutez une nouvelle configuration, qui via proxy inverse redirige un domaine local vers le serveur ng serve.

    • Nom : Par exemple My Angular Dev Site (nom affiché dans ServBay uniquement)
    • Domaine : Recommandé : un domaine de test ServBay, comme servbay-angular-dev.servbay.demo. ServBay fait pointer automatiquement .servbay.demo vers 127.0.0.1.
    • Type de site : Choisissez Proxy inverse (Reverse Proxy).
    • Adresse proxy : 127.0.0.1
    • Port proxy : Le port choisi pour ng serve, ici 8585.

    Enregistrez et appliquez la configuration dans ServBay.

  3. Accéder au site en mode développement : Ouvrez votre navigateur et visitez le domaine configuré, https://servbay-angular-dev.servbay.demo.

    Grâce à ServBay, vous bénéficiez de certificats SSL générés et configurés automatiquement (via ServBay User CA ou ServBay Public CA), et pouvez accéder en toute sécurité via HTTPS. Cela simule fidèlement un environnement de production SSL et vous aide à repérer d’éventuels problèmes dès le développement.

4. Compiler et servir la version production ​

Quand votre application est terminée et prête à être déployée, vous devez compiler une version optimisée en production, générant un ensemble de fichiers statiques hébergeables avec tout serveur de fichiers statiques. Nous utiliserons la fonction de site statique de ServBay pour les servir.

  1. Compiler la version production : Dans le dossier racine du projet, lancez la compilation :

    macOS :

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Ou, avec les nouvelles versions de CLI :
# ng build

    Windows :

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# Ou, avec les nouvelles versions de CLI :
# ng build

    L’option --prod (comportement par défaut avec les CLI récentes) active l’optimisation production : compilation AOT, compressions, tree-shaking… Les fichiers générés se retrouvent dans dist/servbay-angular-app (le nom dépend de vos paramètres, par défaut celui du projet).

  2. Configurer un site ServBay (service de fichiers statiques) : Depuis le panneau ServBay, dans “Sites”, créez une nouvelle configuration redirigeant un domaine local vers le dossier statique généré.

    • Nom : Par exemple My Angular Production Site

    • Domaine : Recommandé : un domaine ServBay distinct, ex servbay-angular-prod.servbay.demo

    • Type de site : Sélectionnez Statique (Static)

    • Répertoire racine du site : Naviguez jusqu’au dossier de build :

      • macOS : /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
      • Windows : C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

      Assurez-vous de pointer sur le dossier contenant le fichier index.html.

    Notez et sauvegardez la configuration.

  3. Accéder au site en mode production : Ouvrez votre navigateur et consultez le domaine local, https://servbay-angular-prod.servbay.demo.

    Vous accédez maintenant à la version production de votre application Angular, servie par le serveur web performant de ServBay (Caddy ou Nginx selon votre configuration). De plus, ServBay génère automatiquement le certificat SSL pour une connexion sécurisée.

Atouts de ServBay pour le développement Angular ​

  • Environnement tout-en-un : Installer et gérer les versions de Node.js n’a jamais été aussi simple : plus besoin de manipuler vous-même les variables d’environnement.
  • Gestion flexible des sites : Interface intuitive pour la configuration de site proxy inverse ou statique, facilitant la bascule entre développement et production.
  • SSL intégré : Certificats SSL gratuits et automatiques pour le développement local ; vous reproduisez aussi les conditions HTTPS de la production et évitez les alertes de contenu mixte.
  • Support multi-technologies : Si votre projet inclut une API backend en Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, ou des bases de données (MySQL, PostgreSQL, MongoDB, Redis), ServBay intègre aisément tous ces services, pour un environnement local complet. Les packages sont maintenus et mis à jour, et toutes les fonctionnalités sont désormais pleinement opérationnelles.
  • Sauvegarde et restauration des données : ServBay facilite la sauvegarde de vos configurations, sites, bases de données et certificats SSL pour protéger vos données de développement.
  • Réinitialisation des mots de passe bases de données : La réinitialisation des mots de passe root MySQL, MariaDB ou PostgreSQL est intégrée, résolvant une difficulté fréquente des développeurs.

Foire aux questions (FAQ) ​

  • Q : Une erreur “command not found: ng” apparaît avec ng new ou ng serve. Que faire ? R : Angular CLI n’est probablement pas installé globalement ou n’est pas dans votre PATH. Exécutez npm install -g @angular/cli pour l’installer, et vérifiez que l’environnement Node.js de ServBay est bien actif dans le PATH. Essayez de redémarrer le terminal ou ServBay si nécessaire.
  • Q : Le lancement avec ng serve échoue à cause d’un port déjà utilisé. Solution ? R : Le port voulu (par exemple 8585) est occupé. Lancez ng serve avec un autre port libre via l’option --port, exemple ng serve --port 8586, puis mettez à jour le port du proxy inverse dans ServBay.
  • Q : J’ai créé le site ServBay mais la page du domaine reste inaccessible. Pourquoi ? R : Vérifiez :
    • Que ServBay est bien lancé.
    • En mode développement, que le serveur ng serve fonctionne et que le port correspond à celui de la configuration proxy inverse ServBay.
    • En production, que le répertoire racine du site ServBay pointe bien vers le dossier contenant index.html (dist/nom-du-projet).
    • Consultez les logs ServBay pour des messages d’erreur plus précis.
    • Vérifiez que l’URL saisie correspond exactement au domaine configuré.
  • Q : Peut-on utiliser Caddy/Nginx/Apache de ServBay pour héberger la version production Angular ? R : Oui, ServBay vous permet de choisir entre Caddy, Nginx ou Apache comme serveur de fichiers statiques. Le serveur activé actuellement sera utilisé automatiquement pour servir votre site statique.

Conclusion ​

Grâce à ce guide, vous êtes en mesure de créer et d’exécuter un projet Angular dans ServBay, en profitant du proxy inverse pour vos serveurs de développement (ng serve via domaine local), puis de la fonction de site statique pour la production. Les environnements Node.js, la gestion avancée des sites, le SSL automatique et le support de toute la stack technique font de ServBay la solution idéale pour accélérer et professionnaliser votre développement Angular en local, tout en offrant la base la plus solide pour vos projets full stack.