Trying to get a headless WordPress to do hot reloading on yarn start command

Things worth to try is to use the frontend stack(nodejs, yarn, etc,) as normal without using it inside docker container. Follow these steps:

Backend Service

1. Disable the port 3000 in docker-compose.yml file, you can delete the - "3000:3000" line or change it instead. Because this the port will used by yarn that you run outside the docker container. Causing port conflict if not changed nor deleted.
2. From root of the project run: docker-compose up -d to start the docker services,
3. Confirm that port 3000 is free by using docker ps,
4. Enter bash to docker container docker exec -it wp-headless /bin/bash, then run yarn install. Only run this step once on first setup. Actually command yarn install here has nothing to do with the react frontend. It's just doing setup for wordpress and the backend dependencies. Exit from the container once all installation finished.

Frontend Service

1. You should already install all required frontend tools in your computer (nodejs, yarn, etc.).
2. Change working directory to frontend: cd frontend,
3. Install the frontend packages dependencies: yarn install,
4. Start the frontend development service: yarn start,
5. Now your frontend workflow stack will run as normal (without docker). Bear in mind that the yarn that you'll using now is outside the docker container and being fully separated thing.

Hope it helps.