Information about using grunt is unclear

[kennylawrence]

Topic clarification/correction request

Topic Link

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html

Description

Using "grunt watch", how does LiveReload work if your browser isn't run on the host? How do they communicate? Is this an environment under which this process works? The manual states in one place:

"grunt watch | Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser."

This should mention that the reload part happens if you are using LiveReload. It is unclear if LiveReload has to be installed for the browser running on the same system as grunt/webhost or if it is possible for one to using LiveReload on a Windows machine, for example, while grunt is hosted elsewhere.

In the "Use Cases" heading further down the page, this:

"If you have LiveReload installed, run the grunt watch command, and the flow is even simpler:"

In summary, the process is clear, but the description of the environment under which this process works is unclear. Intuitively, it seems that a browser extension is not enough to make this work under the environment described. This lack of clarity could potentially lead one to go down a path of wasted time.

Possible solutions

Either, mention how LiveReload must run on the same system as the host (if that is the case), or that it can run on any system with some kind of configuration to make one system aware of the other (if that is the case), or that it can run on either system without consideration of configuration (if that is the case - eg, perhaps it works by reloading the root source .less file periodically in the background, and then if it detects a change, it reloads the page.. I don't know how it works..). I don't know which if these if any is correct, but I present them to help highlight the possibility for misinterpretation.

It appears after doing some more reading that there is a LiveReload server that needs to be installed (or perhaps only for the situation I describe, but not other? I do not know yet.) Anyway, some expert should fix this.

Additional information

[dobooth]

@dshevtsov Do you see anything amiss here?

[dshevtsov]

I'm not an expert in this.

[bdenham]

This is true. There needs to be a pretty big effort to clarify the information surrounding the processing of Magento .less files, whether in app modules or themes. The themes side is covered fairly well, but processing .less files within app modules is missing.

LiveReload has also recently become an issue because of Magento security enhancements. Current versions of LiveReload will not work with current versions of Magento.