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.

Teach

Can you try to remove the /app/node_modules volume and see if hot-reload works? – Landgrave

Tried it, no result... – Teach

I don't think you need Docker for this. Can you use plain Node, without Docker? Since that will have direct access to your host filesystem without the isolation Docker provides, things like live reloading should work much better. – Transmogrify

Is your dev server running behind a reverse proxy and HTTPS? Which OS is hosting your Docker engine? – Demesne

@DavidMaze The idea behind this docker is to be used from a team, since the project using specific versions of node and npm. – Teach

@Demesne Not sure if it helps but the local front project hits a dev backend server which I need to be connected to VPN. This is on MACOS – Teach

There were older versions of Docker for MacOS that had issues with picking up file changes in the host OS when using bind mounts...are you running the latest Docker Desktop? If so, maybe try enabling VirtioFS in experimental features – Demesne

@Demesne Yeah docker is recently installed, I just tried the VirtioFS enabled without result.. When Im saving the new changes I see from terminal that rebuilds it but still the hot reload is not working.. – Teach

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

Teach

Answer 2

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

Supermarket

Thank you so much!! Lost many hours trying to find a solution – Inainability

It works on [email protected] (see the other answer https://mcmap.net/q/1896779/-dockerized-vue-app-hot-reload-does-not-work ) – Leotaleotard

Did this the trick on vue3 using docker. Thank you – Plessor

Answer 3

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.

Simson

It's the same thing where you specify the env either in dockerfile or compose. I have tried as well so many new builds – Teach

vitejs.dev/config/#server-host Could you try manually specifying host at the time of starting Vue? "vite --host" should work I think – Simson

Project using Webpack and not Vite – Teach

Okay, I've encountered this in React. Someone solved the webpack-Docker issue here github.com/facebook/create-react-app/issues/… You need to run setup.js file once before starting the hot-reload server. It worked for me for React. I think its worth a try for Vue – Simson

Answer 4

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

Enfold

Answer 5

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.

Leotaleotard

Answer 6

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

Frumentaceous