Live refresh/reload/update page

[Cruorzy]

Hey!

 

Quick question what is the best way to make your page refresh/update live immediately when a CSS, HTML or JavaScript file changes?

I noticed there where some Chrome plugins to do this, even some JS code i believe? Not sure what the most efficient way is

 

Thanks!

[Yerst]

I just signed up to this forum because noone seemed to answer^^

I would write some JS that frequently pulls down the files you want to track, check if they have changed, then perform a reload.

Should look a bit like that (i quick&dirty coded this into the post, there are MANY things you could do better, it's just to give you an example):

 

var oldFile1;
var oldFile2;

setTimeout(liveReload,10000);
function liveReload() {
  $.get('//file/you/want/to/track.js', function (data) {
		if (oldFile1 != undefined)  {
    		if (oldFile1 != data) {
              window.reload();
            }
  		} else {
        	oldFile1 = data;
        }
  });
  $.get('//other/file/you/want/to/track.css', function(data) {
    if (oldFile2 != undefined)  {
    		if (oldFile2 != data) {
              window.reload();
            }
  		} else {
        	oldFile2 = data;
        }
  });
}

 

[Cruorzy]

Thanks! at the end i did test LiveReload tool and it works great for developing on a local machine!
 

For now its exactly what i want, simple and perfect for trying out some CSS things.

[Yerst]

If this is what you want to do, i would recommend you brackets.io. It's a free Editor with a Live Preview Function.

Also Chrom Dev Tools are great for trying things out without reload

[Clechay]

As far as I know LiveReload sets up local server, adds own js to your html and opens socket between server and browser, then server monitors files and when ever it detects a change it orders browser (via socket) to reload sth. To learn more about websockets you can check out MDN https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

[espurritado]

If you are just programming and what to see your changes faster, there's an atom extension called atom-live-server, which creates a local server where you can load your html and adds a bit of code that makes it reload every time one of the files being used changes

[Cruorzy]

The thing is im using Atom atm probably going to chabge to phpstorm anyway and the plugins will setup their own server, wanted to use my apache in wamp still so decided to get live reload.

 

It does not setup their own environment but just keeps track of the folder, which is just what i needed.

 

Thanks for the answers anyway

[SpaceNugget]

You can use webpack-dev-server for this but unless you are going to take advantage of the actual packing of webpack it might be a bit much, especially if you are a beginner at webdev.