Storefront not working inside docker

Current behavior

Vue-storefront shows error, something went wrong when started inside docker via docker-compose. It seems to return error below when trying to connect to elastic search. Kibana is on the same network connected with same credentials successfully.

I am just truing to wrap it now, I will polish it later on.

The js error after placing breakpoint inside search.ts

"ReferenceError: pe is not defined
    at eval (eval at <anonymous> (http://localhost:3000/dist/app.8224a1c2b93dcaeb782b.js?_sw-precache=9683acc21aef6ab20ee92a89ed59b3e6:1:283927), <anonymous>:1:1)
    at http://localhost:3000/dist/app.8224a1c2b93dcaeb782b.js?_sw-precache=9683acc21aef6ab20ee92a89ed59b3e6:1:283927
    at new Promise (<anonymous>)
    at ce (http://localhost:3000/dist/app.8224a1c2b93dcaeb782b.js?_sw-precache=9683acc21aef6ab20ee92a89ed59b3e6:1:282537)
    at list (http://localhost:3000/dist/app.8224a1c2b93dcaeb782b.js?_sw-precache=9683acc21aef6ab20ee92a89ed59b3e6:1:302727)
    at Array.<anonymous> (http://localhost:3000/dist/vendor.8224a1c2b93dcaeb782b.js?_sw-precache=f0984bdc47244cc1c021abb65b5aa744:13:5308)
    at l.dispatch (http://localhost:3000/dist/vendor.8224a1c2b93dcaeb782b.js?_sw-precache=f0984bdc47244cc1c021abb65b5aa744:13:6675)
    at l.dispatch (http://localhost:3000/dist/vendor.8224a1c2b93dcaeb782b.js?_sw-precache=f0984bdc47244cc1c021abb65b5aa744:13:2938)
    at http://localhost:3000/dist/app.8224a1c2b93dcaeb782b.js?_sw-precache=9683acc21aef6ab20ee92a89ed59b3e6:1:476771
    at new Promise (<anonymous>)"

My docker-compose

version: '3.0'
services:

  vue-storefront:
    container_name: vue_storefront
    build:
      context: ./vue-storefront
      dockerfile: docker/vue-storefront/Dockerfile
    env_file:
      - ./vue-storefront/docker/vue-storefront/default.env
    volumes:
    - './vue-storefront/.babelrc:/var/www/.babelrc'
    - './vue-storefront/core:/var/www/core'
    - './vue-storefront/ecosystem.json:/var/www/ecosystem.json'
    - './vue-storefront/.eslintignore:/var/www/.eslintignore'
    - './vue-storefront/.eslintrc.js:/var/www/.eslintrc.js'
    - './vue-storefront/lerna.json:/var/www/lerna.json'
    - './vue-storefront/tsconfig.json:/var/www/tsconfig.json'
    - './vue-storefront/shims.d.ts:/var/www/shims.d.ts'
    - './vue-storefront/package.json:/var/www/package.json'
    - './vue-storefront/src:/var/www/src'
    - './vue-storefront/var:/var/www/var'
    depends_on:
      - vue-storefront-api
    networks:
      - vue_network
    ports:
      - 3000:3000

  vue-storefront-api:
    build:
      context: ./vue-storefront-api
      dockerfile: docker/vue-storefront-api/Dockerfile
    env_file: ./vue-storefront-api/docker/vue-storefront-api/default.env
    volumes:
    - './vue-storefront-api/config:/var/www/config'
    - './vue-storefront-api/ecosystem.json:/var/www/ecosystem.json'
    - './vue-storefront-api/migrations:/var/www/migrations'
    - './vue-storefront-api/package.json:/var/www/package.json'
    - './vue-storefront-api/scripts:/var/www/scripts'
    - './vue-storefront-api/src:/var/www/src'
    - './vue-storefront-api/var:/var/www/var'
    tmpfs:
      - /var/www/dist
    depends_on:
      - redis
      - elastic-search
      - kibana
    networks:
      - vue_network
    ports:
      - 8080:8080

  redis:
    container_name: vue_storefront_redis
    image: 'redis:4-alpine'
    networks:
      - vue_network
    ports:
      - 6379:6379

  elastic-search:
    container_name: vue_storefront_elasticsearch
    build:
      context: ./vue-storefront-api
      dockerfile: ./docker/elasticsearch/Dockerfile
    volumes:
    - ./vue-storefront-api/docker/elasticsearch/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml:ro
    - 'esdat1:/usr/share/elasticsearch/data'
    environment:
      ES_JAVA_OPTS: "-Xmx512m -Xms512m"
    networks:
      - vue_network
    ports:
      - 9200:9200
      - 9300:9300

  kibana:
    container_name: vue_storefront_kibana
    build:
      context: ./vue-storefront-api
      dockerfile: ./docker/kibana/Dockerfile
    volumes:
      - ./vue-storefront-api/docker/kibana/config/:/usr/share/kibana/config:ro
    ports:
      - 5601:5601
    networks:
      - vue_network

networks:
  vue_network:
    driver: 'bridge'

volumes:
  esdat1:

vue-storefront-api config - elastic search section (the same as for Kibana)

"elasticsearch": {
    "host": "http://vue_storefront_elasticsearch",
    "port": 9200,
    "user": "elastic",
    "password": "changeme",
    "min_score": 0.01,
    "indices": [
      "vue_storefront_catalog",
      "vue_storefront_catalog_de",
      "vue_storefront_catalog_it"
    ],
    "indexTypes": [
      "product",
      "category",
      "cms",
      "attribute",
      "taxrule",
      "review"
    ]
  }

Expected behavior

It should be working even inside docker.

Steps to reproduce the issue

Folder structure

1. Create the docker-compose mentioned above.
2. Change line 6 vue-storefront/docker/vue-storefront/vue-storefront.sh line 6

yarn build:client && yarn build:server && yarn build:sw || exit $?

Added sw build, because it was missing inside dist folder.

1. go to http://localhost:3000
2. open console and click on top left arrow back

Can you handle fixing this bug by yourself?

No.

Environment details

See the repository.

[glyphsharie]

I am also trying to run it inside docker but I can’t access it. Container is up and running. But when i load port 3000 in browser, it can’t connect.

[Darwex]

I managed to solve this.

vue-storefront-api/docker/vue-storefront-api/default.env contains elastic-search config as well, and it is overriding the default one in config.local.

You can either delete it from the default.env or alter it there.

The truth is, that the error message was not very clear. Maybe we could improve error handling for connection issues.

Thanks for help. Closing the issue.