404 "NOT_FOUND" on after vite deployment

[atul654]

I deployed a vite app on vercel , the deployment was successful, but when I visit a particular route it shows 404 Not Found Error

Deployment State

404 “NOT_FOUND” Error on page

I’m using typescript with vite and in tsConfig I have mentioned
rootDir: “./src”
outDir: “./dist”

so vite makes build on dist folder on root directory as I have shown in screenshot below

I have used this configuration in vercel.json

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

These are my project settings

PS: I’m using react-router-dom for route handling in vite app

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[pawlean (Pauline P. Narvas)]

Hi, @atul654! Welcome to the Vercel Community

Did you go through our 404 community post? Might be helpful for you to debug!