Skip to main content

​
Prérequis

Compte Hostinger avec hébergement Web ou Cloud
Repository Git configuré sur GitHub
Build de production fonctionnel localement (npm run build)
Variables d’environnement Nhost prêtes

​
Configuration du projet

​
Build Vite

Le build Vite génère un dossier dist/ contenant les fichiers statiques : 
npm run build
# Output dans dist/
Fichiers générés :
  • dist/index.html — Point d’entrée SPA
  • dist/assets/ — JS/CSS bundlés avec hash (cache-friendly)

​
Fichier .htaccess (SPA routing)

Créez ce fichier dans le dossier dist/ (ou à la racine du domaine sur Hostinger) pour gérer le routing SPA : 
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Ne pas réécrire les fichiers et dossiers existants
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # Rediriger tout vers index.html (SPA)
  RewriteRule ^ index.html [QSA,L]
</IfModule>

# Cache agressif pour les assets avec hash
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

# Compression Gzip
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

# Sécurité
<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "DENY"
  Header set X-XSS-Protection "1; mode=block"
</IfModule>

​
Déploiement

​
Option 1 : Upload FTP/SFTP (simple)

1

Build local

npm run build
Vérifiez que le dossier dist/ est généré sans erreurs.
2

Connexion SFTP

Utilisez FileZilla ou un client SFTP :
  • Hôte : votre domaine ou IP Hostinger
  • Port : 22 (SFTP) ou 21 (FTP)
  • Identifiants : ceux fournis par Hostinger dans hPanel
3

Upload

Uploadez le contenu du dossier dist/ vers public_html/ (ou le sous-dossier de votre domaine).N’oubliez pas le .htaccess !
4

Vérification

Accédez à votre domaine et vérifiez que l’application charge correctement. Testez la navigation (les routes doivent fonctionner sans 404).

​
Option 2 : Git Auto Deploy (recommandé)

Hostinger propose un déploiement automatique via Git :
1

Activer Git dans hPanel

hPanel → Avancé → Git → Créer un repository ou lier un repository GitHub existant
2

Configurer le build

Si Hostinger supporte les builds Node.js (plan Cloud) :
  • Branch : main
  • Build command : npm install && npm run build
  • Publish directory : dist
3

Variables d'environnement

Configurez dans hPanel les variables nécessaires au build :
VITE_NHOST_SUBDOMAIN=gqvlmqwbsmkhlllmgbyw
VITE_NHOST_REGION=eu-central-1
Ces variables sont injectées au build (Vite les remplace dans le bundle). Elles ne sont pas secrètes — ce sont les identifiants publics du projet Nhost.
4

Déployer

Chaque push sur main déclenche un redéploiement automatique.

​
Custom Domain & SSL

​
Configurer le domaine

Dans hPanel → Domaines :
  1. Ajoutez votre domaine (ex: lucdidion.fr)
  2. Configurez les DNS chez votre registrar pour pointer vers Hostinger
  3. Attendez la propagation DNS (jusqu’à 48h)

​
HTTPS

Hostinger inclut un certificat SSL gratuit (Let’s Encrypt) :
  • hPanel → SSL → Installer SSL
  • Activation automatique après configuration DNS

​
Performance

​
Optimisations serveur

Hostinger fournit :
  • LiteSpeed Web Server (plus rapide qu’Apache)
  • Cache LiteSpeed intégré
  • CDN Cloudflare (optionnel, activable dans hPanel)
  • Compression Gzip/Brotli

​
Headers de cache

Les assets Vite contiennent un hash dans le nom de fichier (app-abc123.js), ce qui permet un cache très agressif sans risque de version obsolète.

​
Troubleshooting

​
404 sur les routes

Cause : Le fichier .htaccess manque ou la réécriture d’URL est désactivée. Solution : Vérifiez que le .htaccess est bien dans public_html/ et que mod_rewrite est activé (il l’est par défaut sur Hostinger).

​
Build échoue

Vérifications :
  1. Build fonctionne localement ? (npm run build)
  2. Version Node correcte ? (18+)
  3. Variables d’environnement définies ?

​
Page blanche

Cause possible : Les chemins des assets sont incorrects. Solution : Vérifiez que base dans vite.config.ts est correct : 
// Pour racine du domaine (par défaut)
base: '/'

// Pour sous-dossier
base: '/kitasso/'

​
Checklist déploiement

  • Build local réussi (npm run build)
  • Tests passent (npm test)
  • .htaccess configuré pour SPA routing
  • Variables Nhost configurées au build
  • Fichiers uploadés dans public_html/
  • SSL activé
  • Routes SPA fonctionnelles (pas de 404)
  • Admin accessible (/admin)

​
Ressources

Nhost Setup

Configuration backend Nhost

Monitoring

Logs et surveillance

Vite Config

Configuration Vite

Hostinger Docs

Documentation Hostinger