In case you ever encounter problems with docker-compose (e.g. network not reachable), try to expose the host from inside the dev script

With Vite, this problem was fixed by exchanging the standard dev script:

"scripts": {
  "dev": "vite --host 0.0.0.0"
},

Official docs:

Overview of Docker Compose

Sample docker-compose.yml file

docker-compose commands are collected in a single yaml - file. It does not replace docker files for separate images, but makes working with them easier when handling several images and containers at once.

Note: In the context of docker-compose, containers and services are the same thing

This file includes the composition of three services / containers

version: "3.8" # Version of docker-compose spec
services:      # An object that specifies the containers that are used

# Service #1: Database
  mongodb: # Name of the DB container
    image: "mongo" # Name of the image to be used in mongodb
    volumes: # Array of named volumes
      - data:/data/db
    environment: # Key - value pairs of environment variables
      MONGO_INITDB_ROOT_USERNAME: q-bit
      MONGO_INITDB_ROOT_PASSWORD: supersecret
    # env_file: # Environment file with relative path to docker-compose file
      # - ./.env
    networks: # Not mandatory. If set, must be maintained under 'networks'
      - my-net

# Service #2: API
  backend: # name of api container
    build: # longer form with a separate folder + named dockerfile
      context: ./backend
      dockerfile: dev.dockerfile
    ports:  # <hostport : containerport>
      - "80:80"
    networks:
      - my-net
    volumes:
      - ./backend:/src # bind mounts can be added with rel. path
      # - /app/node_modules # specify anonymous volumes
    environment:
      MONGODB_USERNAME: q-bit
      MONGODB_PASSWORD: supersecret
    depends_on: # Describe backend depdendency
      - mongodb

# Service #3: Frontend
  client: # name of react app container
    build: ./client # shorter path. Must have a single .dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src
    stdin_open: true # Open an interactive session
    tty: true # Open the terminal
    depends_on: # Describe frontend dependency
      - backend

networks: # Define the networks that are used
  my-net:

volumes: # Volumes will be shared among services
  data:
  logs:

t