Vue.js local development with docker-compose

Question

I tried to use docker-compose to develop locally. But I have to rebuild my code if sth change...so I need this "hot reload" function but I fail to implement it. Maybe someone can help me or give me some hints. I don't use Nginx as a Proxy (Envoy), just as the server.

Vue.js Docker

    FROM node:lts-alpine as build-stage
    WORKDIR /app
    COPY package*.json ./
    RUN npm install
    COPY . .
    RUN npm run build
    
    FROM nginx:stable-alpine as production-stage
    COPY --from=build-stage /usr/app /usr/share/nginx/html
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]

Docker-Compose File

    version: '3.7'
    
    services:
      front-envoy:
        build:
          context: ./envoy
          dockerfile: Dockerfile-frontenvoy
        volumes:
          - ./envoy/front-envoy.yaml:/etc/front-envoy.yaml
        networks:
          - envoymesh
        expose:
          - "80"
          - "8001"
        ports:
          - "8000:80"
          - "8001:8001"
    
      frontend:
        container_name: frontend
        restart: always
        build:
          context: ./frontend
          dockerfile: Dockerfile
        volumes:
          - ./frontend:/app
          - /app/node_modules      
        networks:
          envoymesh:
            aliases:
              - frontend
        environment:
          - SERVICE_NAME=frontend   
          - CHOKIDAR_USEPOLLING=true    
        expose:
          - "80"
        ports:
          - "8081:8081"
    
    
    networks:
      envoymesh: {}

Thank you so much for the help

Answer 1

The npm run serve is the part that runs vue.js in hot reload mode. In the production the command is npm run build.

For dev environment, to start the app use this command

CMD ["npm", "run", "serve"]

instead of

CMD ["nginx", "-g", "daemon off;"]

Note: You can use nginx for prod env application. Ref 1 : Vue.js app on a docker container with hot reload Ref 2: https://shekhargulati.com/2019/01/18/dockerizing-a-vue-js-application/