`yarn start` Webpack Dev Server HMR is incompatible with Docker WordPress HMR

[imgnx]

Problem Description

Hello 👋

Thank you so much @lots0logs for your continued support here! Your diligence should not go unrewarded. I just wanted to mention that this lesson from the Developer Docs says to allow WordPress Services to use Port 3000, which is the default Webpack Dev Server port.

Because of this, I'm sure a lot of people have found that you can't start the dev server while Docker is running.

HMR will work so long as the DOM is hydrated, but we are outputting plain scripts and not straight to a DOM like if we were using create-react-app (since I'm fairly certain the Divi Builder runs on top of a React App that is embedded in PHP).

I'm not certain if we're going to be able to get the Builder to run with HMR, but it will watch the files like gulp or chokidar.

My suggestion would be to remove the line that says...

      - "3000:3000" # webpack hmr

... and after that, pretty much everything works as if it's being watched.

The point I'm trying to make is that I don't think this is going to work with HMR. If it did, Docker would need to start the watcher itself, but it can't since it's up to the developer (and not the environment) to create the extension and the module.

I believe the docker-compose.yml should read like so:

version: "3.3"

services:
  mariadb:
    image: "mariadb:10.2.14"
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      DATADIR: /data
    restart: on-failure
    volumes:
      - "database:/data"
    network_mode: "service:wordpress"

  wordpress:
    image: "elegantthemes/divi-dev"
    hostname: divi-dev
    volumes:
      - "${PWD}:/workspace/wordpress"
    ports:
      - "80:80" # nginx
      - "3306:3306" # mariadb

volumes:
  database: {}

Steps To Reproduce

1. Follow the documentation
2. Insert stick into spokes
3. Fall down and blame Bill Gates

Screenshot and/or gif

Loom Recording: https://www.loom.com/share/037f853878b649ccaa6c838106428a6b

[imgnx]

On a side note, I noticed that you can start the Webpack Dev Server first and then start the Docker Container using port 3000 and while nothing complains, the result is still the same from my Loom Recording.

I'm fairly certain you would need to actually build the Divi Visual Builder itself in order to get HMR to work properly here.

PS. If I try to run the Webpack Dev Server on another port, I get this: