devServer.public no longer exists in Vue CLI v5. Update documentation on that

[ssm951]

Version

5.0.0-rc.1

Environment info

Environment Info:

  System:
    OS: Linux 4.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.0-rc.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.0-rc.1 
    @vue/cli-plugin-babel: ~5.0.0-0 => 5.0.0-rc.1 
    @vue/cli-plugin-eslint: ~5.0.0-0 => 5.0.0-rc.1 
    @vue/cli-plugin-router:  undefined (5.0.0-rc.1)
    @vue/cli-plugin-typescript: ~5.0.0-0 => 5.0.0-rc.1 
    @vue/cli-plugin-unit-jest: ~5.0.0-0 => 5.0.0-rc.1 
    @vue/cli-plugin-vuex:  undefined (5.0.0-rc.1)
    @vue/cli-service: ~5.0.0-0 => 5.0.0-rc.1 
    @vue/cli-shared-utils:  5.0.0-rc.1 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vue/test-utils: ^1.3.0 => 1.3.0 
    @vue/vue2-jest: ^27.0.0-alpha.3 => 27.0.0-alpha.3 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.0.3 => 8.0.3 
    jest-serializer-vue:  2.0.2 
    typescript: ~4.1.5 => 4.1.6 
    vue: ^2.6.11 => 2.6.14 
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-cli-plugin-vuetify: ^2.4.3 => 2.4.3 
    vue-eslint-parser:  8.0.1 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  16.8.3 (15.9.8)
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^2.4.0 => 2.6.0 
    vuetify-loader: ^1.7.0 => 1.7.3 
  npmGlobalPackages:
    @vue/cli: 5.0.0-rc.1

Steps to reproduce

1. Have a vue project with @vue/cli v5 dependencies run in a development container.
2. Set up a custom "publicPath" in vue.config.js.
3. Run "npm run serve"

What is expected?

If hot-reload needs additional config for a devServer running in a container, the proper way to fix it is given.

What is actually happening?

Hot-reload is not working, and we cannot set up devServer.public anymore. There should be an updated error message on how to fix it instead of the following, which we got:

It seems you are running Vue CLI inside a container.

  Since you are using a non-root publicPath, the hot-reload socket
  will not be able to infer the correct URL to connect. You should
  explicitly specify the URL via devServer.public.

  Access the dev server via http://localhost:<your container's external mapped port>

---

It seems that the update to webpack removed the devServer.public option that could have been used to fix the hot-reload issue. Please update the warning message to update on the proper way to fix the hot-reload issue.

[pablolmedorado]

I'm still facing this issue. Any further info?

Thanks in advance

[Wadhah-Sky]

I'm facing the same issue of hot-reload when run vue.js on Docker container using Docker engine on Windows 10 while WSL2 active.

Vue.Setup.Dockerfile

FROM node:17-alpine
EXPOSE 8080
WORKDIR /app/frontend
RUN npm --force install -g @vue/[email protected]
COPY /frontend /app/frontend
ENV PATH /app/frontend/node_modules/.bin:$PATH
CMD [ "npm", "run", "serve" ]

docker-compose.yml

version: "3.8"
services:
    vue:
      build:
        context: .
        dockerfile: dockerfiles/Vue.Setup.Dockerfile
      restart: always
      ports:
        - "127.0.0.1:8080:8080"
      container_name: vue_ui
      volumes:
        - ./frontend/:/app/frontend/
        - /app/frontend/node_modules
      environment:
        - CHOKIDAR_USEPOLLING=true

vue.config.js

module.exports = {
      publicPath:
          process.env.NODE_ENV === "production"
              ? "/static/dist/"
              : "http://127.0.0.1:8080",
      pages: {
          index: {
              entry: 'src/main.js',
              template: 'public/index.html',
              filename: 'index.html',
              title: 'QuestionTime',
              chunks: ['chunk-vendors', 'chunk-common', 'index']
          },
      },
      // Webpack configuration
      devServer: {
          host: "0.0.0.0",
          port: "8080",
          hot: true,
          headers: {"Access-Control-Allow-Origin": "*"},
          devMiddleware: {
              publicPath: "http://127.0.0.1:8080",
              writeToDisk: (filePath) => filePath.endsWith("index.html"),
          },
          static: {
              watch: {
                  ignored: "/node_modules/",
                  usePolling: true,
              },
  
          },
          client: {
            webSocketURL: {
                // You need to config this option, otherwise the below error will occur in your browser console when
                // trying to connect to development server from another Docker container:
                //
                // WebSocket connection to 'ws://127.0.0.1:<port-number>/ws' failed
                //
                hostname: "0.0.0.0",
                pathname: "/ws",
                port: 8080,
            },
        },
      },
};

[Wadhah-Sky]

WORKAROUND So far there is no clear solution for this problem , so, for who have interest to solve the hot-reload issue when running vue/[email protected] or later versions on Docker container for develop Vue.js applications, you can install 'nodemon' package which is a tool that helps to automatically restarting the node application when file changes in the directory are detected.

So the Dockerfile for Vue service would look like below:

Vue.Setup.Dockerfile

FROM node:17-alpine
EXPOSE 8080
WORKDIR /app/frontend
RUN npm --force install -g @vue/[email protected]

# install 'nodemon' package.
RUN npm install nodemon

COPY /frontend /app/frontend
ENV PATH /app/frontend/node_modules/.bin:$PATH

# Execute the command to run development server of vue/cli using 'nodemon', after specify the files to track and to
# watch only, in my case only want 'src' file of vue application to watch, and track changes in files with:
# .js, .css and .vue extension. 
CMD ["nodemon", "--ext", "js,css,vue", "--watch src", "--exec", "npm", "run", "serve" ]

NOTE I know it's not an ideal solution but it's working fine and will take 2-3 seconds to restart your container and the other ones that depends on.

[Stefanosapk]

I'm facing same issue and hot-reload does not work with vue/[email protected] stack overflow

[mediasystem-slai]

I have same issue that hot-reload doesn't work with vue/cli 4 and 5. I've tried all solutions I found on stack overflow, github issues, blogs and even asked ChatGPT. None of them works.

[dcandas]

I was having issues due to get requests for hot-reload files throwing 404 in a micro-frontend setup only when using docker containers. https://cli.vuejs.org/migrations/migrate-from-v4.html#dev-server suggests setting devServer.client.webSocketURL instead of devServer.public. Doing so fixes the issue, but the correct webSocketURL must be set. I extracted this value manually by inspecting the ws requests in dev tools for the non-containerized version of the app. An automatic way to figure this out and inject it would be great.

Edit: Apparently, the webSocketURL in the client block just tells your browser how it can reach the websocket, so if you e.g. bind your 80080 devserver running in docker to port 9000 on your host machine, you can just add

devServer: {
  client: {
    webSocketURL: 'ws://localhost:9000/ws'
  }
}