Dockerized Vue app - hot reload does not work

Question

Dockerized Vue app loads normally to the browser, when applying changes to the code are not reflected without refresh.

Dockerfile

FROM node:14-alpine

# make the 'app' folder the current working directory
WORKDIR /app

# copy 'package.json'
COPY package.json .

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
#COPY . .


EXPOSE 8080

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

docker-compose.yml

version: '3.9'
services:
  frontend:
    container_name: 'frontend'
    build: ./
    stdin_open: true
    tty: true
    ports:
      - '8080:8080'
    volumes:
      - ./:/app
      - /app/node_modules
    environment:
      - HOST=0.0.0.0
      - CHOKIDAR_USEPOLLING=true

package.json

{
  "name": "project",
  "version": "1.6.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-axios": "^3.2.2",
    "vuetify": "2.3.18",
    "vuex": "^3.6.0",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.10",
    "@vue/cli-plugin-eslint": "^4.5.11",
    "@vue/cli-plugin-router": "^4.5.10",
    "@vue/cli-plugin-unit-jest": "^4.5.10",
    "@vue/cli-plugin-vuex": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "1.1.2",
    "babel-eslint": "^10.1.0",        
    "node-sass": "^5.0.0",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "vuetify-loader": "^1.6.0",
    "webpack": "^4.46.0"
  }
}

When I'm running the project locally, the hot reload works great!

Any idea what might be the issue on the docker?

EDIT Since this is a docker for development purposes, I have tried as well to remove the COPY . . without result.

Answer 1

After many days I managed to add hot reload by adding in the webpack configuration file this config:

devServer: {
      public: '0.0.0.0:8080'
    }

After digging to the official vue js repo, specifically to serve.js file found the public option which:

specify the public network URL for the HMR client

If you do not want to edit your webpack config, you can do this directly from docker-compose file in the command:

command: npm run serve -- --public 0.0.0.0:8080

Answer 2

Your template looks very close to this Docker Vue Hot-Reload template that works fine. The only difference is the HOST=0.0.0.0 is set inside Dockerfile in the mentioned template. Maybe doing a fresh build would work.

PS: I created this template.