App does not display correctly in Chrome localhost

[svg153]

First, thanks for your guide :)

Problem

I follow the guide, specially, the 3.2 Docker Network.
So, I run in my machine (build ended without any error):

$ git clone https://github.com/prakhar1989/FoodTrucks
$ cd FoodTrucks
$ docker-compose up

But this is the problem:

In Firefox, works perfectly.
Google Chrome does print the map, but ES works, because print the search results in the sidebar.

My machine

OS: Debian 8.6
Google Chrome: Version 56.0.2924.87 (64-bit)
Firefox: 45.7.0
docker --version: Docker version 1.13.0, build 49bf474
docker-compose --version: docker-compose version 1.11.0, build 6de1806

docker-compose.yml, with elasticsearch:2.3:

➜  FoodTrucks git:(master) cat docker-compose.yml 
version: "2"
services:
  es:
    image: elasticsearch:2.3
  web:
    image: prakhar1989/foodtrucks-web
    command: python app.py
    ports:
      - "5000:5000"
    volumes:
      - .:/code

Dockerfile:

➜  FoodTrucks git:(master) cat Dockerfile 
# start from base
FROM ubuntu:14.04
MAINTAINER Prakhar Srivastav <[email protected]>

# install system-wide deps for python and node
RUN apt-get -yqq update
RUN apt-get -yqq install python-pip python-dev
RUN apt-get -yqq install nodejs npm
RUN ln -s /usr/bin/nodejs /usr/bin/node

# copy our application code
ADD flask-app /opt/flask-app
WORKDIR /opt/flask-app

# fetch app specific deps
RUN npm install
RUN npm run build
RUN pip install -r requirements.txt

# expose port
EXPOSE 5000

# start app
CMD [ "python", "./app.py" ]

docker ps:

➜  FoodTrucks git:(master) docker ps        
CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                    NAMES
ed366ab9b38a        prakhar1989/foodtrucks-web   "python app.py"          3 days ago          Up About an hour    0.0.0.0:5000->5000/tcp   foodtrucks_web_1
67b79e6b15c9        elasticsearch:2.3            "/docker-entrypoin..."   3 days ago          Up About an hour    9200/tcp, 9300/tcp       foodtrucks_es_1

docker network ls:

NETWORK ID          NAME                 DRIVER              SCOPE
455c0890fea8        bridge               bridge              local
19cbf15d629e        foodtrucks_default   bridge              local
b1db12647c9a        host                 host                local
7e3ffa5351bf        none                 null                local

[prakhar1989]

Hi @svg153, that is very unexpected. Did you see any errors in the Chrome console? The screenshot in the guide and my local testing is all on Chrome so its quite surprising why the app is working fine on one browser but not the other.

Also, kudos to you for such an extensive bug report! Let me know if you can see any errors in Chrome console.

[svg153]

Hi @prakhar1989, thank you for answering so quickly.

Sorry, I forgot to add that image. Here it is:

I did not find anything strange (only the good debbug console.log("here") ;) ), although I do not know much about web. Sorry :S.

If you need more information, ask me.

But do not worry, I've already learned how to build networks with docker with your guide. This issue is for you to know.

[mb1992fl8]

First, thanks for your guide :)

Problem

I follow the guide, specially, the 3.2 Docker Network. So, I run in my machine (build ended without any error):

$ git clone https://github.com/prakhar1989/FoodTrucks
$ cd FoodTrucks
$ docker-compose up

But this is the problem:

In Firefox, works perfectly. Google Chrome does print the map, but ES works, because print the search results in the sidebar.

My machine

OS: Debian 8.6 Google Chrome: Version 56.0.2924.87 (64-bit) Firefox: 45.7.0 docker --version: Docker version 1.13.0, build 49bf474 docker-compose --version: docker-compose version 1.11.0, build 6de1806

docker-compose.yml, with elasticsearch:2.3:

➜  FoodTrucks git:(master) cat docker-compose.yml 
version: "2"
services:
  es:
    image: elasticsearch:2.3
  web:
    image: prakhar1989/foodtrucks-web
    command: python app.py
    ports:
      - "5000:5000"
    volumes:
      - .:/code

Dockerfile:

➜  FoodTrucks git:(master) cat Dockerfile 
# start from base
FROM ubuntu:14.04
MAINTAINER Prakhar Srivastav <[email protected]>

# install system-wide deps for python and node
RUN apt-get -yqq update
RUN apt-get -yqq install python-pip python-dev
RUN apt-get -yqq install nodejs npm
RUN ln -s /usr/bin/nodejs /usr/bin/node

# copy our application code
ADD flask-app /opt/flask-app
WORKDIR /opt/flask-app

# fetch app specific deps
RUN npm install
RUN npm run build
RUN pip install -r requirements.txt

# expose port
EXPOSE 5000

# start app
CMD [ "python", "./app.py" ]

docker ps:

➜  FoodTrucks git:(master) docker ps        
CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                    NAMES
ed366ab9b38a        prakhar1989/foodtrucks-web   "python app.py"          3 days ago          Up About an hour    0.0.0.0:5000->5000/tcp   foodtrucks_web_1
67b79e6b15c9        elasticsearch:2.3            "/docker-entrypoin..."   3 days ago          Up About an hour    9200/tcp, 9300/tcp       foodtrucks_es_1

docker network ls:

NETWORK ID          NAME                 DRIVER              SCOPE
455c0890fea8        bridge               bridge              local
19cbf15d629e        foodtrucks_default   bridge              local
b1db12647c9a        host                 host                local
7e3ffa5351bf        none                 null                local

Hi, I had the same issue. I changed the site settings and allowed all items for the site.
Now I'm seeing the map but don't see trucks on it.

[omdbsd]

@svg153 @mb1992fl8
maybe you can try to disable hardware acceleration in Chrome:
chrome -> settings -> Advanced -> System
toggle off Use hardware acceleration when available