Search code examples
reactjsdockerdocker-composedockerfilenodemon

Dockerized React App x Nodemon monitoring


I've got a React App running on docker with Nodemon checking for any modifications in the App.js file. I first initialise the dockerfile via an initialise.bat which just builds.

initialise.bat

docker build . -f Dockerfile -t react-dev-app

DockerFile

FROM node:latest

WORKDIR /app

COPY package.json package-lock.json /app/
COPY public /app/public
COPY src /app/src

RUN npm install --verbose --only=production
COPY . .
RUN npm install --verbose -g nodemon

EXPOSE 3000

CMD ["nodemon", "--watch", "**/*", "App.js"]

docker-compose.yml

services:
  devreact:
    image: react-dev-app
    stdin_open: true
    tty: true
    volumes:
      - ./:/app
      -  node_modules:/app/node_modules
    ports: 
      - "3000:3000"
volumes:
  node_modules:

Package.Json

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "nodemon": "^2.0.22",
        "nth-check": "^2.0.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "^5.0.1",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "css-select": "^4.1.3",
        "nodemon": "^2.0.22"
    }
}

the react app starts up fine but it's not detecting any changes made in App.js or anywhere.

i tried changing the start string in Package.json but no luck there. also tried a different package as an alternative to nodemon and still got the same outcome. tried different CMD commands in the dockerfile and still no luck. i either enter a big loop or it just errors.

EDIT: there appears to be some sort of cross-compatibility issue between Mac and pc. On Mac, file changes are being monitored and then restarts as intended then I accessed the files on my windows pc no changes are being monitored.


Solution

  • turns out in windows you need to put --legacy watch to check files changes.

    version: '3'
    services:
      devreact:
        build:
          context: .
          dockerfile: Dockerfile
        stdin_open: true
        tty: true
        volumes:
          - .:/app
          - node_modules:/app/node_modules
        ports:
          - "3000:3000"
        command: nodemon --legacy-watch App.js
    volumes:
      node_modules: