Can't access Ionic from browser while using docker

Question

i'm trying to access localhost:8100 which is my ionic app that's running inside a docker container but it won't open. Here is my dockerfile :

FROM node:10.16.3


WORKDIR /usr/src/ionic-app


COPY ./ /usr/src/ionic-app

RUN npm install -g cordova ionic
RUN npm install

And here is my Docker-compose file version: '3.6'

services:

  #Backend API
  backend-api:
    container_name: backend
    build:
      context: ./api/
    working_dir: /usr/src/smart-brain-api
    command: npm run debug
    ports:
      - "3000:3000"
    environment:
      REDIS_HOST: redis
      MONGOOSE_URI: 'mongodb://mongo:27017/appcomdill'
    links:
      - mongo
      - redis

  #MongoDB
  mongo:
    container_name: mongo
    image: mongo
    environment:
      MONGOOSE_URI: 'mongodb://mongo:27017/appcomdill'
    ports:
      - "27017:27017"

  #Redis
  redis:
    container_name: redis
    environment:
      REDIS_HOST: redis
    image: redis
    ports:
      - "6379:6379"

  #Ionic Front-end
  ionic:
    container_name: front-end
    build:
      context: ./ionic
    working_dir: /usr/src/ionic-app
    command: ionic serve
    ports:
      - "8100:8100"

Every time i try to connect to http://localhost:8100/ it keeps on giving me "localhost didn't send any data"

Answer 1

Try changing your command to ionic serve --external

Answer 2

As Joseph mentioned you can fix that by specifying the --external option

This explained in ionic docs:

By default, ionic serve boots up a development server on localhost. To serve to your LAN, specify the --external option, which will use all network interfaces and print the external address(es) on which your app is being served.