How to get AEM 6.3 to Livereload clientlibs

Question

I am using the gulp-aemsync plugin to sync my css and js changes to a clientlib on an AEM instance. A have a gulp task watching the js and css that runs gulp-aemsync fine (changes are on the site when i refresh), but being a bit lazy as i am it would be nice to get live reload working so that i never have to manually refresh the page while working.

I have tried to follow both these 2 online guides:

https://adobe-consulting-services.github.io/acs-aem-tools/features/live-reload/index.html

https://www.cognifide.com/our-blogs/cq/up-and-running-with-livereload-in-adobe-aem6

Followed the steps of:

installing Netty package on AEM instance
installing ACS AEM tools package on the AEM instance
installing the RemoteLiveReload chrome extension (the AEM instance is hosted on AWS)

That didn't work, so i got one of our DevOps engineers to open port 35729 (which is the default for Livereload) on the AEM instance. That still doesn't work, and when i click the chrome browser extension to sync it i get the following message:

Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.

Can anyone help me figure this out as i'd really like to get it working to streamline my workflow.

Thanks

Ahmed Musallam Ahmed Musallam · Accepted Answer · 2018-06-14T14:47:18

DISCLAIMER: This answer is based on a setup I had working at some point, and by no means is a complete/working answer. But it should give you an alternative to the other tools that exist and get you half way there.

I have not used the tools you are mentioning, but since you are using gulp and aemsync, you could do the following:

In your gulp setup, create a websocket server and basically make that server publish messages everytime aemsync is triggered to push content to AEM.

// start a websocket server
const WebSocket = require('ws'); // requires "npm install ws"
const wss = new WebSocket.Server({ port: 8081 });
const connections = [];
wss.on('connection', function connection(ws) {
  connections.push(ws); // keep track of all clients

  // send any new messages that come to this server, to all connected clients
  ws.on('message', (d) => connections.forEach(connection => connection.send(d)));
});

// create a new websocket to send messages to the websocket server above
const ws = new WebSocket('ws://localhost:8081');

// send a regex to the server every second
// NOTE: CHANGE this to run when aemsync is triggered in your build 
setInterval( () => ws.send('reload'), 1000 );

Then in your JS code (on AEM) or really in a <script> tag that you make sure will NOT go beyond your local (or dev/prod) you can setup a websocket listener to refresh the page:

socket = new WebSocket('ws://localhost:8081');
socket.onopen  = // add function for when ws is open
socket.onclose  = // add function for when ws is closed
socket.onerror = // add function for when ws errors
// listen to messages and reload!
socket.addEventListener('message', function (event) {
  location.reload();
});

Alternatively, you could use the chrome plugin I've developed: https://github.com/ahmed-musallam/websocket-refresh-chrome-ext

It's not perfect by any means. However, for a basic setup, it should work great! an you don't need to touch your AEM JS.

How to get AEM 6.3 to Livereload clientlibs

1 Answers