I’m serving my react app from Express on Vercel and my initial home page gets served as expected. But for every route on the frontend I’m getting Not Found error.

This is my project structure of Vercel:
Project structure

My middleware setup

app.use(express.static(path.join(__dirname, 'server', 'dist')));

app.get('*', (req, res) => { 
      res.sendFile(path.join(__dirname, 'server', 'dist', 'index.html'));
});

My homepage gets served as expected. But every other route on the frontend is not working. My guess is that this has something to do with the vercel config file.

this is how my vercel.json looks:

{ 
  "version": 2, 
  "outputDirectory": "dist", 
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

I tried adding different configs but in vain:

"routes": [{ "src": "/", "dest": "/index.html" }] 
//this overrides rewrites property above so the app crashes. 

"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],
//cannot find the /api index.js file in this case

"redirects": [{ "src": "/api/(.*)", "dest": "/index.html" }] 
//everything gets rerouted to vercel.app/index.html instead of serving the file 

Can someone point me to the right direction?