I am developping a website with vite which seem work like it should on localhost.
I deployed on Vercel and the site was build without errors.
But I discovered a big problem when I wanted to generate my sourcemaps. In fact, when I want to visit any page directly (.../about for example) vercel sends me a "404 not found" error. But when I go to the root page and navigate to the page manually everything is working.
Second time i visit the /about page directly, it works, but because it has been cached by my browser i think ...
hosting : vercel
base url: https://dev.energie-etre-ange.fr
404 example url : https://dev.energie-etre-ange.fr/about
used plugins :
I can give the github link if needed, but i think this is mostly a vercel problem ? I found a linked problem on stackoverflow, but with React (link)
Answer found here : https://stackoverflow.com/a/66686684/13541914
Credit goes to shantiscrip
Solution:
This is not a problem with vite.js but due to with a missing configuration file for vercel which is added by default to the existing templates. For a single page application the html files for the routes created with react router don't exist, so something on the server needs to create rewrites to make sure every request points at '/' or index.html. In Vercel this can be done by adding a rewrite to config file in the root of the project called
vercel.json
https://vercel.com/docs/configuration
Add rewrites for all routes to the file that point to '/'
{
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
}