Comment installer React sur Saplo (SPA et dashboard sans backend)

React est aujourd'hui le choix standard pour la construction d'interfaces, mais React lui-même n'est pas un hébergement - c'est une bibliothèque d'interface utilisateur. Un projet construit (le plus souvent par Vite) est un ensemble de fichiers statiques HTML, CSS et JS, qui doivent être exposés quelque part avec un routage SPA correct (fallback de tous les chemins vers index.html) et sans processus en arrière-plan inutile. Un hébergement partagé ordinaire vous demande de télécharger des fichiers manuellement via FTP et ne gère pas le fallback des routes, et les plateformes payantes vous facturent chaque requête et chaque construction. Sur Saplo, tu installes React comme toute autre application du catalogue : le moteur construit le projet, expose le répertoire dist prêt pour nginx et gère lui-même la redirection des routes.

À qui s'adresse React sur Saplo

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

• Tu construis un panneau d'administration ou un tableau de bord pour tes clients - Saplo sert un build prêt à l'emploi sous forme de fichiers statiques, sans son propre serveur Node maintenu en mémoire,
• 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 entres l'adresse de l'API comme variable d'environnement du build,
• Le projet n'a pas besoin de rendu côté serveur - Si le SEO et le SSR sont importants pour toi, consulte le stack Next.js dans le catalogue d'applications au lieu de React pur,
• Tu veux des déploiements avec git push au lieu du transfert manuel de fichiers via FTP - Tu connectes le dépôt une fois, chaque push vers la branche de production construit et déploie automatiquement une nouvelle version.

Exigences

Pour installer React sur Saplo, tu as besoin :

• D'un Box dans n'importe quel plan, même un S suffit - un SPA construit est un ensemble de fichiers statiques. Après le build, aucun processus Node n'est conservé en mémoire, de sorte que l'utilisation de la RAM après l'installation tombe pratiquement à zéro.
• D'un minimum de 256 Mo de RAM libre pour le processus de build lui-même (Vite compile le projet une fois, lors de l'installation et à chaque git push) et de 2 Go d'espace disque.
• D'un domaine ou d'un sous-domaine *.saploapp.pl inclus dans le prix de chaque plan, sur lequel l'application sera installée.
• D'un dépôt Git, si tu souhaites utiliser le déploiement automatique (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, va dans Catalogue d'applications et sélectionne React (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 construction (18, 20 ou 22, par défaut 20) et confirme l'installation.
4. Le moteur génère un squelette React via Vite (l'équivalent de npm create vite -- --template react), installe les dépendances et construit le projet, et le contenu du répertoire dist est 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 + React - à partir de ce moment, tu y déploies ton propre code.

Déploie ton 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" sur ton compte ou ton organisation et indique le dépôt avec le projet React.
2. Le fichier saplo.yaml doit se trouver dans le répertoire racine du dépôt.
3. Committe 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 le contenu du répertoire dist sur la Box. Tu peux voir le statut dans l'onglet Déploiements.
5. Le routage SPA (tous les chemins mènent à index.html) est configuré automatiquement - tu n'as rien à ajouter dans nginx.

Exemple de fichier saplo.yaml minimal pour React :

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

React sur Saplo vs alternatives

Questions fréquentes

Puis-je avoir plusieurs applications React 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, tant que tu as suffisamment de RAM et d'espace disque alloués à ton plan.

Qu'en est-il du routage côté client (React Router) ? Cela fonctionne sans configuration supplémentaire. Le fallback de tous les chemins vers index.html est configuré immédiatement lors de l'installation.

Dois-je utiliser Vite ? L'installation depuis le catalogue crée le projet via Vite, mais tu peux déployer ton propre projet (y compris ceux basés sur un autre bundler) via Git, tant que le build exporte les fichiers prêts vers le répertoire spécifié dans build.output.

Est-ce que j'aurai le SSL et mon propre Domaine ? Oui, le certificat SSL est automatique, et tu as un Domaine ou un sous-domaine *.saploapp.pl inclus dans le Prix de chaque plan.

Comment changer la version de Node.js utilisée pour le build ? Lors de la création de l'application depuis le catalogue, tu choisis 18, 20 ou 22. Pour les déploiements via Git, tu la configures avec le champ runtime.node dans saplo.yaml.

Tu déploies React sur Saplo depuis zéro jusqu'à un Domaine fonctionnel en quelques minutes, et chaque git push suivant déploie une nouvelle version sans avoir à transférer manuellement les fichiers. Si ton projet nécessite le SSR et un meilleur SEO, consulte la stack Next.js dans le même catalogue.