CODEWITHSUNDEEP
dockervue.jsdocker-compose
pkberlin
pkberlin

Reputation: 852

Docker compose hot reloading does not work with vuejs app

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?

Upvotes: 4

Views: 11316

Answers (5)

RogerSik
RogerSik

Reputation: 45

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.

Upvotes: 0

Juan Arroyo Ruiz
Juan Arroyo Ruiz

Reputation: 83

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

Upvotes: 8

Carlos Soriano
Carlos Soriano

Reputation: 729

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.

Upvotes: 1

pkberlin
pkberlin

Reputation: 852

I found a solution: I added the following to my compose file:

environment: 
  - CHOKIDAR_USEPOLLING=true

Upvotes: 14

stchr
stchr

Reputation: 211

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

Upvotes: 1

Related Questions