How to configure webpack hot reload to work inside Docker? – Debian

I’m working on a Symfony 4 project for months, and I want to Dockerize it.

I make everything work except Webpack, I use it to compile my .scss and .js files with the npm run watch or npm run dev command.

Actually webpack does not listen changes I do in a .scss or .js file for example.

Here is my config, I surely miss something in my files.

My docker-compose.yml :

version: '3.8'
services:
  mysql:
     image: mysql:8.0
     command: --default-authentication-plugin=mysql_native_password
     restart: on-failure
     environment:
       MYSQL_ROOT_PASSWORD: rootpassword
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: on-failure
    depends_on:
      - mysql
    ports:
      - '8004:80'
    environment:
      PMA_HOSTS: mysql
  php:
    build:
      context: .
      dockerfile: php/Dockerfile
    volumes:
      - '../.:/usr/src/app'
    restart: on-failure
    env_file:
      - .env
  nginx:
    image: nginx:1.19.0-alpine
    restart: on-failure
    volumes:
      - '../public:/usr/src/app'
      - './nginx/default.conf:/etc/nginx/conf.d/default.conf:ro'
    ports:
      - '80:80'
    depends_on:
      - php
  node:
    build:
      context: .
      dockerfile: node/Dockerfile
    volumes:
       - '../.:/usr/src/app'
    command: npm run watch

My Dockerfile for Node Image :

FROM node:12.10.0

RUN apt-get update && 
    apt-get install -y 
        curl

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && 
        echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

WORKDIR /usr/src/app

CMD ["npm", "run", "watch"]

My webpack.config.js :

var Encore = require('@symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .splitEntryChunks()

    .disableSingleRuntimeChunk()

    .enableSassLoader()

    .cleanupOutputBeforeBuild()
    
    .enableBuildNotifications()
    
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    .addPlugin(new CopyWebpackPlugin([
        { from: './assets/pictures', to: 'pictures' }
    ]))
;

module.exports = Encore.getWebpackConfig();

// module.exports = {
//   mode: 'development',
//   devServer: {
//     port: 80,
//     host: '0.0.0.0',
//     disableHostCheck: true,
//     watchOptions: {
//       ignored: /node_modules/,
//       poll: 1000,
//       aggregateTimeout: 1000
//     }
//   }
// }

As you can see I already tried some thing in webpack.config.js, I saw many things about watchOptions but I didn’t get it.

And here is my project’s organisation :

project’s organisation

I want to be able to launch my Docker with Webpack listening any change I do in real time.

Here is the command console after running docker-compose up:

console command docker-compose up

If you have some advise to improve my Docker environment, I take it all !

Thank you !