CODEWITHSUNDEEP
dockervue.jswebpack
u123
u123

Reputation: 16331

Difference between vue-cli-service serve and webpack-dev-server (in docker)

I have two vuejs projects one is using vue-cli-service and the other is using webpack-dev-server. I have build a docker image for both.

Project 1 (package.json)

  "scripts": {
    "serve": "vue-cli-service serve",

And I can run a container from the corresponding image with:

  docker run -it -p 8081:8080 -v ${PWD}:/app/ -v /app/node_modules --name project-one project-one-image

Project 2 (package.json)

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

And I can run a container from the corresponding image with:

  docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name project-two project-two-image

It took me some time to figure out that the webpack version I had to specify: -e "HOST=0.0.0.0" for the docker run command (or set it in the index.js file). But its described in a few places:

https://webpack.js.org/configuration/dev-server/#devserverhost

https://dev.to/azawakh/don-t-forget-to-give-host-0-0-0-0-to-the-startup-option-of-webpack-dev-server-using-docker-1483

Docker container running vue-cli Welcome Page on localhost: This site can’t be reached

But why is that not necessary for vue-cli-service serve is it hardcoded somewhere to use 0.0.0.0 (its not being set anywhere in my sourcefiles)?

Upvotes: 0

Views: 2022

Answers (1)

Adiii
Adiii

Reputation: 60066

But why is that not necessary for vue-cli-service serve is it hardcoded somewhere to use 0.0.0.0 (its not being set anywhere in my sourcefiles)?

Because of 0.0.0.0 default host in case of vue-cli-service.

Usage: vue-cli-service serve [options] [entry]

Options:

  --open         open browser on server start
  --copy         copy url to clipboard on server start
  --mode         specify env mode (default: development)
  --host         specify host (default: 0.0.0.0)
  --port         specify port (default: 8080)
  --https        use https (default: false)
  --public       specify the public network URL for the HMR client
  --skip-plugins comma-separated list of plugin names to skip for this run

https://cli.vuejs.org/guide/cli-service.html#using-the-binary

But in case of web-pack, you have to specify explicitly as the default host is localhost.

        var options = _.merge(
            {
                port: 8080,
                host: "localhost",
                keepalive: false,
                contentBase: ".",
           ...
           }

web-pack-default-host

Upvotes: 2

Related Questions