setup proxy for vite during developement

client/src/App.tsx

@@ -1,34 +1,38 @@
-import { useState } from 'react'
+import { useState } from 'react';
-import reactLogo from './assets/react.svg'
+import './App.css';
-import './App.css'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [test, setTest] = useState('Loading...');
+
+  const credentials = {
+    email: 'email',
+    password: 'password',
+  };
+
+  fetch('/api/auth/login', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(credentials),
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      setTest(JSON.stringify(data));
+    })
+    .catch((err) => {
+      setTest(JSON.stringify(err));
+    });
 
   return (
     <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
+        <div>
-          count is {count}
+          <p>test is {test}</p>
-        </button>
+        </div>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

client/vite.config.ts

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
-})
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+});

src/index.ts

@@ -2,7 +2,7 @@ import express, { urlencoded, json } from 'express';
 import cors from 'cors';
 import api from '@/api';
 
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 5000;
 
 const app = express();
 app.use(cors());