Readme update for Vite

Author: stasel

DEV.md

@@ -8,12 +8,14 @@ To start developing, make sure you have created the `.env` files and did the set
 
 ### 1.1 Client
 
-The client will be built using `webpack`. The configuration for that is in the `webpack.config.js` file. When running in production the command `npm run build` will be run which will create a `dist` folder with the compiled version of the code. When running in dev mode the `webpack-dev-server` will build it in memory. This will also automatically rebuild on file changes!
+The client will be built using `vite`. The configuration for that is in the `vite.config.js` file. When running in production the command `npm run build` will be run which will create a `dist` folder with the compiled version of the code. When running in dev mode the `vite` will build it in memory. This will also automatically rebuild on file changes!
 
-Our client will always run on `https://localhost:8080`. So if it does not automatically open your browser you can go to that URL. It will connect to the URL put in the `.env` file, defaulting to `https://localhost:3000`.
+Our client will always run on `https://localhost:5173`. So if it does not automatically open your browser you can go to that URL.
 
 You will also notice that to connect to the server our `useFetch` hook adds `/api` to the url. This is because on `heroku` our backend not only has its own routes but also hosts the client code. This way it allows us to differentiate between what needs to return the client code and what is an actual request to our backend.
 
+When developing, Vite is acting like a [proxy](https://vite.dev/config/server-options#server-proxy) to the real backend. This means that your browsers will not direct connect to the backend on `http://localhost:3000` to fetch the data. Instead, all your `fetch` requests will be directly made to `localhost:5173` to avoid any CORS issues. Then Vite will route the request to the backend and return the results from it.
+
 ### 1.2 Server
 
 The server will be run from the `index.js` file. This is separate from the `app.js` for testing purposes. In dev mode it will be ran using `nodemon`, in production using `node`. The `.env` determines the port and the URL to the mongodb database. If you change the port here, then don't forget to also change it on the client side.

README.md

@@ -66,7 +66,8 @@ server
 - `pages` || the page components of our app, any routing will go between these components
 - `pages/components` || components used specifically on those pages
 - `util` || any utility functions that can be used anywhere on the client side
-- `index.jsx` || the start point of the client
+- `main.jsx` || the start point of the client
+- `vite.config.js` || to configure vite
 
 ### 2.2 Cypress structure