Being an AEM front-end developer for the past 5 years, I have always found it a challenge to quickly preview my changes in an AEM environment. Changing a style, building the Maven project, refreshing the browser all took time, disrupted the development flow, and slowed productivity greatly.
Although there were IDE plugins available, I always found them a bit tedious to work with or they were restricted to a particular IDE which I didn't use. Vault CLI was also an option but would always get out of sync and was a manual process. Because of this, I ended up coming up with a custom solution using Node, NPM, gulp, and available NPM modules. This worked well but took some time to set up and still required me to refresh the page once the changes were synced. If there were ever any problems, I would need to dig into the error log to determine what was going on.
Always looking to better the workflow and increase productivity, I have come across aemfed, a Node module that has some of the same functionality that I created, but takes it a step further, combining aemsync, Browsersync, and Sling Log Tracer to deploy, review, and debug front-end code quickly.
- Runs on macOS, Linux, and Windows
- Works best with a recent version of node/npm, but tested with node 6.17 LTS
- Tested on AEM 6.1, 6.2, 6.3, 6.4 and 6.5
- To be able to see the error messages from AEM, at least version 1.0.0 of the Sling Log Tracer is needed.
aemfed features include:
- Watching for changes in files and uploads them to AEM
- Runs Browsersync proxy to communicate with all open instances of your site without any browser plugins.
- Show serverside errors related to clientlibs
- If the error messages contain references to the jcr, it tries to link to them locally so you can navigate directly to the file
1. Since aemfed is a Node.js module you will need to ensure you have node and npm installed locally. I'm using the latest versions of both although aemfed should work in earlier versions.
Run the following in a terminal or command prompt:
node -v npm -v
The output should look similar to the following:
If Node and NPM are not installed, visit https://nodejs.org and install it on your system.
2. Once you have confirmed that Node and NPM are installed, you can install aemfed. We will be installing it globally on our system but if you have a local package.json in your project, you can install it at the project level.
npm install -g aemfed
Confirm aemfed is installed properly with:
3. Confirm your Sling Log Tracer version by visiting http://localhost:4502/system/console/bundles/org.apache.sling.tracer
If you have a version earlier than 1.0.0, see Updating Sling Log Tracer for instructions.
4. Enable Sling Log Tracer in our AEM instance so that debugging will appear in the aemfed output.
Visit http://localhost:4502/system/console/configMgr and search for the "Apache Sling Log Tracer" configuration.
Edit the configuration, checking both "Enabled" and "Recording Servlet Enabled" and then save the configuration.
Now we are ready to use aemfed.
To show the available aemfed options:
If you run your local AEM environment on a port other than 4502 you will want to use the targets option (-t). If you use IntelliJ or another IDE that has temp files, you will want to use the exclude_filter (-e) to ignore them.
Run the following command at the root of your project. Ensure to update the -w option to point to the jcr_root of the project.
aemfed -t "http://admin:[email protected]:4502" -w "ui.apps/src/main/content/jcr_root/"
Now that aemfed is running, your default AEM environment is being proxied through port 3000 allowing you to visit http://localhost:3000. The aemfed output will acknowledge any changes or errors in its output.
If you make a change to any of the project files, you will notice that aemfed detects the change, syncs it to your local AEM environment and refreshes the browser window.
You are now up and running with aemfed. Let me know in the comments about what tools you find helpful while developing your AEM front-end or if you have any questions using aemfed.