Can i declare a docker-compose service name as environment variable in vite react app?

I cant get my docker-compose.yml file to use the service name to connect to my backend app correctly.

Im using docker-compose to run my 2 applications.

1. A Vite - react app called "frontend"
2. A backend node.js express app called "backend".

I expect my frontend to do GET and POST requests to the backend service.
Right now when i look in the network tab for my frontend the request are being sent to: http://backend:5000/my-endpoint

and i thought that would work, but i get: net::ERR_NAME_NOT_RESOLVED on all request sent by my frontend app.

my docker-compose.yml looks like this:

version: '3'
services:
  frontend:
    build:
      context: ../frontend
    ports:
      - "5173:5173"
    environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  
    networks:
      - skystack_net
  backend:
    build:
      context: ../backend
    ports:
      - "5000:5000" #
    depends_on:
      - mongodb
    environment:
      - PORT=5000
      - DOCKER_ENV=true
    networks:
      - skystack_net
  mongodb:
    image: mongo:latest
    ports:
      - "27017:27017"
    networks:
      - skystack_net
    volumes:
      - mongo-data:/data/db
volumes:
  mongo-data:
networks:
  skystack_net:

in my react app i want to either use the environment variable set by docker-compose, or use localhost so i can start my react app locally (not in docker). so i use this const in my reat app to set the api endpoint:

const BACKEND_HOST_URL = import.meta.env.VITE_BACKEND_HOST_URL || 'http://localhost:5000';

but then i get this net::ERR_NAME_NOT_RESOLVED error.

if i change the environment value from :

 environment:
      - VITE_BACKEND_HOST_URL=http://backend:5000  

to:

 environment:
      - VITE_BACKEND_HOST_URL=http://172.25.176.1:5000 

then it works, but i dont want to have to specify the host machine, that will be problematic if i try to run this setup on a different machine.

Should i do in another way? anny suggestions?

If internally access between containers then you can use backend:5000, but since you're developing a Frontend app, which you will load on your browser. Your browser is no longer a part of Docker network and it's in the host network (localhost...).

So for this to work, you have to expose backend to port 5000 which make it available in the computer that you host your Docker. And then localhost:5000 would work.

environment:
      - VITE_BACKEND_HOST_URL=http://localhost:5000