Bedrock + Sage 9 + Docker. Webpack / Browsersync doesn't catch file changes

sage
, ,
1

Hello everyone!

Here is my tech stack:

  1. Bedrock + Sage 9.0.0-beta.2.
  2. Docker Toolbox for Windows:
    2.1 Docker compose handles PHP & Nginx & MySQL & Composer installs.
    2.2 The following Docker image blacha/docker-yarn-webpack handles all yarn’s scripts.

Everything works perfect, except the yarn start script:

webpack --hide-modules --watch --config assets/build/webpack.config.js

When I change a .scss (or any other file) nothing happens. That’s the problem.

I run the start script as follow:

# Compile assets when file changes are made, start Browsersync session docker run --network puzzles_wpnet -p 3000:3000 -p 3001:3001 --rm -v ${PuzzlesRootPath}/web/app/themes/sage-commerce:/workspace/ -w /workspace/ blacha/docker-yarn-webpack yarn run start --no-bin-links

Here is the response:

yarn run v0.18.1
$ webpack --hide-modules --watch --config assets/build/webpack.config.js

Webpack is watching the files…


[BS] [HTML Injector] Running...
[BS] Proxying: http://192.168.99.100:81
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.99.100:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.99.100:3001
 ---------------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

Here are my Docker compose and Sage config files.

  • Keep in mind that Docker runs in VM, once Docker Toolbox is used. The IP of VM i 192.168.99.100.

docker-compose.yml:

version: '2'
services:
  nginx:
    image: hoangstark/bedrock-nginx:latest
    ports:
     - "81:80"
    volumes:
     - .:/usr/share/nginx/html
    networks:
     - wpnet
  php:
    image: hoangstark/bedrock-php:latest
    volumes:
     - .:/usr/share/nginx/html
    networks:
     - wpnet
  mysql:
    image: mysql:5.7
    ports:
     - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: secret
    volumes:
     - ./web/app/uploads/docker-mysqldb:/var/lib/mysql
    networks:
     - wpnet
  composer:
     image: composer/composer
     volumes_from:
      - php
     working_dir: /usr/share/nginx/html
  yarn_webpack:
    image: blacha/docker-yarn-webpack
networks:
  wpnet:
    driver: "bridge"
volumes:
  data:
    driver: "local"

sage/assets/config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "templates/**/*.php",
    "src/**/*.php",
  ],
  "publicPath": "/app/themes/sage-commerce",
  "devUrl": "http://192.168.99.100:81",
  "proxyUrl": "http://192.168.99.100:3000",
  "cacheBusting": "[name]_[hash:8]",
  "browsers": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ]
}

Here are the available IP addresses:

  • 192.168.99.100:81 - Here I access my Wordpress app with production build.
  • 192.168.99.100:3000 - Here I access it too, once I run the yarn start script. Webpack and Browsersync are connected.
  • 192.168.99.100:3001 - Browsersync admin panel.
2

I switched to Docker for Windows, because of to eliminate the VM. However it doesn’t work again.
So I run locally (without Docker, on my host machine) yarn start and it works correctly.

Therefore the problem is somewhere between the Docker and my host machine (not the Sage theme).

Any help is appreciated. Thanks!

3

Hello, I have the same problem. Did you solved them?

4

Unfortunately not. Still running it on my local host and stop using the Docker.

BTW I had the same issue with React && Docker and found out a fix. You can try to apply it for this case: https://stackoverflow.com/a/43065210/4312466

1 Like
5

I found solution.

I have just set sendfile off; in my docker nginx conf file.

1 Like
6

Have you guys tried watch-poll? That seems to work for me using webpack on Windows

1 Like
7

Sorry, missed your message. Thanks for providing additional info.
I develop on macOS. Anyway, I found a solution:

  1. nginx sendfile off;
  2. devServer: { watchOptions: { poll: true, }, },