exotic birch
Hi, I'm struggling to solve topic problem and have some questions.
I've set up backend and frontend with mentioned technologies. Both of them deployed and frontend is returning what i want but there is a problem in connection between those services and I don't know how to configure that.
My react app is trying to reach backend through proxy (like in development) but it really shouldn't, it should call my internal backend address.
Here is my vite.config.ts
const backendPath = process.env.VITE_MODE === 'development' ? 'http://localhost:8080' : process.env.VITE_API_URL;
const port = process.env.VITE_PORT ? parseInt(process.env.VITE_PORT) : 4173;
const host = process.env.VITE_HOST as string;
export default defineConfig({
server: {
port: port,
proxy: {
'/api': {
target: backendPath,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
},
preview: {
port: port,
allowedHosts: [host]
},
plugins: [tsconfigPaths(), TanStackRouterVite({ autoCodeSplitting: true }), viteReact()]
});
And axios config (it should use /api proxy only in development mode)
const apiURL = import.meta.env.VITE_API_URL;
export const axiosClient = axios.create({
baseURL: apiURL,
headers: {
'Content-Type': 'application/json',
pragma: 'no-cache',
'cache-control': 'no-cache'
},
paramsSerializer: {
indexes: null
}
});
I have configured frontend service to use valid port (in this case it's 3000) and also configured starting command as vite preview --host
buoyant citrus