4594 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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/
4594 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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.
4594 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 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:

4594 posts Community Mod Building awesome stuff for your mobile devices!
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Has sold $125,000+ on Envato Market
+15 more
Enabled Moderator says

I might as well buy a Mac then :D

2184 posts
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
  • Participated in a focus group or interview to improve the user experience on Envato Market
  • Interviewed on an Envato blog
+10 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by