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
You can a create simple rewrites rules in the serve. In my case I use Vercel. Then you can find something similar this.
Create in the project root a file vercel.json
And writer
{
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
P.S.: Don't forget to enable rewrites in vercel.