title: Dockerize Vue.js: hot-reload is not working for vue/cli@4.5 or later versions
body: <p>I greatly appreciate your effort and the time to solve <strong>unresponsive hot-reload</strong> function when trying to run <strong>Vue.js app</strong> on Docker container using <strong>Docker engine on Windows 10 while WSL2 active</strong>, please take a look at below configurations:</p>
  <p>Vue.Setup.Dockerfile</p>
  <pre><code>FROM node:17-alpine
  EXPOSE 8080
  WORKDIR /app/frontend
  RUN npm --force install -g @vue/cli@4.5.15
  COPY /frontend /app/frontend
  ENV PATH /app/frontend/node_modules/.bin:$PATH
  CMD [ &quot;npm&quot;, &quot;run&quot;, &quot;serve&quot; ]
  </code></pre>
  <p>docker-compose.yml</p>
  <pre class="lang-yaml prettyprint-override"><code>version: &quot;3.8&quot;
  services:
      vue:
        build:
          context: .
          dockerfile: dockerfiles/Vue.Setup.Dockerfile
        restart: always
        ports:
          - &quot;127.0.0.1:8080:8080&quot;
        container_name: vue_ui
        volumes:
          - ./frontend/:/app/frontend/
          - /app/frontend/node_modules
        environment:
          - CHOKIDAR_USEPOLLING=true
  </code></pre>
  <p>vue.config.js</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
        publicPath:
            process.env.NODE_ENV === &quot;production&quot;
                ? &quot;/static/dist/&quot;
                : &quot;http://127.0.0.1:8080&quot;,
        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: &quot;0.0.0.0&quot;,
            port: &quot;8080&quot;,
            hot: true,
            headers: {&quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;},
            devMiddleware: {
                publicPath: &quot;http://127.0.0.1:8080&quot;,
                writeToDisk: (filePath) =&gt; filePath.endsWith(&quot;index.html&quot;),
            },
            static: {
                watch: {
                    ignored: &quot;/node_modules/&quot;,
                    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:&lt;port-number&gt;/ws' failed
                  */
                  hostname: &quot;0.0.0.0&quot;,
                  pathname: &quot;/ws&quot;,
                  port: 8080,
              },
          },
        },
  };
  </code></pre>
  <p><strong>Note:</strong> When run the command:</p>
  <pre><code>docker-compose up
  </code></pre>
  <p>The below message will show:</p>
  <blockquote>
  <p>It seems you are running Vue CLI inside a container.</p>
  <p>Since you are using a non-root publicPath, the hot-reload socket<br />
  will not be able to infer the correct URL to connect. You should<br />
  explicitly specify the URL via devServer.public.</p>
  <p>Access the dev server via http://localhost:&lt;your container's
  external mapped port&gt;</p>
  </blockquote>
  <p><strong>FYI</strong>: the option:</p>
  <blockquote>
  <p>devServer.public</p>
  </blockquote>
  <p>is no longer available in Vue/cli@4 or later versions.</p>
  <p><strong>WORKAROUND</strong>
  <a href="https://github.com/vuejs/vue-cli/issues/6841#issuecomment-1090241953" rel="nofollow noreferrer">solution</a></p>
  <p>Thanks,</p>