You can make a local MDriven Turnkey development site reload the browser when changed CSS or JavaScript source files are detected; this is for developers working on Turnkey HTML5 components and styles.
What auto reload does
Add the Live.js client script to the shared Turnkey layout. While the page is open, the script sends HEAD requests to check whether source files have changed. It reloads the page only when it detects a change.
This shortens the feedback loop when you edit a stylesheet or JavaScript used by your Turnkey application. For example, change a CSS rule that sets the page background, save the file, and the open browser page reloads so that you can inspect the new result.
Enable auto reload for local development
- Open the Turnkey project in the Turnkey core prototyper environment.
- Open
/Views/Shared/_Layout.cshtml. - Add the following script include to the layout:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
- Save
_Layout.cshtml. - Open or refresh the local Turnkey site in your browser.
- Edit and save a CSS or JavaScript source file. When Live.js reports the change, the browser reloads the page.
Use it while styling Turnkey
Auto reload is useful when you are iterating on the appearance of a MDriven Turnkey application. For example, you can change a CSS class used by a control, save the stylesheet, and immediately see the result after the automatic reload.
Use the normal Turnkey styling mechanisms to decide which class or style a control receives. HowTos:Define and Set CSS Styles in MDriven Turnkey describes data-driven styles, and HowTos:Styling and CSS for Bootstrap, Angular and MVC explains style references, CSS classes, image styles, and table styling.
The Fast CSS development workflow can also include LESS: edit the style source, save it, and use the reloaded browser page to evaluate the generated visual result.
Do not deploy this script
Remove the Live.js script include from /Views/Shared/_Layout.cshtml before you deploy or run the site as a server environment. The script repeatedly makes HEAD requests to look for changed files. That polling is useful during development but should not run on the deployed server.
Troubleshooting
| Symptom | Check |
|---|---|
| The page does not reload after a change. | Confirm that the script include is present in /Views/Shared/_Layout.cshtml, then refresh the browser page once so the browser loads Live.js.
|
| A style change reloads the page but does not change the appearance. | Confirm that you edited the stylesheet and CSS class that the rendered control uses. Review HowTos:Styling and CSS for Bootstrap, Angular and MVC for how Turnkey renders style references and CSS classes. |
| You are preparing a release. | Remove the Live.js script include. Do not leave development polling enabled in the deployed layout. |