4

Edit : about the possible duplicate !

I would like to mention that this answer does not answer my question, if someone sees that it is the same thing, I invite him to answer me instead of saying that he is duplicated and we will see if it solves my problem.

I think that when looking for something, the first reflex is to search if there was already the same question as mine that was asked before, and I saw this post and it does not answer my problem! and even more there is not a reliable answer or accepted !


Does anyone ever work or still work with the liveReload via grunt ?

  • I have some problem, i don't know why but the liveReload dont refresh th content changed automatically.

  • I have grunt installed and it works fine i can clean, exec, etc but, when i enter: grunt watch he watch well the changes, exemple: if i change mycustom.css, he display :

File "pub/static/frontend/Package/theme/fr_FR/css/mycustom.css" changed. Completed in 0.001s at Wed Mar 21 2018 16:08:58 GMT+0100 (CET) - Waiting...

But he doesn't refresh the page,(when i refresh it manually, i see well my changes) is there a configuration to do in grunt or in the server ?

  • I also wanted to mention that the liveReload browser extension is well installed but does not work, ie when I press on a logo, it shows me an error message:

Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.

7

It's been two days since the post is open and no one has found the answer to my question, and working hard on this topic I finally found the solution. So I decided to publish the complete solution, the installation of Grunt and then Livereload and how to configure both together because I found that they are very useful tools for Magento2 and even more for the frontend developers

Let's start:

What is LiveReload ?

For those who don't know what is LiveReload, LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

I find this beautiful because for a developer Magento when it is in full development or integration he is obliged to refresh the page manually to see the result, then he goes back on his code he update, he saves, he clean the cache, then he returns to the browser , he refresh the browser and so on, while 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 but I explain in detail how to put this.

What is Grunt ?

Grunt is a JavaScript Task Runner, a tool that allows you to create automated tasks in JavaScript,

it is very useful for Magento 2 because by its configuration, it allows us to removes the theme related static files in the pub/static and var directories, set up the .less files, and especially the watch that observes the changes of the files and which it is indispensable for the our liveReload

Now the installation :

Grunt:

Important : be sure that you are in developper mode, in root project location when you execute the command bellow.

Rename the package.json.sample to package.json, Gruntfile.js.sample to Gruntfile.js

  1. We have to install npm node.js on your machine : sudo apt-get install npm

  2. Install Grunt CLI : npm install -g grunt-cli

  3. Refresh nodejs : npm install

  4. To make sure that the npm is well installed the npm -v should output something like: 5.7.1, for Grunt grunt --version should output something like: grunt-cli v1.2.0

  5. Grunt theme configuration: go to : dev/tools/grunt/configs/themes.js then add your current theme name that you are used, assuming that your theme name is : Prince/amir in : app/design/frontend/Prince/amir so you add the following in module.exportslike this:

    module.exports = {
    ...
    prince: { // for the clean command
        area: 'frontend',
        name: 'Prince/amir', //Vendor/theme
        locale: 'fr_FR', //locale
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/custom' // for custom.less for exemple 
        ],
        dsl: 'less'
    ...
    },
    
  6. You can use grunt clean:prince to removes the theme related static files in the pub/static and var directories.

  7. Save . More informations

LiveReload:

  1. npm install -g livereload

  2. To make sure that the liveReload is well installed, livereload -v should output the version something like : 0.7.0

  3. Install the LiveReload browser extension, available for Chrome and Firfox.

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

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <script src="http://200.120.00.01:35729/livereload.js" src_type="url"></script>
    </head>
    

    Here as you see there is an IP(200.120.00.01) address plus the port(35729) plus livereload.js file

    So what to do: replace this IP with your IP project, the port remains the same dont change it 35729 and the livereload.js you copy it in your root project, you can get it from the livereload installation(remember we installed it before) the path is: /usr/lib/node_modules/livereload/ext/livereload.js, or from this github.

it's time to practice:

  1. We lunch the Grunt watch to monitor our files changes.

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

    important : if everything is good, if you enter in your browser your IP:35729 exemple : 200.120.00.01:35729, you'll see some welcome message like:

    tinylr "Welcome"

    version "0.2.1"

  3. Open your custom.css for exemple 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:

File "pub/static/frontend/Prince/amir/fr_FR/css/custom.css" changed.

and look now your browser, Hoop 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.

here I am finished, I hope you will enjoy this, it is really useful tool.

Good luck.

  • Glad you finally got it working, I'm not going to use this though as I don't trust myself not to accidentally commit the XML to the codebase, I wouldn't like to see that end up on production. – Ben Crook Mar 26 '18 at 11:58
  • @BenCrook - look at the RemoteLiveReload browser extension for Chrome, the "official" LiveReload only connects to localhost:335729. Also see my answer on magento.stackexchange.com/a/225390/289 for more debugging tips – jay May 9 '18 at 21:37
  • Thanks for the suggestion, fortunately I don't use Grunt anymore so this isn't an issue for me. – Ben Crook May 10 '18 at 8:03
  • My project is design by CoffeeScript and no default.xml file found, how to change ip address in my project. (in livereload step 4) – Yuyang He Jun 19 '18 at 3:01
  • My location of livereload on Ubuntu: /usr/local/lib/node_modules/livereload/bin/livereload.js – BartZalas Oct 5 '18 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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