Saturday, 29 December 2018

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

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.



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

No comments:

Post a Comment