I've set up a simple vanilla JS SPA webapp and been having trouble figuring out how to fix some routing issues I hope can be solved with proper vercel.json config or similar.
The website is live here: https://kor.nz/
The website code is public here: https://github.com/kormyen/home
I've had to break the URLs below as StackOverflow said "Your question appears to be spam."
You will see that this one directory deep URL works: kor_nz/projects However this two directory deep URL does not load: kor_nz/projects/home
You can route successfully from either of the first to URLs to the third, but not refresh, open in a new tab or click a link to the third.
I can see that with the two directory deep URL kor_nz/projects/home that it is serving every file request with the content of index.html instead of their respective jpg, css, js etc.
My current semi-functioning (explained above) vercel.json file is currently:
{
"trailingSlash": false,
"rewrites": [
{ "source": "/:path*", "destination": "/index.html" }
]
}
I have tried several attempts to make this work, but giving up and asking for help :)
{
"routes": [
{
"src": "/(.*\\.(js|css|png|jpg|gif|svg|woff2?|eot|ttf|otf))$",
"dest": "/$1"
},
{
"src": "/.*",
"dest": "/index.html"
}
]
}
Is the same.
{
"rewrites": [
{
"source": "/:path*.js",
"destination": "/:path*.js"
},
{
"source": "/:path*.css",
"destination": "/:path*.css"
},
{
"source": "/:path*.png",
"destination": "/:path*.png"
},
{
"source": "/:path*.jpg",
"destination": "/:path*.jpg"
},
{
"source": "/:path*.gif",
"destination": "/:path*.gif"
},
{
"source": "/:path*.svg",
"destination": "/:path*.svg"
},
{
"source": "/:path*.woff",
"destination": "/:path*.woff"
},
{
"source": "/:path*.woff2",
"destination": "/:path*.woff2"
},
{
"source": "/:path*.eot",
"destination": "/:path*.eot"
},
{
"source": "/:path*.ttf",
"destination": "/:path*.ttf"
},
{
"source": "/:path*.otf",
"destination": "/:path*.otf"
},
{
"source": "/:path*",
"destination": "/index.html"
}
]
}
Is the same.
{
"rewrites": [
{
"source": "/:path((?!^_next|api).*)",
"destination": "/index.html"
}
]
}
Is the same.
{
"rewrites": [
{
"source": "/:path*/:file+",
"destination": "/:path*/:file+"
},
{
"source": "/:path*/",
"destination": "/:path*/index.html"
}
]
}
Works for the homepage but not any directories, resulting in a 404 response.
I suspect a solution might look something like this, but need some pointers.
Otherwise if I must rebuild the site differently thats frustrating but so be it.
{
"rewrites": [
{
"source": "/:path*/:file+",
"destination": "/:path*/:file+"
},
{
"source": "/:path*/",
"destination": "/:path*/index.html"
},
{
"source": "/:path*//:path*/",
"destination": "/index.html"
}
]
}
what you expected to happen
I expect to be able to access any url on my website including;
Your vercel.json is correctly configured. However, your asset paths are wrong in your index.html
Change
<link rel="stylesheet" href="asset/style.css" />
to this:
<link rel="stylesheet" href="/asset/style.css" />
Note the added / in front of the asset path.