title: Hot Reload HMR Webpack not working on Docker Container WSL2
body: <p>To preface, I am new to Docker.</p>
  <p>I created my own docker container for my local development environment for a project I am working on using Intertia.JS + Laravel Jetstream in Ubuntu on WSL 2.</p>
  <p>I am having trouble getting the HMR Hot Reloading for webpack to work, when I run <code>npm run hot</code> - it also does not start a proxy server...</p>
  <p>When I run <code>docker-compose exec php npm run hot</code> I get the following message:</p>
  <pre><code>&gt; @ hot /var/www/html
  &gt; cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack- 
  dev-server.js --inline --hot --disable-host-check -- 
  config=node_modules/laravel-mix/setup/webpack.config.js
  
  ℹ ｢wds｣: Project is running at http://localhost:8080/
  ℹ ｢wds｣: webpack output is served from http://localhost:8080/
  ℹ ｢wds｣: Content not from webpack is served from /var/www/html/public
  ℹ ｢wds｣: 404s will fallback to /index.html
  
  DONE  Compiled successfully in 27200ms     
  </code></pre>
  <p>When I try to make a change to a vue template for example, the changes do not get reflected on the website running on Chrome (localhost:8080) - not even if I hard refresh the page. The changes are NEVER updated even though the compilation is successful every time.</p>
  <p>I tried to play with my webpack config following other suggestions online, but to no avail.</p>
  <p>For example adding <code>hmrOptions</code> and <code>devServer</code> options.</p>
  <p>Here is my <code>webpack.mix.js</code> for reference:</p>
  <pre><code>const cssImport = require('postcss-import')
  const cssNesting = require('postcss-nesting')
  const mix = require('laravel-mix')
  const path = require('path')
  const purgecss = require('@fullhuman/postcss-purgecss')
  const tailwindcss = require('tailwindcss')
  
  mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css/app.css')
    .options({
      hmrOptions: {
        host: 'localhost',
        port: '8080',
      },
      postCss: [
        cssImport(),
        cssNesting(),
        tailwindcss('tailwind.config.js'),
        ...mix.inProduction() ? [
          purgecss({
            content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
            defaultExtractor: content =&gt; content.match(/[\w-/:.]+(?&lt;!:)/g) || [],
            whitelistPatternsChildren: [/nprogress/],
          }),
        ] : [],
      ],
    })
    .webpackConfig({
      mode: 'development',
      output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
      resolve: {
        alias: {
          vue$: 'vue/dist/vue.runtime.esm.js',
          '@': path.resolve('resources/js'),
        },
      },
      devServer: {  // I have tried with &amp; without this
        proxy: {
          host: '0.0.0.0',  
          port: 8080,
        },
        watchOptions:{
          aggregateTimeout:200,
          poll:5000,
        },
      },
    })
  
  if (mix.inProduction()) {
    mix.version()
    mix.sourceMaps()
  }
  </code></pre>
  <p>Here is my docker-compose.yml</p>
  <pre><code>version: &quot;3.7&quot;
  services:
    php:
      build:
        args:
          user: admin
          uid: 1000
        context: ./
        dockerfile: Dockerfile
      image: app
      container_name: app-php
      restart: unless-stopped
      working_dir: /var/www/html
      volumes:
        - ./:/var/www/html
      networks:
        - app
  
    mysql:
      image: mysql:5.7
      container_name: app-mysql
      restart: unless-stopped
      environment:
        MYSQL_DATABASE: ${DB_DATABASE}
        MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
        MYSQL_PASSWORD: ${DB_PASSWORD}
        MYSQL_USER: ${DB_USERNAME}
        SERVICE_TAGS: dev
        SERVICE_NAME: mysql
      volumes:
        - ./docker-compose/mysql:/docker-entrypoint-initdb.d
        - nodemodules:/node_modules
      networks:
        - app
  
    nginx:
      image: nginx:alpine
      container_name: app-nginx
      restart: unless-stopped
      ports:
        - 8080:80
      volumes:
        - ./:/var/www/html
        - ./docker-compose/nginx:/etc/nginx/conf.d/
      networks:
        - app
      links:
        - php
      depends_on:
        - php
  
  networks:
    app:
      driver: bridge
  
  volumes:
    nodemodules: {}
  </code></pre>
  <p>Here is my Dockerfile</p>
  <pre><code>FROM php:7.4-fpm
  
  # Arguments defined in docker-compose.yml
  ARG user
  ARG uid
  
  # Install system dependencies
  RUN curl -sL https://deb.nodesource.com/setup_13.x | bash
  
  RUN apt-get update &amp;&amp; \
      apt-get install -y -q --no-install-recommends \
      nano apt-utils curl zip unzip default-mysql-client nodejs build-essential git \
      libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
      libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
      libonig-dev \
      libxml2-dev \
      libfreetype6-dev libaio-dev zlib1g-dev libzip-dev &amp;&amp; \
      echo 'umask 002' &gt;&gt; /root/.bashrc  &amp;&amp; \
      apt-get clean
  
  # Clear cache
  RUN apt-get clean &amp;&amp; rm -rf /var/lib/apt/lists/*
  
  # Install PHP extensions
  RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
  
  # Get latest Composer
  COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
  
  
  
  # Create system user to run Composer and Artisan Commands
  RUN useradd -G www-data,root -u $uid -d /home/$user $user
  RUN mkdir -p /home/$user/.composer &amp;&amp; \
      chown -R $user:$user /home/$user
  
  # Set working directory
  WORKDIR /var/www/html
  
  USER $user
  
  EXPOSE 8080
  </code></pre>
  <p>Let me know if you need more information. Thank you!</p>