Comment déployer Angular sur Saplo (SPA d'entreprise)

Angular est le plus complet des frameworks frontend populaires : il impose sa propre structure de projet, le typage via TypeScript et les modules, ce qui est idéal pour les grandes applications d'entreprise gérées par toute une équipe. Comme React ou Vue, Angular n'est pas un hébergeur en soi. Le projet construit génère des fichiers statiques HTML, CSS et JS qui nécessitent un serveur avec un fallback de route correct pour Angular Router en mode historique. Sur Saplo, tu déploies Angular de la même manière que n'importe quelle autre application du catalogue : le moteur génère le projet, le construit via Angular CLI, détecte le répertoire réel avec le index.html résultant et l'expose sous nginx avec le fallback de route.

À qui s'adresse Angular sur Saplo

Avant de commencer l'installation, vérifie si c'est le bon choix pour ton projet :

• Tu construis un grand système interne ou un Panneau pour de nombreux rôles - la structure des modules et le typage strict d'Angular facilitent la maintenance du code lorsque plusieurs personnes travaillent sur le projet.
• L'équipe connaît déjà Angular - Saplo n'impose aucune couche supplémentaire, tu obtiens un projet standard généré par Angular CLI.
• Le frontend doit se connecter à sa propre API - tu déploies une SPA à côté d'un backend (Django, Node, Docker) sur la même Box ou séparément.
• Application monopage avec Angular Router en mode historique - le fallback de toutes les routes vers index.html est configuré automatiquement, tu n'as rien à ajouter dans nginx.
• Tu veux des déploiements avec git push au lieu de télécharger manuellement les fichiers via FTP - tu connectes le dépôt une fois, chaque push sur la branche de production construit et déploie une nouvelle version automatiquement.

Si le projet est plus petit et que tu n'as pas besoin de la structure complète des modules d'Angular, consulte le catalogue d'applications pour des stacks plus légers comme React ou Vue.

Exigences

Pour installer Angular sur Saplo, tu as besoin de :

• Une Box au moins en plan S - un SPA construit est une poignée de fichiers statiques, mais le processus de build d'Angular CLI est plus lourd que pour React ou Vue, c'est pourquoi le manifeste de la recette nécessite un minimum de 512 Mo de RAM libre pour le build et 3 Go d'espace disque.
• Un domaine ou sous-domaine *.saploapp.pl inclus dans le prix de chaque plan.
• Un référentiel Git, si tu souhaites des déploiements automatiques (facultatif au démarrage, tu peux aussi télécharger l'application en archive .zip via le Panneau).

Installation étape par étape

1. Dans le Panneau Saplo, va dans le Catalogue d'applications et choisis Angular (catégorie "Applications").
2. Indique la Box et le nom de l'application - cela créera le sous-domaine par défaut <name>.saploapp.pl.
3. Choisis la version de Node.js pour la compilation (18, 20 ou 22, 20 par défaut) et valide l'installation.
4. Le moteur génère le squelette Angular via Angular CLI (l'équivalent de ng new --defaults --ssr=false), installe les dépendances et compile le projet en production (ng build --configuration=production).
5. Après la compilation, le moteur détecte automatiquement si le fichier de sortie index.html se trouve dans dist/<project>/ (Angular antérieur à 17) ou dans dist/<project>/browser/ (Angular 17 et supérieur, où le répertoire dist est préparé pour le SSR), et copie le niveau de répertoire approprié vers l'application servie par nginx.
6. Une fois l'installation terminée, le domaine de l'étape 2 affiche le squelette de démarrage d'Angular - à partir de ce moment, tu y déploies ton propre code.

Déployer ton code avec Git

1. Dans les détails de l'application, trouve la section Git / CI-CD et clique sur « Connecter GitHub ». Confirme l'installation de l'application « Saplo Deploy » et indique le répertoire de ton projet Angular.
2. Le fichier saplo.yaml doit se trouver dans le répertoire racine de ton dépôt.
3. Commite et pousse le fichier saplo.yaml vers la branche de production (par défaut main).
4. Chaque git push suivant sur cette branche construit le projet et remplace les fichiers résultants sur la Box. Tu peux voir le statut dans l'onglet Déploiements.
5. Si la construction échoue, la version précédente fonctionnelle reste en place - Saplo ne la remplace pas par une version défectueuse.

Exemple de fichier saplo.yaml minimal pour Angular :

name: my-project
stack: angular
build:
  install: npm ci
  command: npm run build
  output: dist/my-project/browser

Si tu ne définis pas le champ build.output, le moteur détectera quand même automatiquement le bon répertoire avec index.html, mais une définition explicite accélère la construction et élimine les erreurs pour les projets avec un nom non standard.

Angular sur Saplo vs. les alternatives

Questions fréquentes

Est-ce qu'Angular Router en mode historique fonctionne sans configuration supplémentaire ? Oui, le fallback de tous les chemins vers index.html est actif immédiatement après l'installation, donc rafraîchir n'importe quelle sous-page ne se termine pas par une erreur 404.

Angular 17 a changé la structure du répertoire dist - est-ce un problème sur Saplo ? Non, le moteur, après le build, vérifie lui-même si index.html se trouve dans dist/<project>/ ou dans dist/<project>/browser/, et copie le niveau de répertoire approprié sans votre intervention.

Puis-je avoir plusieurs applications Angular sur une seule Box ? Oui, le catalogue d'applications permet de déployer plusieurs modules côte à côte, chacun avec son propre sous-domaine ou domaine.

Vais-je obtenir un certificat SSL et mon propre domaine ? Oui, le certificat SSL est automatique, et un domaine ou sous-domaine *.saploapp.pl est inclus dans le prix de chaque plan.

Comment changer le répertoire de sortie du build si mon projet a un nom personnalisé ? Règle le champ build.output dans saplo.yaml sur le chemin approprié, par exemple dist/project-name/browser.

Sur Saplo, tu déploies Angular de zéro à un domaine fonctionnel en quelques minutes, et le moteur détecte lui-même le changement de structure de répertoire dist entre les versions d'Angular. Si le projet est plus petit qu'une application d'entreprise typique, consulte les stacks React ou Vue plus légers dans le même catalogue.