How to install LiveReload and use 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.
<script src="http://127.0.0.1:35729/livereload.js" src_type="url"></script>
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
$ cd <Magento_root>
$ cp /usr/local/lib/node_modules/livereload/bin/livereload.js .
Start using Grunt for your theme.
grunt watch -v
How It will work
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