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
https://domain.com/page-1
Instead of calling
https://domain.com/dev/page-1
The same happened with the assets folder like
https://domain.com/someFile.js
Instead of calling
https://domain.com/assets/someFile.js
What to do
Alright, I guess this is too much of an explanation, lets go to the solutions.
React
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.
Vite
Not much to configure here, you can follow the documentation on github pages https://vitejs.dev/guide/static-deploy/ and set the base key in your vite.config.js to your dev directory like this:
See the build instructions at https://vitejs.dev/guide/build.
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.
Reply