Up and Running with LiveReload in Adobe AEM6

21 November 2014
Patrick Clancey
Frink_Cognifide_2016_HeaderImages_0117

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;

If running in a vm or remotely;

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)

To install

$ npm install aemsync -g

To run

$ aemsync -t http://admin:admin@localhost:4502 ~/workspace/my_project

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.

Trouble Shooting

  • 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

Further Reading