AEM LiveReload

LiveReload is a browser plugin which automatically reloads browser windows when files change. It uses WebSockets to create a persistent connection to the server. When used with AEM 5.6 or AEM 5.6.1, this feature supports reloading pages when JSPs change. When used with AEM 6.0, it will also listen for client library changes.

• AEM 5.6.x - Supports reloading pages when any script changes.
• AEM 6 - Supports reloading pages when any script changes change AND when client libraries change.

For more information on LiveReload, visit http://livereload.com/

Installation

Installation of the ACS AEM Tools LiveReload functionality requires:

• ACS AEM Tools package
• Netty OSGi Bundles (via the Netty content package)
• LiveReload browser plugin

Installing ACS AEM Tools

1. Download and install the latest ACS AEM Tools package and install via AEM’s Package Manager

Installing Netty

1. Download the Netty content package and install via AEM’s Package Manager

This includes the necessary Netty OSGi bundles.

Install LiveReload Browser Plugin

• Chrome
• Firefox
• Opera
• IE

How to Use

1. After installation steps outlined above are complete, in your Web browser, navigate to the page you will be developing against; in this example: http://localhost:4502/content/geometrixx/en/products.html
2. Ensure the LiveReload browser plugin is enabled

3. Push your changes to to AEM (on the AEM install with Netty and ACS AEM Tools LiveReload installed) for the Component or Page under development.

   • LiveReload can be leveraged when vlt’ing files into CRX, deploying via Maven builds or editing in CRXDE/CRXDE Lite.
4. The browser window opened in Step 1. will automatically refresh and display the changes.

Tip: Append ?wcmmode=disabled to the end of the URL in your address bar to avoid loading authoring scripts and reduce refresh times.