communication between vite + react & nestjs internally

pasiekakHOBBY

2 days ago

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

$10 Bounty

1 Replies

pasiekakHOBBY

2 days ago

d0edc753-db16-4d38-89d3-d1fa9a225255

pasiekakHOBBY

2 days ago

anyone please?

pasiekakHOBBY

2 days ago

Managed to contact backend from frontend but not through a private network (that was stupid btw :D)
Now i have problem with requests, they certainly hit backend but they're always in pending status forever

pasiekakHOBBY

2 days ago

http logs from backends are empty

alexwebgrHOBBY

2 days ago

Hi there,

first i would like to understand your architecture

you are using vite and react in the frontend and nestjs on the backend

your backend is available under /api

you have some env variables

VITE_MODE

VITE_API_URL

VITE_PORT

VITE_HOST

it works fine on your local machine but not on railway

  1. are those env variables defined in the railway service that hosts your code?

  2. Why are you calling them VITE_ if they are pointing to the backend service

i think a screenshot of your current architecture would really help make sure to NOT include any private or confidential info like API keys