4392 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+14 more
Enabled Moderator says

There’s a nifty app a lot of people are using for Mac, but I am curious if there is something similar for Windows. It’s called LiveReload, what it does, when you save the .code file you are working with, it automatically shows up a preview of it in the browser. Is there such app for Windows? ( I know about LiveView from Dreamweaver, and it is quite bad! :)

Any suggestions would be more than welcome! ( I’m not buying a Mac! )

214 posts
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Sells items exclusively on Envato Market
agusmu says

Usually, I open Notepad++ in one window, and open a browser in other window. I edit the code in Notepad++ and then refresh the browser… :bigevilgrin:

What about this firefox addon? I never use it…

https://addons.mozilla.org/en-US/firefox/addon/livereload/
4392 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+14 more
Enabled Moderator says
agusmu said
Usually, I open Notepad++ in one window, and open a browser in other window. I edit the code in Notepad++ and then refresh the browser… :bigevilgrin:

What about this firefox addon? I never use it…

https://addons.mozilla.org/en-US/firefox/addon/livereload/

Thank you my fellow angry bird player! agusmu! The sad side is that livereload is only for Mac. I already have a 2 screen system setup, but being still a “novice” in the world of jQuery and CSS3 , I have to constantly refresh and check to see if it’s reacting as I should. I am wasting a lot of time :D

214 posts
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Sells items exclusively on Envato Market
agusmu says

have you checked their Windows plan? :delicious:

http://help.livereload.com/kb/roadmap/windows-plans
You will have to wait a few months till LR2 hits Windows, though.
4392 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+14 more
Enabled Moderator says
agusmu said
have you checked their Windows plan? :delicious: http://help.livereload.com/kb/roadmap/windows-plans
You will have to wait a few months till LR2 hits Windows, though.

Yes, it’s bookmarked and set to remind me when ready :D I can’t wait!

214 posts
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 6 years
  • Sells items exclusively on Envato Market
agusmu says
Enabled said
Yes, it’s bookmarked and set to remind me when ready :D I can’t wait!

Give them money and then they will build it for you… :evil:

4392 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+14 more
Enabled Moderator says

I might as well buy a Mac then :D

2075 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Provided great feedback to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+9 more
revaxarts says
I’ve set up a livereload a while ago. They are basicly two files, one client and one server side. First the client side code (javascript, requires jQuery)
$(document).ready(function() {
    var filestowatch = [],
        base = location.protocol+'//'+location.hostname+location.pathname,
        timeout,
        active = false;

    $('script, link').each(function(i,e){
        var _this = $(e),
        src = _this.attr('src') || _this.attr('href');
        if(src && !src.match(/^http/) && !src.match(/^\/\//)){
            filestowatch.push({
                "src": src,
                "mod": 0
            });
        }
        filestowatch.push({
            "src": location.pathname,
            "mod": 0
        });
    });

    $(document).bind({
        'keyup.livereload': function(event){
            if(event.ctrlKey && event.keyCode == 76){
                if(active){
                    clearTimeout(timeout);
                    if(console)console.log('LiveReload is off');
                    active = false;
                }else{
                    if(console)console.log('LiveReload is on');
                    check();
                }
            };
        }
    });

    check();

    function check(){
        active = true;
        $.post("/live.php", { base: base, filestowatch: filestowatch },
          function(data){
              if(data.files){
                 filestowatch = data.files;
                 if(data.reload)location.reload();
                  timeout = setTimeout(check, 3000);
              }
        }, "json");
    }
});
and the server side “live.php” (php version):
if($_POST['filestowatch']){
    $files = $_POST['filestowatch'];
    $return = array();
    $return['files'] = array();
    $return['reload'] = false;
    foreach($files as $file){
        $time = getFileTime($file['src']);
        if($file['mod']){ 
            if($time != $file['mod'] && $time){
                $return['reload'] = true;
            }
        }
        $return['files'][] = array('src' => $file['src'], 'mod' => $time);

    }
    echo json_encode($return);
}

function getFileTime($src){
    $base = getcwd();
    $folder = dirname(str_replace('http://'.$_SERVER['HTTP_HOST'],'',$_POST['base']));
    if(file_exists($base.$folder.'/'.$src)){
        return filemtime($base.$folder.'/'.$src);
    }else if(file_exists($base.$src)){
        return filemtime($base.$src);
    } 
    return 0;
}

The idea is to get a list of all included files which are included, and the page itself and send this array to the server script which checks for any changes (filemtime).

The script checks for updates every three seconds (3000ms) and can be canceled with ctrl+L

This was done in 5 minutes so you may modify it to get it work on your environment.

by
by
by
by
by
by