getting webpack-dev-server to work under docker

Question

I am trying to run webpack-dev-server within docker so I can hot-reload my react components. For some reason, webpack-dev-server does not hot re-load through docker though. Changes to the react files does recompile code, according to the logs. But my webbrowser is not receiving the signal telling it to refresh. If I manually refresh the browser, it does reflect the code changes though.

Interestingly, this same config actually works when I run it natively on the host machine, so I suspect it's a socket connection issue at this point.

How does webpack-dev-server let the web browser know that it should re-load?

I also notice webpack-dev-server opens port 8080. What is the purpose of this? Do I give the (http://localhost:8080/) address to my web browser instead of my usual webserver address (http://localhost:3000/)? Or is port 8080 used for something else?

Here is my config file for reference:

dev_server:
  https: false
  host: localhost
  port: 8080
  public: localhost:8080
  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
  pretty: false
  headers:
    'Access-Control-Allow-Origin': '*'
  watch_options:
    ignored: '**/node_modules/**'

Have you tried launching docker wiht -p 8081:8080 for example, and connect it through localhost:8081? — Alejandro Galera

Steve Quezadas Steve Quezadas · Accepted Answer · 2020-09-07T21:36:35

Ok, I figured out that three things were wrong in my particular configuration. First, "web-dev-server" needs to be loaded for hotloading to work. So my Procfile.dev-hmr looks like the following:

web: bundle exec rails s -b 0.0.0.0 -p 3000  
webpack-dev-server: bin/webpack-dev-server

I load this file like the following:

foreman start -f Procfile.dev-hmr

Second, webpack-dev-server operates on port 3035, so you have to open up that port on docker. I did this with the "port" command with the following docker-compose file as an example:

version: '3'
services:
    db:
      image: postgres:9.3
      ports:
        - "5432:5432"
      volumes:
        - ./tmp/db:/var/lib/postgresql/data
    web:
      build: .
      command: foreman start -f Procfile.dev-hmr
      volumes:
        - .:/myapp
      expose:
        - 3000
        - 3035
      ports:
        - "3000:3000"
        - "3035:3035"
      depends_on:
        - db
      user: "1000:1000"
      environment:
        - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

You have to set the server host for webpacker to "0.0.0.0" (I suppose it's because docker uses some weird ip address). I did this by setting the environment variable: WEBPACKER_DEV_SERVER_HOST=0.0.0.0

I was able to do this in the above docker-compose.yml script.

getting webpack-dev-server to work under docker

1 Answers