Webpack DevServer configuration for Docker

[sdzyba]

Version

3.0.0-rc.3

Reproduction link

https://codesandbox.io/s/vue

Steps to reproduce

Generate a basic project using vue-cli.
Run npm run serve in docker container.

What is expected?

App works and it's accessible, hot reload works

What is actually happening?

App works and it's accessible, hot reload doesn't work

---

The issue is that it automatically starts the devserver using docker container's internal IP:

app_1  |   App running at:
app_1  |   - Local:   http://localhost:8080/
app_1  |   - Network: http://172.23.0.2:8080/

I can't access 172.23.0.2:8080 at all since Docker for Mac has limited networking features.
It would be awesome to be able to configure devserver to use only 0.0.0.0 and tell it to not to listen also a LAN address.

[LinusBorg]

have you tried npm run serve --host 0.0.0.0 ?

[sdzyba]

I believe you meant vue-cli-service serve --host 0.0.0.0 (npm run serve --host 0.0.0.0 gives an error).
No, this didn't help and I can't find any option that would disable listening on "external" address for hot module reload.
And unfortunately it seems there are no workaround for Docker as well.
Just to illustrate the behavior, here are requests when running devserver without docker, just on host machine:

and here's the same app running in Docker:

There are just no possibility to access docker container by it's IP in Mac OS. It's available only through binding to 0.0.0.0.

[Garito]

build your app before serve in docker

[sdzyba]

@Garito I'm running the app in development environment, maybe I'm missing something but how hot reload is related to the built app?

[sdzyba]

I see that it is hardcoded to set LAN url if 0.0.0.0 host provided: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/util/prepareURLs.js#L29

Can this be avoided in some way?

[vchaptsev]

Hmm, maybe this will help?

// vue.config.js
module.exports = {
  devServer: {
    public: '0.0.0.0:8080'
  }
}

[Garito]

The development server activates hot reload
When you build the app doesn't use it
In the new webpack there are modes (development with hot reload and production without)

[DRoet]

I had the same issue, the workaround I used for this problem was setting "network_mode: host" in docker-compose.

[sdzyba]

@vchaptsev thanks, but that didn't help.
@Garito I'm working in development environment, I don't need to build the application.
@DRoet thanks, that might help if you're working with a single setup although I'm running a range of different services and they're configured to be in specific docker networks

I believe vue-cli should have some option that will either tell devserver to communicate only with localhost or an option that would disable binding to LAN address at all.

[Garito]

You can change the mode from development to production without building the app
This should deactivate the hot reload
Besides that the new webpack configuration format will help you reconfigure webpack with your needs
Check the vue-cli 3 documentation

[sdzyba]

@Garito I think there are some miscommunication. Original post says that hot reload isn't working and I want it to be working, not the opposite.

[sdzyba]

@vchaptsev I'm sorry, you were right. Setting public: '0.0.0.0:8080' in vue.config.js solves the issue but two moments here:

• it's a bit unclear at first that this change has affected the setup somehow. Here the public parameter affected the socks URL which, I believe, defines with which host devserver communicate. It would be great to have some additional info in the server start output regarding this.
• I have a very weird issue with docker restart command (and that's the primary reason I didn't notice any change at first). Suppose you run docker start, everything including hot reload works just fine and then you decide to docker restart a container, even without any change to configs or data. After that no matter what you do you would receive just previous application state, not mentioning hot reload. It just looks like previous devserver hasn't been killed completely for some reason... I just can't find any particular reason what is happening. Volumes are ok and file changes are reflected inside the container, container status is ok. Or maybe file there are some issue with file watcher, dont know yet. Continue digging into that.
  The interesting thing is that if you do docker stop and docker start everything works just as expected and the application served perfectly.

[vchaptsev]

@sdzyba glad to hear it :)
Yes, this is an unclear solution, but this is the best way I have found.