Upload front-end changes into AEM, refresh relevant resources in the page and get instant notifications from the error.log, all for easier and faster development.
Speed up your AEM front-end development using aemfed. Powered by aemsync, Browsersync and Sling Log Tracer.
aemfed doing its thing: listening for file changes, uploading them to the running AEM instance, triggering a refresh of the styling in the browser, showing AEM error messages with a reference to the issue in the local file, all within a minute (disclaimer: this is a special branch of the WKND project, optimized for the aemfed workflow).
If you don't have a package.json (npm configuration file) for your project, you probably want to install aemfed globally:
npm install aemfed --global
If you do have a package.json for your project, you can add it as a dev dependency:
npm install aemfed --save-dev
The following commands are for the global install option (used --global).
Show the available options:
aemfed -h
Run with specific server, ignore pattern (to ignore IntelliJ temp files) and folder to watch (at the moment this has to be the actual jcr_root folder for your project):
aemfed -t "http://admin:admin@localhost:4502" -e "**/*___jb_+(old|tmp)___" -w "ui.apps/src/main/content/jcr_root/"
package.json installThe following commands are for a package.json install. Since aemfed is only available for this project and not globally, we can not use the aemfed command directly. You can use npx to run modules only available for a specific project.
Show the available options:
npx aemfed -h
When npx is not available, install it with:
npm install npx --global
Since you already have a package.json in your project, adding the startup command as a script is probably the easiest way to run aemfed (make sure the quotes in the command are escaped):
"devDependencies": {
"aemfed": "^0.0.5"
},
"scripts": {
"aemfed": "aemfed -t \"http://admin:admin@localhost:4502\" -e \"**/*___jb_+(old|tmp)___\" -w \"ui.apps/src/main/content/jcr_root/\""
},
...and run it with
npm run aemfed
Once started, the BrowserSync module will show the urls for the proxy that enables the auto reloading etc (when using aemfed these message use color, making them a lot clearer):
[Browsersync] Proxying: http://localhost:4502
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.1.2:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.2:3001
------------------------------------
If you connect your browsers to the Local or External Access URL, the Browsersync reload script will be injected into the pages you visit, allowing aemfed to reload pages automatically after changes have been uploaded to AEM.
Navigate to the page you want to work on and make some changes to the clientlib files under the path provided during startup. When saving the file, aemfed reports the detected file changes:
ADD jcr_root/apps/wknd/components/content/list/clientlib/less/styles/default.less
...and uploads them to AEM:
Deploying to [localhost:4502] in 39 ms at 2018-06-18T19:03:03.273Z: OK
When the upload is done, aemfed will determine which clientlibs need a reload. It also determines if a full reload of the page is needed (javascript, html, .content.xml) or if the changes can be injected w/o a complete reload (css and in the future probably static resources like images):
[localhost:4502] Only styling was changed, try to inject
[Browsersync] File event [change] : /apps/wknd/clientlibs/clientlib-base.css
[Browsersync] File event [change] : /apps/wknd/components/content/list/clientlib.css
If the changes can be injected, a list of all clientlibs that use the changed files is send to the listening browsers. The reloading script will determine which files are present in the current page and will refresh only those resources.
When the correct version of the Sling Log Tracer is installed (see Requirements for details), aemfed is able to intercept a number of the front-end related errors generated by AEM (Less, javascript, HTL, .content.xml, etc).
It shows the request that triggered the error:
[localhost:4502] Tracer output for [/etc.clientlibs/wknd/clientlibs/clientlib-base.css?browsersync=
1530965506424] (62c5e8ac-69e9-491c-8658-2bbed119d0c2)
...the error message itself:
[ERROR] LessCompilerImpl: failed to compile less /apps/wknd/components/content/list/clientlib/less/
list.less: NameError: variable @brand-secondary2 is undefined in /apps/wknd/components/content/list
/clientlib/less/styles/default.less on line 17, column 25:
16 &:hover {
17 background: @brand-secondary2;
18 }
...and an attempt to map the location in the error back to the local development environment:
Local source: ui.apps/src/main/content/jcr_root/apps/wknd/components/content/list/clientlib/less/st
yles/default.less:17:25
Most of these errors show up only once after the file has been changed, since AEM caches the result, so its best to keep the aemfed terminal always in clear view (using the terminal in your IDE is a good way to make sure this is the case).
The Local source: line in the output, is aemfed's attempt to translate the AEM error location back to the local file, line and column. So locating the issue becomes much easier. Some IDE's and shells even recognize the pattern and turn it into a link, to make your life even easier.
/system/console/bundles/org.apache.sling.tracer on the instance you're using. If it is 1.0.0 or newer you are good. If it is 0.0.2 or the bundle is not found at all, you need to install a newer version:/system/console/bundles on the instance you want to update and click Install/Update... in the top right cornerStart Bundle and Refresh Packages, browse for the package downloaded in step 2 and click Install or Update/system/console/bundles/org.apache.sling.tracerEnabled and Recording Servlet Enabled in the Tracer configuration: /system/console/configMgr/org.apache.sling.tracer.internal.LogTracerfilter.xml, so please be very careful when removing high level items when running aemfed. Changes to root nodes like /apps, /content and /etc are skipped, but when you remove /etc/clientlibs from your project (for example after you moved all your clientlibs to proxies in /apps) it does exactly that...@import. Resulting in a number of edge cases not working as expected (and throw ENOENT exceptions):
@import (used for example in the WKND tutorial in ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/site/css/grid.less to switch between the 6.3 and 6.4 grid-base). As a result changes in the imported file may not trigger an update in the browser@import doesn't work, since it appends .less to all @imports. But since the css probably doesn't need any Less processing anyway, it is better to include it directly in a css.txt (in older versions of AEM it also speeds up the Less processing)Thanks to the Browsersync team, to gavoja for aemsync and kevinweber for aem-front.
0.0.7
npm install and fix an issue when npm is trying to use ssh to get the referenceFAQs
Upload front-end changes into AEM, refresh relevant resources in the page and get instant notifications from the error.log, all for easier and faster development.
The npm package aemfed receives a total of 3,808 weekly downloads. As such, aemfed popularity was classified as popular.
We found that aemfed demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.