Comment installer Svelte (SPA simple) sur Saplo

Svelte compile les composants en JavaScript pur pendant le build, sans DOM virtuel chargé dans le navigateur. Le bundle résultant est donc l'un des plus petits parmi les frameworks populaires. Dans la variante SPA simple (sans SSR, sans le framework SvelteKit), Svelte est construit par Vite en un petit nombre de fichiers HTML, CSS et JS statiques, exactement comme React ou Vue. Sur Saplo, tu installes Svelte (SPA simple) de la même manière que toute autre application du catalogue : le moteur génère le projet, le construit avec Vite et expose le répertoire dist prêt à l'emploi sous nginx, sans aucun processus Node en arrière-plan après le build.

À qui s'adresse Svelte (SPA simple) sur Saplo ?

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

• Tu construis un panneau ou un tableau de bord pour des clients - Saplo sert un build prêt à l'emploi comme des fichiers statiques, sans processus Node propre en arrière-plan.
• Le frontend doit se connecter à ta propre API - Tu déploies une SPA à côté du backend (Django, Node, Docker) sur la même Box ou séparément.
• Tu souhaites un bundle aussi petit que possible - Le compilateur Svelte supprime le framework du code résultant, de sorte que la page démarre plus rapidement qu'avec les bibliothèques basées sur un DOM virtuel.
• Le projet n'a pas besoin de rendu côté serveur - Si tu as besoin de SSR et d'un meilleur SEO, tu trouveras SvelteKit dans le même catalogue.
• Tu souhaites des déploiements avec git push au lieu de l'envoi manuel de fichiers par FTP - Tu connectes le dépôt une fois, chaque push sur la branche de production construit et déploie automatiquement une nouvelle version.

Si le projet a besoin de rendu côté serveur, de routage basé sur des fichiers ou d'un meilleur SEO dès le départ, consulte la pile SvelteKit dans le catalogue d'applications au lieu de Svelte pur.

Exigences

Pour installer Svelte (SPA simple) sur Saplo, tu as besoin :

• D'une Box de n'importe quel plan, même la S est suffisante - une SPA construite est un ensemble de fichiers statiques, sans processus maintenu en mémoire après la construction,
• D'un minimum de 256 Mo de RAM libre pour le processus de construction lui-même et 2 Go d'espace disque,
• D'un domaine ou sous-domaine *.saploapp.pl inclus dans chaque plan,
• D'un dépôt Git, si tu souhaites des déploiements automatiques (facultatif au début, tu peux aussi télécharger l'application via une archive .zip depuis le Panneau).

Installation étape par étape

1. Dans le Panneau Saplo, accède au Catalogue d'applications et sélectionne Svelte (catégorie "Applications", description "Frontend SPA léger").
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 le build (18, 20 ou 22, 20 par défaut) et confirme l'installation.
4. Le moteur initialise le squelette Svelte via Vite (équivalent à npm create vite -- --template svelte), installe les dépendances et build le projet. Le contenu du dossier dist est ensuite directement placé dans le répertoire de l'application, servi par nginx.
5. Une fois l'installation terminée, le domaine de l'étape 2 affiche le squelette de démarrage Vite + Svelte. À partir de ce moment, tu peux y déployer ton propre code.

Déployer ton propre 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 dépôt avec le projet Svelte.
2. Le fichier saplo.yaml doit se trouver dans le répertoire racine du dépôt.
3. Valide et pousse le fichier saplo.yaml vers la branche de production (par défaut main).
4. Chaque git push suivant vers cette branche crée le projet et remplace le contenu du répertoire dist 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 Svelte:

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

Svelte (SPA simple) sur Saplo vs. les alternatives

Questions fréquentes

Quelle est la différence entre Svelte (SPA simple) et SvelteKit dans le catalogue Saplo ? SPA simple fait référence à des fichiers statiques sans SSR et sans processus Node en arrière-plan, construits uniquement avec Vite. SvelteKit est un framework complet avec SSR optionnel, exécuté sur Saplo comme un processus de longue durée avec redémarrage automatique.

Puis-je avoir plusieurs applications Svelte sur une seule Box ? Oui, le catalogue d'applications te permet d'installer 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 pile SvelteKit du même catalogue - c'est Svelte avec un rendu côté serveur complet.

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 modifier le répertoire de sortie de la construction si je n'utilise pas le répertoire par défaut dist ? Règle le champ build.output dans saplo.yaml sur le chemin correct.

Tu peux installer Svelte (SPA simple) sur Saplo, de zéro à un Domaine fonctionnel en quelques minutes, et le bundle résultant est l'un des plus légers parmi les piles disponibles. Si le projet nécessite un SSR, la Migration vers SvelteKit dans le même catalogue ne nécessite pas de changer d'hébergement.