aemfed
Advanced tools
Changelog
0.0.5
Readme
Speed up your AEM front-end development using aemsync, BrowserSync and this.
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 "src/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 \"src/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/styles/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.LogTracer@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)/system/console) in Firefox, the links from the top menu stop working correctly. After one or two clicks it keeps redirecting you to the bundles page. This behaviour has not been seen in Chrome or Safari.Thanks to the BrowserSync team, to gavoja for aemsync and kevinweber for aem-front.
FAQs
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 2,604 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.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.