Run into issue with setting webpack to work with grav and also enable HRM

  location ~* ^/(.*\.hot-update)\.(json|js)$ {
          set $upstream http://192.168.1.27:3001;
          proxy_pass $upstream/$1.$2;
  }

  location ~* ^/.*/(.*\.bundle\.(js|css)) {
          set $upstream http://192.168.1.27:3001/$1;
          proxy_pass $upstream;
  }

IP: 192.168.1.27 In this case the I have npm run serve runs on the same machine as the docker on port 3001. So using ip a to get the ip 192.168.1.27. If you are running on another network, just grab the IP of your machine and add the port at the end, for example: 192.168.1.127:3001.

So how is the above possible, let look at webpack setup:

// Spin up a server for quick development
devServer: {
  historyApiFallback: true,
  watchFiles: [paths.templates + "/**/*.twig"],
  devMiddleware: {
    /* make sure we have assets to work with, assets needs the file to be physically available to add the link/script tag to the page */
    writeToDisk: true,
  },
  compress: true,
  hot: true,
  host: "0.0.0.0", /* added this to expose webpack dev server to my pc ip or else it will only work locally */
  port: 3001,
  magicHtml: true,
}

By setting host: "0.0.0.0", we exposed webpack-dev-server to 0.0.0.0:3001, in turns enabled us to connect via 192.168.1.27:3001

// PART 2

So now our webpack is working with HRM ready. Next step would be updating our webpack dev support so we dont have to enable writeToDisk: true