I have a project running on a docker container on windows including images for a backend application, a Postgres database, an Nginx server, and a frontend application created using Vue.js.
The problem is that when I change something in my Vue application, I see the changes are reflected on docker file, but hot reloading is not being triggered on the browser. Even when I refresh the browser I still can't see the changes. So I have to stop and start the frontend docker image to see the changes.
I have tested running the frontend app independent from docker on my windows and the hot reloading works just fine.
I also have tested the docker-compose on a Linux machine and the hot reloading works fine there as well.
Is there any way to debug and see what is possibly wrong with hot reloading?
here is my docker-compose file:
version: '2'
services:
meshai:
deploy:
resources:
limits:
cpus: '0.50'
memory: 250m
image: meshai
env_file: .env
volumes:
- .:/app
command: bash -c "gem pristine --all && bundle install && bundle exec puma -C config/puma.rb -b tcp://0.0.0.0:3000 "
ports:
- "127.0.0.1:3000:3000"
networks:
- meshai-network
depends_on:
- postgres
postgres:
deploy:
resources:
limits:
cpus: '0.50'
memory: 250m
image: postgres:latest
restart: always
environment:
POSTGRES_USER: *******
POSTGRES_PASSWORD: *******
POSTGRES_DB: *******
volumes:
- ./meshai-postgres:/var/lib/postgresql/data
- ./meshai-postgres-log:/var/log/postgresql
ports:
- "127.0.0.1:5431:5432"
networks:
- meshai-network
frontend:
deploy:
resources:
limits:
cpus: '0.50'
memory: 250m
container_name: frontend
build:
context: ./frontend-vue/.
dockerfile: Dockerfiledev
env_file: ./frontend-vue/.env
volumes:
- ./frontend-vue:/vueapp
ports:
- '4000:3001'
command: bash -c "yarn install && yarn dev --host"
networks:
- meshai-network
nginx:
deploy:
resources:
limits:
cpus: '0.50'
memory: 250m
image: nginx:latest
ports:
- '80:80'
depends_on:
- meshai
- frontend
links:
- meshai
- frontend
volumes:
- .platform/nginx-local/sites-enabled/meshai.local.conf:/etc/nginx/conf.d/default.conf
- ./log/nginx:/var/log/nginx
command: nginx -g 'daemon off;'
networks:
- meshai-network
networks:
meshai-network:
driver: bridge
And here is the docker file for the frontend app:
FROM node:lts
WORKDIR /vueapp
ADD . /vueapp/
RUN npm i -g npm && npm i -g --force yarn
RUN npm i -g --force vite
RUN yarn
CMD [ "yarn", "dev" ]