I have designed backend of my MERN application using typescript with all the configurations required for ts. Following is hierarchy of my project:

Following is my tsconfig.json.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

My project works fine when I run it in dev mode locally. Even when I run npm run build locally, It compiles my index.ts file into js and creates dist folder in root. In my project, my root route returns “Hello World” message on Get method.

I am trying to deploy this on vercel and it’s getting deployed successfully but when I try to run in browser, I get Not Found page on root route as following:

I have created vercel.json file in root with following configurations:

{
  "version": 2,
  "builds": [
    { "src": "src/index.ts", "use": "@vercel/node", "config": { "distDir": "dist" } }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Cache-Control": "max-age=0, s-maxage=86400, stale-while-revalidate"
      }
    }
  ]
}

I also tried to check source of latest deployment on vercel but I can’t see any dist folder. How can I fix this deployment issue?