MERN Fullstack Client & Server Conflict

I have a project that contains both the frontend/client, and the backend/server of my application. I’m using Express and NodeJS to host a server, and using Vite for client-side development, in order to publicly see my Vite on the client-side I use “host:” in vite.config. The problem I have here is that I’m running my server on port 4000 and my client on port 3001, but when I start them both up in the repl project, due to conflicts, only the client gets rendered, and ignores all endpoints/routes and requests towards the server-side. Can somebody help me resolve this issue, without a solution of “Use two different projects, one for frontend, and one for backend” if possible.

See the documentation on running multiple ports in one Repl:

I’m not sure if I’m doing anything wrong here but if I run the exact same client in a separate it functions correctly and displays the backend data, but in techs same repl it throws an “AxiosError 404 not found”Here’s The Repl