Docker compose hot reloading does not work with vuejs app - docker

Question

I have a little vueJS app runnig on docker.
When i run the app via yarn serve it runs fine, also it does in docker.
My problem is hot reloading will not work.
My Dockerfile:
FROM node:12.2.0-alpine
WORKDIR /app
COPY package.json /app/package.json
RUN npm install
RUN npm install #vue/cli -g
CMD ["npm", "run", "serve"]
My docker-compose.yml:
version: '3.7'
services:
client:
container_name: client
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '8082:8080'
Does anyone can see the mistake i did?

Answer 1

I found a solution:
I added the following to my compose file:
environment:
- CHOKIDAR_USEPOLLING=true

Answer 2

What has worked for me in the past is to use this in the docker-compose.yml file:
frontend:
build:
context: .
dockerfile: vuejs.Dockerfile
# command to start the development server
command: npm run serve
# ------------------ #
volumes:
- ./frontend:/app
- /app/node_modules # <---- this enables a much faster start/reload
ports:
- "8080:8080"
environment:
- CHOKIDAR_USEPOLLING=true # <---- this enables the hot reloading

Answer 3

Also expose 8080 port
FROM node:12.2.0-alpine
EXPOSE 8080 # add this line in docker file.
WORKDIR /app
COPY package.json /app/package.json
RUN npm install
RUN npm install #vue/cli -g
CMD ["npm", "run", "serve"]
Docker compose as
version: '3.7'
services:
client:
container_name: client
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '8080:8080'
server will be running in localhost:8080

Answer 4

One of the answers above suggests setting an environment variable for the chokidar polling. According to this issue you can set the polling options to true in vue.config.js.
module.exports = {
configureWebpack: {
devServer: {
port: 3000,
// https://github.com/vuejs-templates/webpack/issues/378
watchOptions: {
poll: true,
},
},
}
};
Additionally, make sure that the volume you are mounting is correct as per your working dir, etc. to ensure that the files are watched correctly.

Answer 5

For me it was the working on Windows + Docker Desktop. After switching to WSL2 + Docker Desktop the hot reload worked again without needed to do additionally work / variables.