Ggtcf

I have my Rails apps running and have Webpacker installed. I have the webpack-dev-server running as a Docker container but it doesn;t seem to be responding to changes in my files and recompiling.

Can anyone check my config to see if they can spot anything wrong?

docker-compose.yml:

version: '3.7'

services:
 app:
 build:
 context: .
 dockerfile: Dockerfile
 ports:
 - 3000:3000
 - 35729:35729
 - 5000:5000
 env_file:
 - '.env'
 volumes:
 - .:/app
 - type: tmpfs
 target: /app/tmp/pids/
 depends_on:
 - database
 - elasticsearch
 - webpacker

 database:
 image: postgres:9.6-alpine
 env_file:
 - '.env'
 volumes:
 - pg-data:/var/lib/postgresql/data

 webpacker:
 build: .
 command: ./bin/webpack-dev-server
 env_file:
 - '.env'
 volumes:
 - .:/app
 ports:
 - 3035:3035

 adminer:
 image: adminer
 restart: always
 ports:
 - 8080:8080

 elasticsearch:
 image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.4.1
 env_file:
 - '.env'
 volumes:
 - es-data:/usr/share/elasticsearch/data
 ports:
 - 9200:9200

volumes:
 pg-data:
 es-data:

config/webpacker.yml:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
 source_path: app/webpacker
 source_entry_path: packs
 public_output_path: public/packs
 cache_path: tmp/cache/webpacker

 # Additional paths webpack should lookup modules
 # ['app/assets', 'engine/foo/app/assets']
 resolved_paths: []

 # Reload manifest.json on all requests so we reload latest compiled packs
 cache_manifest: false

 extensions:
 - .js
 - .sass
 - .scss
 - .css
 - .module.sass
 - .module.scss
 - .module.css
 - .png
 - .svg
 - .gif
 - .jpeg
 - .jpg

development:
 <<: *default
 compile: true

 # Reference: https://webpack.js.org/configuration/dev-server/
 dev_server:
 https: false
 host: webpacker
 port: 3035
 public: webpacker:3035
 hmr: false
 # Inline should be set to true if using HMR
 inline: true
 overlay: true
 compress: true
 disable_host_check: true
 use_local_ip: false
 quiet: false
 headers:
 'Access-Control-Allow-Origin': '*'
 watch_options:
 ignored: /node_modules/


test:
 <<: *default
 compile: true

 # Compile test packs to a separate directory
 public_output_path: packs-test

production:
 <<: *default

 # Production depends on precompilation of packs prior to booting for performance.
 compile: false

 # Cache manifest.json for performance
 cache_manifest: true

config/webpack/loaders/sass.js:

 loader: 'postcss-loader',
 options: 
 sourceMap: true,
 plugins: (loader) => [
 require('postcss-cssnext')(
 features: 
 customProperties: 
 warnings: false
 
 
 )
 ]
 

My files are in this structure:

I hope you are able to help me as this is stopping my development of this app.

Thanks

For code reloading by default webpack dev server relies on fsevents, which are not delivered inside docker.

For running inside docker you can switch to polling changes, in webpacker.yml:

dev_server:
 ...
 watch_options:
 poll: 1000
 aggregate_timeout: 100

Also try installing latest version of docker, there're reports that fsevents are working in it.