Hot reloading in vue.js app doesn't work on docker

103 views Asked by At

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" ]
0

There are 0 answers