/ 
Mojolicious-Plugin-AssetPack-0.62
River stage one • 6 direct dependents • 6 total dependents
/ Mojolicious::Plugin::AssetPack::Manual::Reloader

NAME

Mojolicious::Plugin::AssetPack::Manual::Reloader - Enable automatic reloading of assets

DESCRIPTION

It is possible to reload assets in the browser, when they are changed on disk.

This feature is EXPERIMENTAL, and should only be used while developing!

Example application

use Mojolicious::Lite;

# need to specify to AssetPack that we want to enable "reloader"
plugin AssetPack => {reloader => {}};

# define our own assets, define some routes and start the app
app->asset("app.css" => "/css/app.css");
get "/" => "index";
app->start;

__DATA__
@@ css/app.css
body { background: #eee; }
@@ index.html.ep
<!DOCTYPE html>
<html>
  <head>
    <title>Reloader demo</title>
    %= asset "app.css"
    %# Reloader is only available in development mode
    %= asset "reloader.js" if app->mode eq "development"
  </head>
  <body>
    Reloader demo. Try to change css/app.css and see this page auto-update.
  </body>
</html>

Running the application

To make this work, we need to start morbo and manually make it watch our files:

$ morbo -w morbo examples/reloader.pl -w lib -w templates -w public/css

How does it work?

reloader.js contains a JavaScript which connects to a WebSocket in our server. Every time the WebSocket connection is broken the JavaScript will trigger a refresh.

There are two different refresh strategies available: "head" and "document".

plugin AssetPack => {
  reloader => {strategy => "head"}
};

Setting the strategy to "head" will only replace the head-tag in your document, while the default ("document") will refresh the whole document.

AUTHOR

Jan Henning Thorsen - jhthorsen@cpan.org