Using webpacker (webpack-dev-server) to compile inside a docker container without rebuilding

Question

Edit: Docker version 17.12.0-ce, build c97c6d6 On OSX High Sierra 10.12.6

I'm in the process of including webpacker into an existing rails 4.2 project (some parts still use sprockets) and have been running into some issues with hot reloading. My application is dockerized and I'd like to have a setup where I can edit my React code and have it be compiled and refreshed inside my rails docker container without rebuilding (e.g. docker-compose build) for every small change.

Currently I have the webpack-dev-server running and compiling the code properly. The webpack dev server (http://dockerhost:3035/webpack-dev-server/) will compile the volume mounted code from my local machine but when I refresh my rails app the newly compiled assets won't appear. Is there anything obvious that looks wrong with my setup ?

# webpacker.yml
development:
  <<: *default

compile: true
  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0 #webpacker
    port: 3035
    public: 0.0.0.0:3035
    hmr: true
    # 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/
      poll: 1000

# docker-compose.yml
version: '3'
networks:
  pnet:
    driver: bridge

services:  
  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server #./bin/webpack-dev-server
    networks:
      - pnet
    volumes:                                                                                                               
      - .:/webpacker-app                                                                                                   
    working_dir: /webpacker-app
    ports:
      - '3035:3035'
      - '8080:8080'
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
  web: 
    build: .
    command: bundle exec passenger start
    volumes:
      - ~/tmp/pids:/usr/src/app/tmp/pids
      - .:/webpacker-app
    networks:
      - pnet
    ports:
      - "3000:3000"
      - "3443:3443"
    depends_on:
      - webpacker
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

Answer 1

I'm not too familiar w/ webpacker but looking at your configs my guess is that you use 0.0.0.0:3035 address to access dev-server assets from within your web container when it should be webpacker:3035.

Try to update WEBPACKER_DEV_SERVER_HOST in your web service config:

web:
  ...
  environment:
    ...
    - WEBPACKER_DEV_SERVER_HOST=webpacker