Articles on: 🌍 Web Hosting & PaaS
This article is also available in:

How do I deploy my site in a subfolder?

You can deploy a project at the root of a domain (example.africa) or in a subfolder of that domain (example.africa/app/). Subfolders are handy: they let you host several projects on one domain, each with its own repository.


There is one thing to know, and it is the most common cause of "my site loads but has no styling": your build has to know the path it will be served from.


Why this is needed


At a domain root, a file called /assets/app.css is found without effort. In a subfolder the real path becomes /app/assets/app.css, but your build wrote /assets/app.css into the HTML. The browser then asks for a file that does not exist: the page renders with no CSS and no JavaScript, and the console shows 404s.


This is not a Hodifly setting: it is an option of your framework, because only the framework can rewrite those paths at build time.


The setting, framework by framework


For a deployment in /app/:


Framework

Setting

Vite (and Vue, React, Svelte on Vite)

base: "/app/" in vite.config

Next.js

basePath: "/app" in next.config

Nuxt

app: { baseURL: "/app/" } in nuxt.config

Astro

base: "/app" in astro.config

SvelteKit

paths: { base: "/app" } in svelte.config.js

Remix / React Router v7

basename: "/app" in the Vite plugin config

Angular

--base-href /app/

Create React App

"homepage": "/app" in package.json

Ruby on Rails

config.relative_url_root = "/app"

Slim, Symfony, Laravel

nothing to do: the front controller detects the prefix

Static HTML

nothing to do: use relative paths (assets/app.css, with no leading /)


💡 Tip: keep the same value everywhere, including the trailing / when the framework expects one (Vite and Nuxt want it, Next.js and Astro do not). An inconsistent value produces doubled paths like /app/app/assets/….


How to deploy into a subfolder


  1. In cPanel > Hodifly, create your project as usual.
  2. When choosing the domain, enter the subfolder you want (for example app).
  3. Add the setting above to your repository, then push.


Hodifly creates the folder and publishes the deployed release into it. Each project on the domain stays independent: its deploys, releases and rollbacks never touch the others.


What if the site is already live with no styling?


Add the setting for your framework and push: the next deploy fixes the paths. Nothing needs doing on the hosting side.


If the problem persists, open the deploy log (cPanel > Hodifly, then your project) and check the build actually re-ran, then look at the browser console: the URL actually requested tells you which prefix is missing.


See also


Updated on: 15/08/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!