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
- Disable the port
3000
indocker-compose.yml
file, you can delete the- "3000:3000"
line or change it instead. Because this the port will used byyarn
that you run outside the docker container. Causing port conflict if not changed nor deleted.- From root of the project run:
docker-compose up -d
to start the docker services,- Confirm that port
3000
is free by usingdocker ps
,- Enter bash to docker container
docker exec -it wp-headless /bin/bash
, then runyarn install
. Only run this step once on first setup. Actually commandyarn 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
- You should already install all required frontend tools in your computer (nodejs, yarn, etc.).
- Change working directory to frontend:
cd frontend
,- Install the frontend packages dependencies:
yarn install
,- Start the frontend development service:
yarn start
,- 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.
There are two things involved - when does the web server reflect changes from your updated css (so it will be available to browsers) and second is the browser reloading the page.
yarn start
starts the web server, but there may be nothing to tell the webserver to reload your modified files. This may be reason why you are needing to reissue 'yarn start' command.
I saw a question on hot reloading - see this link