15

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
MattLock
  • 174
  • 3
  • 17
  • 1
    Usually the webpack-dev-server watches for changes in your files and rebuilds them. After compilation your browser reloads the changes automatically. Are you positive, that your files are watched? Perhaps have a look at this question/answer https://stackoverflow.com/questions/29722755/webpack-dev-server-does-not-watch-for-my-file-changes Maybe you'll find something that's missing in your setup? – Holger Frohloff Mar 23 '18 at 21:06
  • 1
    Please mention which OS and Docker version you are using? – Tarun Lalwani Mar 24 '18 at 03:53
  • 1
    Did you check the doc on webpacker github repo ? https://github.com/rails/webpacker/blob/master/docs/docker.md – Bastien Robert Mar 24 '18 at 10:46
  • 1
    @HolgerFrohloff I know the files are being watched because I can see them being compiled in the webpack server logs. I've added the --hot and --inline options to the webpack-dev-server startup command with no luck – MattLock Mar 26 '18 at 17:52
  • 1
    @TarunLalwani Edited my post "Docker version 17.12.0-ce, build c97c6d6 On OSX High Sierra 10.12" – MattLock Mar 26 '18 at 17:52
  • @BastienRobert That's the example I used to build my docker-compose file – MattLock Mar 26 '18 at 17:53

1 Answers1

7

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
Alex Fedoseev
  • 1,135
  • 11
  • 18