I have boilerplate-like single-page application with wouter
-based routing - application is functional in local environment. Goal I'm trying to archive is deployment of mentioned application to vercel
, yet there is a problem in application routing - things are ok when I run application locally but it returns Not Found (404) errors when it's deployed to cloud.
Deployment has no problem when it's run through procfile
, Docker Container or "bare-metal" - but one it touches Vercel's Edge application do not care about routing at all.
I have tried multiple routing libraries (wouter
, react-router
) and problem still existed and behaved without any difference.
Implementation of routing is correct, and path rewrites which are required and recommended by Vercel are configured in vercel.json
and are provided below.
{
"github": {
"silent": true
},
"rewrites": [
{
"source": "(.*)",
"destination": "/index.html"
}
]
}
Commonly proposed solution for similar Vercel-related problems was following configuration yet this still do not change outcome at all.
{
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
My file structure is following, as my project is mono-repository managed by turbo
.
.
├── apps/
│ └── web/
│ ├── src
│ └── package.json
└── vercel.json
TL;DR
For monorepository configurations vercel.json
should be contained under $ROOT/$PROJECT/vercel.json
instead $ROOT/vercel.json
.
$ROOT/$PROJECT/vercel.json
{
"github": {
"silent": true
},
"rewrites": [
{
"source": "(.*)",
"destination": "/index.html"
}
]
}
Configuration in vercel.json
was correct at the time it was added to question, the issue was not present in project configurations that were single-package repositories with vercel.json
at Root Directory along package.json
. Yet with monorepository approach same configuration had different behaviour than expected (as one in single-package repository) - solution for such problem was moving vercel.json
into Project Directory of repository where package.json
was contained (the one which indicates workspace, instead one which indicates given React.js project).