> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hodi.host/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Comment déployer mon site dans un sous-dossier ?

Vous pouvez déployer un projet à la racine d'un domaine (`exemple.africa`) ou dans un **sous-dossier** de ce domaine (`exemple.africa/app/`). Le sous-dossier est pratique : il permet d'héberger plusieurs projets sur un même domaine, chacun avec son propre dépôt.

Une seule chose est à savoir, et c'est la cause la plus fréquente de « mon site s'affiche mais sans style » : **votre build doit connaître le chemin où il sera servi**.

## Pourquoi c'est nécessaire

À la racine d'un domaine, un fichier appelé `/assets/app.css` est trouvé sans effort. Dans un sous-dossier, le vrai chemin devient `/app/assets/app.css`, mais votre build a écrit `/assets/app.css` dans le HTML. Le navigateur demande donc un fichier qui n'existe pas : la page s'affiche, sans CSS ni JavaScript, et la console montre des erreurs 404.

Ce n'est pas un réglage Hodifly : c'est une option de votre framework, parce que lui seul peut réécrire les chemins au moment du build.

## Le réglage, framework par framework

Pour un déploiement dans `/app/` :

| Framework | Réglage |
|---|---|
| Vite (et Vue, React, Svelte sur Vite) | `base: "/app/"` dans `vite.config` |
| Next.js | `basePath: "/app"` dans `next.config` |
| Nuxt | `app: { baseURL: "/app/" }` dans `nuxt.config` |
| Astro | `base: "/app"` dans `astro.config` |
| SvelteKit | `paths: { base: "/app" }` dans `svelte.config.js` |
| Remix / React Router v7 | `basename: "/app"` dans la config du plugin Vite |
| TanStack Start | `router: { basepath: "/app" }` dans les options du plugin Vite TanStack Start |
| Angular | `--base-href /app/` |
| Create React App | `"homepage": "/app"` dans `package.json` |
| Ruby on Rails | `config.relative_url_root = "/app"` |
| Slim, Symfony, Laravel | rien à faire : le contrôleur frontal détecte le préfixe |
| HTML statique | rien à faire : utilisez des chemins relatifs (`assets/app.css`, sans `/` initial) |

||| 💡 Astuce : gardez la même valeur partout, y compris le `/` final quand le framework l'attend (Vite et Nuxt en veulent un, Next.js et Astro non). Une valeur incohérente produit des chemins en double du type `/app/app/assets/…`.

## Comment déployer dans un sous-dossier

1. Dans **cPanel > Hodifly**, créez votre projet normalement.
2. Au moment de choisir le domaine, indiquez le **sous-dossier** souhaité (par exemple `app`).
3. Ajoutez le réglage ci-dessus dans votre dépôt, puis poussez.

Hodifly crée le dossier et y publie la version déployée. Chaque projet du domaine reste indépendant : ses déploiements, ses versions et ses retours arrière ne touchent pas les autres.

## Et si le site est déjà en ligne sans style ?

Ajoutez le réglage correspondant à votre framework, poussez : le déploiement suivant corrige les chemins. Aucune manipulation n'est nécessaire côté hébergement.

Si le problème persiste, ouvrez le journal de déploiement (**cPanel > Hodifly**, puis votre projet) et vérifiez que le build a bien été relancé, puis regardez la console du navigateur : l'URL réellement demandée vous dira quel préfixe manque.

## À lire aussi

* [Que puis-je déployer sur Hodifly ?](https://help.hodi.host/fr/article/que-puis-je-deployer-sur-hodifly-1w02yb0/)
* [Comment connecter mon dépôt Git ?](https://help.hodi.host/fr/article/comment-connecter-mon-depot-git-diilcj/)