What is LiveReload
LiveReload automatically reloads the browser window (or just individual assets) when files change on the server side. It uses a browser plugin and WebSockets to create a persistent connection between the browser and server, when files change the server sends a request to the browser plugin to reload the page, or just a single file in the case of CSS and images.
In AEM 5.6 this feature supports reloading pages when JSPs change. But, when used with AEM 6, it also works with client library changes! Awesome!!
Getting up and running
Install server packages
Login to your author instance and go to package manager;
Install browser plugin
Which browser plugin you need, depends on how you run your AEM author.
If running locally;
- Install LiveReload browser extension
If running in a vm or remotely;
- Install the chrome RemoteLiveReload extension
Other tools (optional)
You can get file changes pushed automatically to AEM using a node.js module called aemsync. (Very useful if you are doing any preprocessing on assets, e.g. if you are running Compass to compile your CSS)
See Further Reading section below for more information.
Ways to use LiveReload
Once all the installations steps are complete, navigate to a page on your AEM author instance and ensure your browser plugin is running. Then edit any file the page uses and push the change to AEM, the page should update automatically and your change should be visible. LiveReload will work however you push your changes, weather your editing directly in CRXDE Lite, running nodejs aemsync, vaulting or running a maven build.
- Ensure you have the correct browser plugin installed and that it's running
- If running AEM locally, ensure you do not have the LiveReload app running
- If running AEM remotely, ensure the web-sockets port 35729 is accessible, install the chrome RemoteLiveReload extension and view the background page to check for errors