Laravel reload on change (Docker, Mix, React, Browsersync)

Hi there,

I have a problem with reloading page when making changes on frontend part. I will try to describe you how my setup looks like and what do I want to achieve.

I'm using docker setup with several containers (nginx, reactjs, api, database). Everything operates normally, nginx takes connection on port 80 and pass it to react or api containers, depending of the url, if it's app or api subdomain. It is separated setup, and I'm not using react preset for laravel. As I mentioned, this part works fine.

Now, on the top of the same docker image, I would like to extend it with another application. It needs to be separated from existing, but I would like to use React preset on this Laravel installation. Could be separated as well, and possibly could solve the issue but since it's smaller app, I don't really need to separate it.

The plan is to access it via app2.domain.com and app2.domain.com/api for api routes.

Currently, with my setup, I'm able to access both urls and I can preview the pages, both, React and api routes. I'm using supervisor to run process and I'm using npx run watch. Works perfectly, and if I make a change, it will build it and I can see my changes there. But only when I refresh. Note that I'm running all commands from container side, so nothing from host side.

So, my problem now is that I can't make it work as hot reload, I've tried many things, and almost everything that I could find on web. BrowserSync, Laravel-mix, Live reload, Hmr, etc.

I'm not able to connect it to work properly, because I don't understand how container can speak with the "host world" and ask browser to reload.

I don't have all versions that I tried because I did many changes while trying things.

Basically, how to make a browser reload when using Docker and accessing it with custom domain via nginx and passing proxy to react app.

Thank you for your time!