0

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".

Improve this question
1
  • Have you started grunt watch and does your mode is developer mode?
    – Sunil Patel
    Commented Mar 3, 2020 at 14:15

1 Answer 1

Reset to default
0

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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.