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 :
- Installer ServBay : ServBay est installé et lancé avec succès sur votre macOS.
- 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.
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.
bashnpm install -g @angular/cli
1Cette commande installe l’outil Angular CLI (
ng
) globalement pour une utilisation dans tout le système.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 commandeng new
. Nous recommandons de nommer le projet avec une mention de ServBay, par exempleservbay-angular-app
.bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2L’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
1
2Une 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.Installer les dépendances du projet : Accédez au répertoire du projet fraîchement créé et installez les dépendances listées.
bashcd servbay-angular-app npm install
1
2La commande
npm install
lit le fichierpackage.json
du projet afin d’installer toutes les dépendances requises dans le dossiernode_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.
Modifiez le fichier
src/app/app.component.html
: Ouvrezservbay-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>
1
2
3
4
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.
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 exemple8585
pour éviter tout conflit avec le port par défaut de ServBay).bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Cette 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.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
vers127.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 exemple8585
.
Une fois la configuration terminée, sauvegardez et appliquez les modifications dans ServBay.
- Nom : Par exemple
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.
Compiler la version production : Dans le dossier du projet (
/Applications/ServBay/www/servbay-angular-app
), lancez la commande suivante :bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # Ou bien, avec les versions récentes du CLI : # ng build
1
2
3
4Le 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 dansdist/servbay-angular-app
(le nom du dossier dépend de la configuration du projet).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 fichierindex.html
.
Sauvegardez et appliquez les modifications dans ServBay.
- Nom : Par exemple
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
oung serve
, j’ai une erreurcommand 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. Relancezng serve
avec un autre port libre, commeng 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
dansdist/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.