Comment déployer Vue.js sur Saplo (application frontend légère)

À côté de React, Vue 3 est la deuxième bibliothèque la plus populaire pour créer des interfaces et, tout comme React, ce n’est pas un hébergement en soi. Un projet compilé (le plus souvent avec Vite) se compose de fichiers HTML, CSS et JS statiques, qui nécessitent un serveur avec un mécanisme de repli des routes correctement configuré pour Vue Router en mode history. Sans cela, le rechargement d’une sous-page se termine par une erreur 404. Sur Saplo, tu déploies Vue de la même manière que toute autre application du catalogue : le moteur compile le projet, sert le répertoire final dist via nginx et configure lui-même le mécanisme de repli des routes.

À qui Vue convient-il sur Saplo

Avant de commencer l’installation, vérifie qu’il s’agit du bon choix pour ton projet :

• tu construis un tableau de bord - Saplo sert un build prêt à l’emploi comme fichiers statiques, sans processus Node en arrière-plan,
• le frontend doit se connecter à ta propre API - tu héberges une SPA à côté du backend (Django, Node, Docker) sur la même Box ou séparément,
• une application monopage avec Vue Router en mode history - 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 plutôt que l’envoi manuel de fichiers via FTP - tu connectes le dépôt une seule fois, chaque push vers la branche de production construit et déploie automatiquement une nouvelle version.

Si le projet nécessite un rendu côté serveur et un meilleur SEO, consulte dans le catalogue d’applications la stack Nuxt plutôt que Vue pur.

Exigences

Pour déployer Vue sur Saplo, tu as besoin de :

• un Box dans n'importe quel plan, même S suffit - une SPA compilée est un ensemble de fichiers statiques, sans processus maintenu en mémoire après le build,
• au moins 256 MB de RAM libre pour le processus de build lui-même, ainsi que 2 GB d'espace disque,
• un domaine ou un sous-domaine *.saploapp.pl inclus dans le prix de chaque plan,
• un dépôt Git, si tu souhaites des déploiements automatiques (facultatif au départ, tu peux aussi téléverser l'application sous forme d'une archive .zip via le panneau).

Installation pas à pas

1. Dans le panneau Saplo, accède au Catalogue d'applications et choisis Vue.js (catégorie "Applications").
2. Sélectionne Box et le nom de l'application - le sous-domaine par défaut <name>.saploapp.pl est créé à partir de ce nom.
3. Choisis la version de Node.js à utiliser pour le build (18, 20 ou 22, 20 par défaut) et confirme l'installation.
4. Le moteur génère l'ossature Vue avec Vite (équivalent de npm create vite -- --template vue), installe les dépendances et compile le projet, tandis que le contenu du répertoire dist est placé directement dans le répertoire de l'application, servi par nginx.
5. Une fois l'installation terminée, le domaine de l'étape 2 affiche l'ossature initiale Vite + Vue - dès lors, tu y déploies ton propre code.

Déploiement de votre propre code via 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 dépôt du projet Vue.
2. Le fichier saplo.yaml doit se trouver à la racine du dépôt.
3. Commite et pousse le fichier saplo.yaml vers la branche de production (par défaut main).
4. Chaque nouveau git push poussé sur cette branche compile le projet et remplace le contenu du répertoire dist sur Box. Tu peux consulter le statut dans l’onglet Déploiements.
5. Si la compilation échoue, la dernière version fonctionnelle reste en place - Saplo ne la remplace pas par une version défectueuse.

Exemple de fichier saplo.yaml minimal pour Vue :

name: my-project
stack: vue
build:
  install: npm ci
  command: npm run build
  output: dist

Vue sur Saplo contre les alternatives

Questions fréquentes

Est-ce que Vue Router fonctionne en mode history sans configuration supplémentaire ? Oui, le repli de toutes les routes vers index.html est actif dès l'installation. Ainsi, actualiser une sous-page quelconque n'aboutit pas à une erreur 404.

Puis-je avoir plusieurs applications Vue sur une même Box ? Oui, le répertoire des applications permet d'héberger plusieurs modules côte à côte, chacun avec son propre sous-domaine ou domaine.

J'ai besoin de SSR et d'un meilleur SEO - que choisir ? La stack Nuxt dans le même répertoire, c'est Vue avec un rendu complet côté serveur.

Ai-je droit à SSL et à mon propre domaine ? Oui, le certificat SSL est automatique, et le domaine ou le sous-domaine *.saploapp.pl est inclus dans le prix de chaque formule.

Comment changer le répertoire de sortie du build si je n'utilise pas le répertoire par défaut dist ? Indique le chemin correct dans le champ build.output de saplo.yaml.

Tu peux déployer Vue sur Saplo en partant de zéro et obtenir un domaine fonctionnel en quelques minutes, tandis que le routage Vue Router fonctionne sans configuration manuelle. Si ton projet nécessite Eventually le SSR, la migration vers Nuxt dans le même répertoire ne demande aucun changement d'hébergement.