CODEWITHSUNDEEP
dockervue.jsdocker-composedockerfilehot-reload
LastM4N
LastM4N

Reputation: 2230

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.

Upvotes: 5

Views: 10709

Answers (6)

Mahesh Hegde
Mahesh Hegde

Reputation: 1209

In my case browserlist was no updated I have used below to update , then hot reload started working

 npx update-browserslist-db@latest

and running it with

npm run serve -- --public 0.0.0.0:8080

Upvotes: 0

glycoaddict
glycoaddict

Reputation: 929

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.

Upvotes: 0

Jos
Jos

Reputation: 1484

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

Upvotes: 0

Anton Lavrenchuk
Anton Lavrenchuk

Reputation: 71

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,
    });

Upvotes: 6

LastM4N
LastM4N

Reputation: 2230

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

Upvotes: 7

Shikhar Vaish
Shikhar Vaish

Reputation: 86

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.

Upvotes: 0

Related Questions