Deploy React app in vercel with backend in render

Question

I was trying to deploy my vite react application in vercel. I hosted it's backend part in render, Now backend is working, but when i hosted in frontend, the request URL change to hosted URL because I used vite proxy to use shortcut URL but it's not working in devlopment,

Example of my vite config

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VitePWA(manifestForPlugin),
    react(),
  ],
  server: {
    proxy: {
      "/api": {
        target: "https://sample__.onrender.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace("/api", ""),
      },
    },
  },
  build: {
    proxy: {
      "/api": {
        target: "https://mydomain.onrender.com/", 
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace("/api", ""),
      }
    }
  }
});

so when i call api my url is like: api/auth/login/

so in localhost, it will became, localhost:8000/auth/login/

but when i did it from dev server of vercel it become like mydomain.onrender.com/api/auth/login/

In localhost my backend is running in 8000 and frontend is running in 5173

Answer 1

You can use vercel rewrites as a reverse proxy, you can refer to the docs here