Hot reload not working with webpack-dev-server and docker

I am not a VueJS user at all, never worked with it, but I use Docker heavily for my development workflow, and in the past I experienced a similar issue.

In my case the Javascript that was sent to the browser was trying to connect with the internal port of the docker container 8080, but once the mapped one for the host was 8081, the JS in the browser was not able to reach 8080 inside the docker container, therefore hot reload was not working.

So it seems to me that you have the same scenario as me, thus you need to configure in your VueJS app the hot reload to listen in the same port you want to use in the host, or just use the same port for both as you already concluded that it works.

If watchOptions doesnt work, you can try out the other option:

 environment:  - CHOKIDAR_USEPOLLING=true

As per docs here:

“If watching does not work for you, try out this option. Watching does not work with NFS and machines in VirtualBox.”

Reference:

https://daten-und-bass.io/blog/enabling-hot-reloading-with-vuejs-and-vue-cli-in-docker/

It's been asked a long time ago, but I had the same problem and then noticed there's a sockPort within devServer config object that let's you set the port used by the websocket connection to communicate with the server for live/hot-reloading purposes.

What I did is set this option via an environment variable and it worked just fine when accessing the dev server from outside the container.