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" ]
2
Answers
I guess your problem is that
npm start
do not auto reload if you edit your files. For that you could usenodemon
orsupervisor
which can reload the project each time a file is updated. Otherwise you should restart manually (probably by restarting the docker container)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.