I am currently in the middle of setting up a front end workflow for Magento 2, however I am currently unable to get livereload to work. Everything I have read so far on various tutorials and the Magento dev docs seems to imply that by running "grunt watch" in the root, livereload is automatically fired, however this doesn't seem to be working for me.

Note that I have the Livereload extension installed in my browser (Chrome), and it works fine, as I already use it quite a bit for other non-Magento builds. Anything I missed?

For reference, I am using the sample Gruntfile that ships with Magento 2, and have made no changes.

I should also point out that Grunt works perfectly fine apart from the Livereload side of things, and I am able to execute the various grunt commands to compile Magento LESS files with no problem, again other than the browser refresh/Livereload issue above.

  • are you checking with localhost or server? Feb 28, 2018 at 10:48
  • I didn't have exactly the same problem as you or the same errors but you can collect some informations from my post, maybe it will help you. magento.stackexchange.com/a/219573/48355
    – PЯINCƎ
    Mar 23, 2018 at 12:12

4 Answers 4

  1. Firstly check if you've installed Node.js & Grunt in your machine.

Go to your Magento 2 installed directory.

Execute following command in your terminal or cmd.

npm install -g grunt-cli

Rename package.json.sample to package.json.

Then execute following command.

npm install
  1. Make sure your dev/tools/grunt/configs/themes.js has proper configuration.

Rename Gruntfile.js.sample to Gruntfile.js.

Then run following commands.

grunt clean

grunt exec:<grunt theme name>

grunt less:<grunt theme name>

For example

grunt clean

grunt exec:luma

grunt less:luma

Then afterwards

grunt watch
  • Apologies, I neglected to mention that I have already done all of the above, and Grunt is otherwise working perfectly fine, other than the Livereload part. My question has been updated accordingly.
    – wickywills
    Jul 12, 2016 at 16:31
  • @wickywills: Yes Gulp is better option then Grunt Jul 13, 2016 at 6:21

Ran into the same issue and in the end figured I've not had livereload node module installed (and yes I ran npm install like a few times) so installing livereload module through given below command fixed the issue:

npm install -g livereload

I use GULP JS as a task runner and the gulp-connect node module.

My understanding is you need to run a server to communicate the reload to the browser and the server is for sale on AppStore but gulp-connect is free.

I also think Gulp is more powerful and configurable than Grunt. Just My Opinion.

I convert LESS to CSS and then move the files and reload my browser. Here is my gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var debug = require('gulp-debug');
var path = require('path');
var connect = require('gulp-connect');

gulp.task('less', function() {
  return gulp.src('../../../www/skin/frontend/*****/default/less/**')
    .pipe(debug({title: "Files"}))
      paths: ['./']

// Start the LiveReload Server to communicate Browser Reloads
gulp.task('connect', function() {
    livereload: true

// Task to watch the final
gulp.task('watch', function() {
  gulp.watch('../../../www/skin/frontend/*****/default/less/**', ['less']);

// Start Watch and Connect on
gulp.task('default', ['watch', 'connect']);
  • meant to vote this one up, not down. I'm starting a new M2.3.5 project using snow.dog's alpaca theme and custom UI library that replaces the more confusing one by Adobe. I was never able to make grunt work with livereload - it just wouldn't connect. May 22, 2020 at 16:46
  • Cheers, glad you got it working.
    – FMD
    May 23, 2020 at 8:27
  • 1
    well I wouldn't go that far yet @FMD :) the snowdog instructions are somewhat lacking.. they assume you already understand thoroughly some low level theme considerations.. May 24, 2020 at 21:28

I came across this issue recently and it was down to the themes.js configuration file for grunt, the locale parameter was not matching up to admin configuration. Like you said everything was compiling but I had to manually refresh the page to see the results.

To fix it please make sure the locale param matches up to what your using for your theme.

You can quickly see what your using by viewing the page source:

... /frontend/Vendor/Theme/en_GB/css/styles-m.css

Mine says en_GB but in my configuration file I had en_US. I then updated it so it matches up:

themename: {
    area: 'frontend',
    name: 'Vendor/theme',
    locale: 'en_GB',
    files: ['css/styles-m', 'css/styles-l'],
    dsl: 'less'

It now live reloads as expected and source maps are working too.

Hope this helps!

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.