Live Reload Install in Magento2

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. when you change a CSS file or an image, the browser is updated instantly without reloading the page. With the liveReload it's over all that, it is just enough to save the update and 'Hoop' magically the content that you have changed instantaneously appear without refreshing the browser and without cleaning the cache, deploying the static-content either but for the cache, you also need Grunt.

  • Install live reload extension for Chrome/ Firefox. For chrome and For Firefox.
  • Install LiveReload package and check it
    • $ npm install -g livereload
    • livereload -v (will display the installed version)

Configure your theme to use LiveReload

Add the bellow line inside <head > tag in default.xml or default_head_blocks.xml of your current theme.
Example: app/design/frontend//Magento_Theme/layout/default_head_blocks.xml: 

<?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 src="http://127.0.0.1:35729/livereload.js" src_type="url"></script>
</head>
</page>

We use port 35729 because the LiveReload only connects to that port. It is hardcoded value, remove it while moving the code to the production server.

Move the livereload.js to your Magento_root

You can get the file path of livereload.js during the installation. For me, the path of that file is
/usr/local/lib/node_modules/livereload/bin/ 
$ cd <Magento_root>
$ cp /usr/local/lib/node_modules/livereload/bin/livereload.js .

Start using Grunt for your theme. 

grunt clean 
grunt exec:themeName 
grunt watch -v

How It will work

  • If you create a new less file it won’t be exist in the theme, So you have to create a symlink using grunt commands
  • Check if the LiveReload browser extension icon is well activated, in firefox the icon comes green, in Chrome the small dot inside the circle becomes full black
  • Open your custom.css or less file for example then change something then save, here you'll see in grunt watch some new line appears tells that this file has been changed something like: oxterminal
    and look now your browser, the item that you just changed appeared and updated instantly without reloading the page, also without cleaning the cache or deploying the static-content, everything is done automatically.

Grunt message: Fatal error: Port 35729 is already in use by another process

  • Close the current terminal and open a new terminal and run grunt watch.
  • Don't stop a process with Ctrl+C in the terminal.
  • Ctrl+Z will keep it running.
  • Find the process id by sudo lsof -i :35729, then kill it by sudo kill -9 PID ( Ex: sudo kill -9 24845)

For more help contact us, we are one of the best Magento 2 development services providers globally.