Deploy a react and vite application to a subdirectory in your domain.

This is a checklist of the steps to take to deploy a build to a subfolder, if you are having headaches with react and vite you might want to take a look at the following points.

I developed a 3D application using the following tools:

And I wanted to deploy a test build in a \ subfolder in my server, vite is really easy but I thought it was building the urls in the wrong way because I couldn’t access my assets in the subfolder inside my root.

For example, the application called

Instead of calling

The same happened with the assets folder like
Instead of calling

What to do

Alright, I guess this is too much of an explanation, lets go to the solutions.


In my case the application uses BrowserRouter, so check if you’re deploying to the subfolder in your domain using the basename attribute.

Don’t forget to change the basename back if you want to deploy to the root of your domain.


Not much to configure here, you can follow the documentation on github pages and set the base key in your vite.config.js to your dev directory like this:

See the build instructions at
You can configure a path in the package.json file using something like this. I didn’t test it though.

vite build --base=/dev/

Special case using react three fiber

I’m loading my GLB assets from the public folder, so I load them using the root directory “/” and add the suffix “?url” to import the explicit url.

The caveat

If the model is loaded into another component with the url as a prop, then you should use the current working directory path “./” as the url.

Component example
Load the component inside another component using a URL.

I’m not an expert on vite, this is my third project using it, and the first with react three fiber and load models. If you find this useful or you want to make a correction or add something relevant to the discussion, leave a comment because I’m interested in learning more about Vite, React and ThreeJS.


Posted in

0 responses


Your email address will not be published. Required fields are marked *