Hello everyone!
Here is my tech stack:
- Bedrock + Sage 9.0.0-beta.2.
- Docker Toolbox for Windows:
2.1 Docker compose handles PHP & Nginx & MySQL & Composer installs.
2.2 The following Docker imageblacha/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.