howtomakeaturn/live-reload-kid

Reload your browser when files changed.

LiveReloadKid

Automatically reload your browser when specified files are updated with only PHP and JavaScript!, _(*1)

You're currently developing, and modify css/js files very frequently?, _(*2)

Don't need to press ctrl + R or ctrl + F5 to refresh your browser anymore!, _(*3)

Let LiveReloadKid save your fingers!☺, _(*4)

Installation

You can just download the file to your project, or install it via composer:, _(*5)

composer require "howtomakeaturn/live-reload-kid:0.1.*"

And then move live-reload-kid.js file to your asset folder., _(*6)

Client-side

Set the url to where you will trigger the LiveReloadKid., _(*7)

<script src='live-reload-kid.js'></script>
<script>
    LiveReloadKid.start({
        url: 'monitor.php'
    });
</script>

Server-side

Pass paths to the folder you want to monitor into the constructor., _(*8)

And then just return the response., _(*9)

// monitor.php

$monitor = new Howtomakeaturn\LiveReloadKid\LiveReloadKid(['folder/js', 'folder/css']);

echo $monitor->monitor();

Done!, _(*10)

Example

Let's say you are using Laravel. Just add this to the app/routes.php, _(*11)

Route::get('/monitor', function(){
    $kid = new Howtomakeaturn\LiveReloadKid\LiveReloadKid([
        public_path('/js'), app_path('views')
    ]);

    echo $kid->monitor();
});

And then in the client side, _(*12)

Everytime you update the view files or javascript files, your browser will reload automatically!, _(*13)

The Magic Behind

LiveReloadKid monitors the file system with long polling technique, notifying your browser if files modified in real-time!, _(*14)

Thanks to

LiveReloadKid is inspired by https://github.com/dbergey/Reloadr, _(*15)

Thanks bilzen and tobozo for the suggestions on Reddit., _(*16)