Docker file system not loading into localhost

Question

Current I am working on a full stack application with a react frontend, mysql DB, and apache php instance. Something seems to be up with my changes going from my docker container to localhost. I can write from my local machine -> docker, but it seems like localhost is not reading react from my docker container.

I know that my mount is working correctly local machine -> docker file system because whenever I make changes in my IDE and save, then go and cat App.js within my docker container, that changes are there.

Any insight would be helpful, I think what is happening is that docker is taking a copy of the file upon creating the container, because whenever I remake the container, my changes to through to localhost.

p.s. I'm newish to docker, so let me know if you need more information. Thanks!

docker-compose

version: "3.7"

services:
  frontend:
    container_name: frontend
    build:
      context: "./hartley_react"
      dockerfile: Dockerfile
    volumes:
      - "./hartley_react:/app"
      - "/app/node_modules"
    ports:
      - 3000:3000
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: npm start

  php:
    container_name: php
    build:
      context: "./dockerfiles/php-img/"
    ports:
      - "80:80"
    volumes:
      - ./src:/var/www/html/

  db:
    container_name: db
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: example
      MYSQL_DATABASE: userdb
      MYSQL_USER: my_user
      MYSQL_PASSWORD: my_password
    volumes:
      - ./mysqldata:/var/lib/mysql

  adminer:
    container_name: adminer
    depends_on:
      - db
    image: adminer
    restart: always
    ports:
      - 8080:8080

volumes:
  my-mysqldata:
  frontend:

React DockerFile

FROM node:17.4.0-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . ./
EXPOSE 3000
CMD [ "npm", "start" ]

Answer 1

I guess your problem is that npm start do not auto reload if you edit your files. For that you could use nodemon or supervisor which can reload the project each time a file is updated. Otherwise you should restart manually (probably by restarting the docker container)

Answer 2

There are a few things you can try:

check your package.json file and specifically scripts whether start gives npm start with hot reload option or not. to do so, you may do the full test in your local (without docker) and check whether the changes you are making in html (frontend) is indeed reflecting to your application locally without rebuilding or not.

secondly, create another script inside package.json file (custom script) to have npm run/ npm dev (available in react but not sure for your case) with hot-reload or use nodemon for that. Once you have that, use that in your docker-compose file in place of CMD [ "npm", "start" ]

For me, It looks like your dockerfile and docker-compose file along with the named volume definition looks ok. Only one thing though - Not sure why did you mention the "command: npm start" inside docker-compose file while you already have covered that part in your dockerfile while creating an image.