Can't access web container from outside (Windows Docker-Desktop)

Have you looked in the browsers development console, if there comes any error. Your docker-compose seems not to have any issue.

How ever lets try to debug it:

docker ps

CONTAINER ID   IMAGE             COMMAND                  CREATED             STATUS             PORTS                    NAMES
6245eaffd67e   nginx             "/docker-entrypoint.…"   About an hour ago   Up About an hour   0.0.0.0:4200->80/tcp     test-api-1

copy the container id then execute:

 docker exec -it 6245eaffd67e  bin/bash  

Now you are inside the container. Instead of the id you can use also the containers name.

curl http://localhost:80

Note: in my case here i just create a container from an nginx image.
In your case use the port where your app is running. Control it in your code if you arent sure. A lot of Javascript-frameworks start default on 3000.

If you get an error: curl command not found, install it in your image:

FROM node:16.17.0-bullseye-slim
USER root # to install dependencies you need sudo permissions su we tell the image that it is root
RUN apt update -y && apt install curl -y
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

#EXPOSE 4200 (the issue is the same with or without this line)
USER node # we dont want to execute the image as root so we put user node (this user is defined in the  node:16.17.0-bullseye-slim image)
CMD ["npm", "run", "start"]

Now the curl should work (if it doesnt already).

The same should work from your host.
Here is an important thing:

The localhost, always refers to the fisical computer, or the container itselfs where you are refering. Every container and your PC have localhost and they are not the same.
In the docker-compose you just map the port host/container, so your PC (host) where docker is running can access the docker network from the host on the host port you defined, inside the port of the container.

If you cant still access from your host, try to change the host ports 2022, 4200 ecc. Could be possible that something conflicts on your Windows machine.

It happens sometimes that the docker networks can create some conflicts.
Execute a docker-compose down, so it should be delete and recreated.

Still not working?

Reset docker-desktop to factory settings, control if you have last version (this is always better).

If all this doesnt help, let me know so we can debugg further.

For the sake of clarity i post you here the docker-compose which i used to check. I just used nginx to test the ports as i dont have your images.

version: "3.8"

services:
  ### FRONTEND ###
  web:
    restart: always
    image: nginx
    ports:
      - "4200:80"
    depends_on:
      - "api"
    networks:
      - "web"

  ### BACKEND ###
  api:
    restart: always
    image: nginx
    ports:
      - "2022:80"
    depends_on:
      - "db"
    networks:
      - "api"
      - "web"

  ### DATABASE ###
  db:
    restart: always
    image: postgres
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_DB=postgres
    networks:
      - "api"
networks:
  api:
  web:
```

Update:

You can log what happens in the conatiner like so:

```
docker logs containerid/name
```

If you are using Visualcode there is excellent extension for docker build also by Microsoft:
Just search docker in the extensions. Has something like 20.000.000 downloads and can help you a lot debugging containers ecc. After installing it you see the dockericon on the left toolbar.

If you can see directly the errors that occurs in the logs, maybe you can post them partially. So it would be possible to understand. Please tell also something about your Frontendapp architecture, (react-app, angular). There are some frameworks that need to be startet on 0.0.0.0 instead of 127.0.0.1 or they dont work.