Magento 2 - LiveReload is connected, but changes are only visible after manual reload

magento.stackexchange https://magento.stackexchange.com/questions/306011

Вопрос

I try to use grunt watch in combination with livereload. But there is almost no documentation on the topic.

I installed livereload like this:

npm install -g livereload

Then I added the following line to "THEME\Magento_Theme\layout\default_head_blocks.xml":

<head>
    ...
    <script src="http://www.example.com:35729/livereload.js" src_type="url"></script>
    ...
</head>

NOTE: Of course replace www.example.com with your domain

Then I flushed the cache.

Now I executed grunt watch.

If I reload the site and hover over the icon I get:

enter image description here

"LiveReload is connected, click to disable"

If I change a .less file, then the files are successfully recompiled by grunt watch, but the changes are not shown in the browser, only after I reload manually.

If I call "http://enter_ip_of_your_server_here:35729/livereload.js" in the browser directly, then I get "website not reachable".

Это было полезно?

Решение

The message "LiveReload is connected" is wrong and misleading.

I tried it again on a fresh magento 2.3.4 on my own linux server.

I did all the steps described in my question.

If I call "http://www.example.com:35729/livereload.js" in the browser directly, then I get:

{"tinylr":"Welcome","version":"0.2.1"}

So this means it works! There the changes are visible without reloading and the plugin works as expected!

NOTE: Make sure to use http and not https, otherwise it wont work!

But back to my other server where it does not work yet...

I figured out that the port 35729 is getting blocked, so I asked my hoster to unblock it. The hoster opened the ports, now I finally got:

{"tinylr":"Welcome","version":"0.2.1"}

when calling http://enter_ip_of_your_server_here:35729/livereload.js in the browser directly!

But the plugin does still fail and does not reload the content on change...

I figured out that if I start livereload directly in the terminal, that I get alot of error messages containing:

Error: ENOSPC: System limit for number of file watchers reached

So the problem must be that the limit of file watchers is reached.

You can check the max value with cat /proc/sys/fs/inotify/max_user_watches.

For me it returns 8192 but on the other working server it is set to 65536.

My hoster increased the value, the errors disapeared, but the LiveReload extension still failed.

So I opened the browsers developer tools and inspected the console and network traffic. I figured out that "liveload.js" was unable to load:

enter image description here

I figured out that I get this message in the browser console, because I serve the script with http instead of https, because otherwise it wont work and now there is mixed content:

Mixed Content: The page at 'https://example.com/customer/account/index/' was loaded over HTTPS, but requested an insecure script 'http://example.com:35729/livereload.js'. This request has been blocked; the content must be served over HTTPS.

I followed this guide on stackoverflow to bypass this and now it finally works!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с magento.stackexchange
scroll top