Accessing a url in a Svelte app with svelte-router results in 404

Mar 21, 2023
< >

I have an app that uses Svelte as SPA frontend framework and svelte-router to differentiate the routes.

During development on my local machine everything works fine. But as soon as I deployed my app via vercel I got problems accessing different routes.

A call to resulted in a 404.

The problem was that the server serving the frontend tried to find a route or file with /lists that didn’t exist. But the route argument has to be served to the index file containing the routing logic.

Adding a rewrite route in a vercel deployment is fairly easy. You just have to add/modify the vercel.json to your folder containing the project (e.g. the folder with the package.json).

    "rewrites": [{ "source": "/(.*)", "destination": "/" }]

After that I could access the desired routes.

In the following picture I illustrate the scenario and my journey :)

The scenario why I got a 404

</ >