• In early stage, I config Vite’s dev server proxy as following:

server: {
		 ...
     **proxy: {
         '/api/v1': {
             target: process.env.VITE_BASE_URL,
             changeOrigin: true,
             secure: true,
         },
     },**
},

• so that when calling an endpoint, I don’t have to write out the whole path, but rather just the shortcut
• e.g. axios.get('[<http://localhost:3001/api/v1/campgrounds>](<http://localhost:3001/api/v1/campgrounds>)) simply becomes axios.get('/[api/v1/campgrounds](<http://localhost:3001/api/v1/campgrounds>))
• However, Vite’s dev server does NOT work in production build. Therefore all the proxy wouldn’t work when deployed on another page (Vercel)
• To keep using the short paths in production, we can create an instance of axios, and config its baseURL. Make sure to use this customized axios instance in the app rather than the original axios

// config/yelpcampAxios.ts

import axios from 'axios';

// custom axios configs - to replace dev proxy server
export default axios.create({
    **baseURL: import.meta.env.VITE_BASE_URL,**
    withCredentials: true,
});