Hot Reloading

Templates has a simple, but effective configuration-free hot-reloading feature built-in that's enabled when registering the TemplatePagesFeature plugin:

Plugins.Add(new TemplatePagesFeature());

It can then be enabled in your website by adding the expression below at the top of your _layout.html:

{{ ifDebug | select: <script>{ '/js/hot-loader.js' | includeFile }</script> }}

This will embed the dependency-free hot-loader.js script during development to poll the service endpoint below:

/templates/hotreload/page?path=path/to/page&eTag=lastETagReceived

Which responds with whether or not the client should reload their current page, preserving their current scroll offset.

An easy way to temporarily disable hot reloading is to prefix the expression with the end filter {{ end | ifDebug ... }} or if preferred you can just use comments {{‌* ifDebug ... *‌}}

When to reload

Hot Reloading only monitors Template Pages. You'll need to do a hard refresh with Ctrl+Shift+F5 if making changes to .css or .js to force the browser to not use its cache. For App Code or Configuration changes you'll need to restart your App to pick up the changes.

Implementation

The Service is just a wrapper around the ITemplatePages.GetLastModified(page) API which returns the last modified date of the page and any of its dependencies by scanning each expression in the page's AST to find each referenced partial or included file to find the most recent modified date which it compares against the eTag provided by the client to determine whether or not any of the pages resources have changed.

Since it's just scanning the AST instead of evaluating it, it will only be able to find files and partials that were staticaly referenced, i.e. the typical case of using a string literal for the file name as opposed to a dynamically creating it.

made with by ServiceStack