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

Question

I am running this project https://github.com/postlight/headless-wp-starter. I have been able to get everything working up to a point. The backend is working fine, however, the frontend has a bug.

In the instructions it says to run yarn start to start the frontend server, which should be next.js. Now that technically works fine and it runs on localhost:3000. However, when I modify a scss file in frontend/src/styles, it doesn't re-render in the shell and there is no hot reloading in the browser, even hitting refresh doesn't show the styles changes. However, if I stop yarn with ctrl + c and then run it again with yarn start my styles show up on a browser refresh.

I am running everything under docker for windows so don't know if that is a limitation, or possibly a bug. I have posted a issue on their github, but thought it doesn't hurt to check here as well.

The only code I can think of sharing is the package.json so here it is. Thanks ahead of time.

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "next build",
        "start": "node server.js",
        "docker:build": "docker build -t frontend .",
        "docker:clean": "docker rm -f frontend || true",
        "docker:run": "docker run -p 3000:3000 --name frontend frontend",
        "docker:stop": "docker stop frontend",
        "docker:start": "docker start frontend && yarn run docker:logs",
        "docker:logs": "docker logs -f frontend",
        "deploy":
            "yarn run docker:build && yarn run docker:clean && yarn run docker:run"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.16.2",
        "isomorphic-unfetch": "^2.0.0",
        "next": "latest",
        "react": "^16.0.0"
    },
    "devDependencies": {
        "autoprefixer": "7.1.5",
        "babel-plugin-module-resolver": "^2.7.1",
        "babel-plugin-wrap-in-js": "^1.1.0",
        "glob": "^7.1.2",
        "node-sass": "^4.4.0",
        "normalize.css": "^7.0.0",
        "postcss-easy-import": "^3.0.0",
        "postcss-loader": "^2.0.7",
        "raw-loader": "^0.5.1",
        "react-dom": "^16.2.0",
        "sass-loader": "^6.0.6",
        "webpack": "^3.10.0"
    }
}

Update: Since it seems that hot reloading is a issue with windows, my main question is if there is a way to run a task that doesn't hot reload and I can just refresh the browser on my own, otherwise I can't develop on windows without stopping and restarting the serve every change, which would be impossible to do anything.

Answer 1

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.