Use Grunt with LiveReload in Docker

Link copied

Attach video time

When you run grunt watch, you’ll still need to refresh the browser window every time you update a Less file, so the CSS updates can take effect. But there is something called LiveReload, which is a tool that does some magic.

LiveReload takes the power of grunt watch, and when it is used along with the corresponding LiveReload browser extension, it automatically reloads styles on a page without the need for a full page refresh. This can significantly boost your productivity when styling pages with LESS in Magento, and is a huge time saver.

Since we already have Grunt set up, we’ll just need the LiveReload Browser extension installed. It is available for both Chrome & Firefox.

After installing the extension, we’ll also need to make some updates to our theme. Within our theme, let’s create a file at Magento_Theme/layout/default_head_blocks.xml. This file contains any scripts or styles we’d like to add to the HTML head of the page. This will be a standard page node, that contains a head node, and we will be adding a JavaScript file to it with the script tag. Let’s add a defer attribute set to true, and set the src attribute to the location of our livereload script.

<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"><head><script defer="true" src="/livereload.js?port=443" src_type="url"/></head></page>

If you use docker-magento for your development environment, you’ll set this to a special value of /livereload.js?port=443. Remember ther port=443 parameter, it’s very important!

If you don’t use docker-magento, you’ll want to add on the URL of your site along with the port LiveReload is listening on. By default, this is almost always http://yourdomain.test:35729. We’ll remove this for now, since I’m using docker-magento.

Finally, save & reload the page. If you hover over the LiveReload browser icon, it should say “LiveReload is connected.”. If you see any other error, or a 404 or 502 error in the browser console when trying to load livereload.js, it’s either because the livereload.js file is loaded at a different address, or grunt watch isn’t running. That’s another thing to note: the livereload server is automatically spanned off when grunt watch executes.