Question 83801 in Docker Question posted in
The official documentation can be found here.

Dockerized Vue app – hot reload does not work

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.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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

  2. 0

    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.

    Login or Signup to reply.
  3. 0

    The issue can be also in your vue.config.js file.

        module.exports = defineConfig({
        configureWebpack: {
            entry: "./src/main.js",
            devServer: {
                hot: true,
            },
            watch: true,
            watchOptions: {
                ignored: /node_modules/,
                poll: 1000,
            },
        },
        transpileDependencies: true,
    });
    Login or Signup to reply.
  4. 0

    Solution for Vue3 when using vue-cli and docker-compose is passing the public url without port to the serve command from docker-compose

    command: yarn serve --public http://localhost
    Login or Signup to reply.
  5. 0

    Based on Anton Lavrenchuk’s answer, I can confirm that the following works on @vue/[email protected] on an Ubuntu docker container. I did a line by line ablation and it seems that only the watch parameter was unnecessary.

    const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,  
  publicPath: '/myapp',
  configureWebpack: {
    entry: "./src/main.js",  
    devServer: {
      hot: true,
      port: 8081,
      host: '0.0.0.0',
    },    
    watchOptions: {
      ignored: /node_modules/,
      poll: 1000,
    }
  }  
})

    The host: 0.0.0.0 and port: 8081 are to publish to the localhost from the container. Note that container has to be run with the correct ports exposed, so something like docker run -it -p 8080-8090:8080-8090 -v local/path/to/vueapp:/home/vueapp IMAGEID bash` would work.

    With the vue.config.js as above, just the humble npm run serve works with hot reload.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search