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;
Login to your author instance and go to package manager;
- Install the ACS AEM Tools package
- Install the latest Netty package
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
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)
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.
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, whether your editing directly in CRXDE Lite, running nodejs aemsync, vaulting, or running a maven build.
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, whether 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
LiveReload website
ACS AEM Tools
Netty package
NpmJs aemsync
LiveReload website
ACS AEM Tools
Netty package
NpmJs aemsync
No comments:
Post a Comment
If you have any doubts or questions, please let us know.