> ## Documentation Index
> Fetch the complete documentation index at: https://docs-kit.lucdidion.lu/llms.txt
> Use this file to discover all available pages before exploring further.

# Déploiement Netlify & Hostinger

> Configuration du déploiement frontend, Netlify Functions et hébergement

## Prérequis

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

***

## Configuration du projet

### Build Vite

Le build Vite génère un dossier `dist/` contenant les fichiers statiques :

```bash theme={null}
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 :

```apache theme={null}
<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)

<Steps>
  <Step title="Build local">
    ```bash theme={null}
    npm run build
    ```

    Vérifiez que le dossier `dist/` est généré sans erreurs.
  </Step>

  <Step title="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
  </Step>

  <Step title="Upload">
    Uploadez le contenu du dossier `dist/` vers `public_html/` (ou le sous-dossier de votre domaine).

    N'oubliez pas le `.htaccess` !
  </Step>

  <Step title="Vérification">
    Accédez à votre domaine et vérifiez que l'application charge correctement.
    Testez la navigation (les routes doivent fonctionner sans 404).
  </Step>
</Steps>

***

### Option 2 : Git Auto Deploy (recommandé)

Hostinger propose un déploiement automatique via Git :

<Steps>
  <Step title="Activer Git dans hPanel">
    **hPanel** → **Avancé** → **Git** → Créer un repository ou lier un repository GitHub existant
  </Step>

  <Step title="Configurer le build">
    Si Hostinger supporte les builds Node.js (plan Cloud) :

    * **Branch :** `main`
    * **Build command :** `npm install && npm run build`
    * **Publish directory :** `dist`
  </Step>

  <Step title="Variables d'environnement">
    Configurez dans hPanel les variables nécessaires au build :

    ```bash theme={null}
    VITE_NHOST_SUBDOMAIN=gqvlmqwbsmkhlllmgbyw
    VITE_NHOST_REGION=eu-central-1
    ```

    <Warning>
      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.
    </Warning>
  </Step>

  <Step title="Déployer">
    Chaque push sur `main` déclenche un redéploiement automatique.
  </Step>
</Steps>

***

## Custom Domain & SSL

### Configurer le domaine

Dans **hPanel** → **Domaines** :

1. Ajoutez votre domaine (ex: `kit.lucdidion.lu`)
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.

***

## Netlify Functions

Le projet utilise **Netlify Functions** pour les opérations serverless, notamment l'envoi d'email des rapports quiz.

### Configuration

**Fichier :** `netlify.toml`

```toml theme={null}
[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

### send-report — Envoi de rapport par email

**Fichier :** `netlify/functions/send-report.ts`

Envoie le rapport du quiz diagnostic par email via l'API **Resend**.

**Endpoint :** `POST /.netlify/functions/send-report`

**Caractéristiques :**

* Rate limiting : 3 emails par IP par heure
* Validation d'email et sanitization HTML
* CORS restreint à `https://kit.lucdidion.lu`
* Template HTML responsive avec profil, outils, plan d'action

**Variables d'environnement requises :**

```bash theme={null}
# Dans Netlify Dashboard → Site settings → Environment variables
RESEND_API_KEY=re_xxxxxxxxxxxx
```

<Warning>
  Sans la variable `RESEND_API_KEY`, la fonction retourne une erreur 500. Configurez-la dans le dashboard Netlify.
</Warning>

### Security Headers

**Fichier :** `_headers`

Le projet configure des headers de sécurité via Netlify :

* **Content-Security-Policy** (CSP) avec directives strictes
* **Strict-Transport-Security** (HSTS)
* **X-Frame-Options** : DENY
* **X-Content-Type-Options** : nosniff

***

## 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 :

```typescript theme={null}
// 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`)
* [ ] Netlify Function send-report fonctionne (RESEND\_API\_KEY configurée)
* [ ] Security headers actifs (CSP, HSTS)

***

## Ressources

<CardGroup cols={2}>
  <Card title="Nhost Setup" icon="database" href="/deployment/supabase">
    Configuration backend Nhost
  </Card>

  <Card title="Monitoring" icon="chart-line" href="/deployment/monitoring">
    Logs et surveillance
  </Card>

  <Card title="Vite Config" icon="bolt" href="https://vitejs.dev/config/">
    Configuration Vite
  </Card>

  <Card title="Hostinger Docs" icon="book" href="https://support.hostinger.com">
    Documentation Hostinger
  </Card>
</CardGroup>