How can I deploy repo with both frontend and backend to same vercel project

Question

i am looking for help deploying a repo to vercel with the following structure-client-- contains react + vite app-server-- contains express node app

i want so that any route leads to react app but if it starts with /api/ it responds with backendyes, I want to do this in same vercel project not two separate projects

So, I have the following Vercel.json

{  "version": 2,
  "builds": [
    {
      "src": "server/index.ts",
      "use": "@now/node"
    },
    {
      "src": "client/main.tsx",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/server/index.ts"
    },
    {
      "src": "/(.*)",
      "dest": "/client/dist/$1"
    }
  ]
}

so my /api routes work fine and i get express resposnes but my react app is not working

Please do help

Github repo : https://www.github.com/marsian83/monohostVercel Deployment : monohost.vercel.app

Answer 1

{
  "version": 2,
  "builds": [
    { "src": "package.json", "use": "@vercel/static-build" },
    { "src": "/server/index.js", "use": "@vercel/node" }
  ],
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/server/index.js" },
    { "source": "(.*)", "destination": "/index.html" }
  ]
}