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
Webpacker adds a webpacker:compile task to the assets:precompile rake task, so any existing deploy pipeline that was using assets:precompile should work. The compile task will compile the packs and place them in public/packs .
Taking into consideration all the major shifts in modern Javascript development, Rails 7 has decided to replace Webpacker with importmapped Hotwire as default the JavaScript setup. This means that a default Rails skeleton will not have to require the full JavaScript toolchain with Webpack by default.
webpacker is a gem that wraps webpack - which is the popular JavaScript tool used for managing and bundling JavaScript code, it is a tool that integrates Webpack with a Rails application. and it provides helpers to use the webpack in our Rails applications. So webpacker simply is the Rails way of using webpack.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With