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 !

CodePudding user response：

i just use this:

docker-compose.yml:

node:
    image: node:16-alpine3.13
    working_dir: /var/www/app
    user: "$USERID"
    volumes:
        - .:/var/www/app
    tty: true

and docker-compose exec node yarn watch

working as expected.

CodePudding user response：

Okay i think i solved my issue,

I followed @Rufinus answer; i had to docker-compose up in a first console command, open a second console command and execute winpty docker-compose exec node yarn watch but for some reason i had issue with node-sass compatibility : i mounted my node_module (windows 10) folder into the container (Linux).

So i opened my node CLI container and execute npm rebuild node-sass to solve this and finally it worked !

But i don't know why, my current solution is to execute npm run watch on my local folders (like i used to do it before Dockerizing all my application) and it re-builds assets when i change .scss or .js file.