6

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.

Anders Kitson
  • 1,413
  • 6
  • 38
  • 98
  • Yes, Docker on Windows is a problem. Similar problem with more links: https://stackoverflow.com/questions/53230974/angular-docker-hot-reload-not-working-on-windows – Jan Garaj Dec 25 '18 at 18:17
  • Idk if this the solution that you need. But I think you could use the normal frontend stack (`yarn`) outside the docker container. So instead of running `yarn` inside the container, you are using yarn installation on your host. But before using it you should disable the port `3000:3000` in the `docker-compose.yml` file to release the port. Never try this solution, but running `yarn start` outside the container should work as normal. – Dharma Saputra Jan 04 '19 at 10:16
  • As an alternative, have you tested the extension for Chome: http://livereload.com/ – wbdlc Jan 04 '19 at 10:16
  • @DharmaSaputra how should I free up that port, should I just delete that line? – Anders Kitson Jan 05 '19 at 01:43
  • I think I am having a port issue, I ran yarn start successfully outside however when I visit `localhost:3000` it just shows nothing? – Anders Kitson Jan 05 '19 at 01:58
  • Ok I just changed the port in docker compose.yml from 3000 -> 4000 and now yarn start works. I am getting a `Cannot read property 'rendered' of undefined` but it's progress Dharma could you post your solution as an answer and I will choose it – Anders Kitson Jan 05 '19 at 02:13
  • Actually you can still create that answer, but this is not solved when I run yarn install in the container it does extra stuff like auto installing wordpress where outside the container it doesn't do that and then stuff isn't setup right. – Anders Kitson Jan 05 '19 at 02:20
  • Dharma got it working I had to reinstall everything and do the frontend yarn install and and yarn start in windows subsystem for linux since it wont run in powershell it needs bash, but the live reload wouldnt work in docker so WSL to the rescue. Please post you anwswer so I can award you the bounty. – Anders Kitson Jan 05 '19 at 04:00
  • @AndersKitson Happy to hear that!! Sorry for very delayed response. I've post my answer. You may edit it and add your extra steps. – Dharma Saputra Jan 06 '19 at 17:02

2 Answers2

2

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.

Dharma Saputra
  • 1,524
  • 12
  • 17
  • BTW for anyone else I had to run. The yarn install outside of the docker container as well to get this all working properly. – Anders Kitson Jan 06 '19 at 17:24
0

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

How can I add live-reload to my nodejs server

Deepak Garud
  • 977
  • 10
  • 18
  • I don't think you understood my question, live reload is setup correctly because it worked but only once, then it just fails and I need to reload the server. – Anders Kitson Jan 05 '19 at 01:59
  • It should work every time. In the link, they have mentioned some component that tracks file changes. – Deepak Garud Jan 05 '19 at 08:12