'Cannot acces HMR compiled files using webpack-encore and docker

I'm trying to make my app accessible when compiled with webpack-encore in HMR mode. I'm using docker and node 12. I've disabled host checks I also tried forwarding ports 8080 but with no luck

Here's my config :

Docker-compose :

version: '3'

networks:
    nginx-php74-mysql8-node:

services:

  # nginx
  nginx-service:
    image: nginx:stable-alpine
    container_name: nginx-container
    ports:
      - "8080:80"
    volumes:
      - ./:/var/www/app
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php74-service
      - mysql8-service
    networks:
      - nginx-php74-mysql8-node

  # php
  php74-service:
    build:
      context: .
      dockerfile: docker/php/Dockerfile
    container_name: php74-container
    ports:
      - "9000:9000"
    volumes:
      - ./:/var/www/app
    networks:
      - nginx-php74-mysql8-node

  # mysql
  mysql8-service:
    image: mysql:8
    platform: linux/amd64
    container_name: mysql8-container
    ports:
      - "3306:3306"
    volumes:
      - ./docker/mysql:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password --character-set-                        server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    restart: always # always restart unless stopped manually
    environment:
      MYSQL_ROOT_PASSWORD: toor
      MYSQL_PASSWORD: toor
      NYSQL_USER: root
    networks:
      - nginx-php74-mysql8-node

  # node
  node-service:
    image: node:12.22.9
    container_name: node-container
    volumes:
      - ./:/var/www/app
    working_dir: /var/www/app
    networks:
      - nginx-php74-mysql8-node

webpack config :

webpackConfig.devServer = {
    headers: {
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
        'Access-Control-Allow-Origin': '*',
    },
    overlay: {
        warnings: true,
        errors: true,
    },
    disableHostCheck: true,
    quiet: false,
    hot: true,
    lazy: false,
    compress: true,
    port: 8080,
}

command used : node node_modules/@symfony/webpack-encore/bin/encore.js dev-server

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source