Let's Learn AEM: Working with aemfed

Working with aemfed

aemfed is an open-source, command-line tool that can be used to speed up front-end development.

It is powered by aemsync , Browsersync and Sling Log Tracer.

aemfed listens to file changes and automatically syncs the to a running AEM instance.

Based on the changes, a local browser will automatically refresh, thereby speeding up front-end development.

It also is built to work with Sling Log tracer to automatically display any server-side errors directly in the terminal.

[QR Code] QR code of current url available in browser console using qr() or ___browserSync___.qr()

ADD jcr_root/apps/wknd/clientlibs/clientlib-site/components/header/styles/default.less

Deploying to [localhost:4502] in 1624 ms at 2019-11-14T12:53:58.290Z: OK

[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/clientlibs/clientlib-site.css

ADD jcr_root/apps/wknd/clientlibs/clientlib-site/components/header/styles/default.less

Deploying to [localhost:4502] in 150 ms at 2019-11-14T12:54:33.997Z: OK

[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/clientlibs/clientlib-site.css

ADD jcr_root/apps/wknd/clientlibs/clientlib-site/components/header/styles/default.less

Step 1: To show errors directly to the command line

Open http://localhost:4502/system/console/configMgr and search for Apache Sling Log Tracer.

Update the configuration to Enabled and Recording Servlet Enabled :

Step 2: Install “aemfed”

For this you need npm so, download and install it.

After that run the following command to install “aemfed” Globally.

npm install aemfeed --global

This will allow us to run aemfed from any directory.

Step 3:

From the command line navigate to the project home path.

Run the following command to start aemfed against an aem instance running on localhost:4502:

aemfed -t "http://admin:admin@localhost:4502" -w "ui.apps/src/main/content/jcr_root/"

Navigate using the proxy URL to the AEM page you have been working with for example:

http://localhost:3000/content/wknd/en/first-article.html?wcmmode=disabled

You should now see the same contents of AEM but rendered via port 3000.

Step 4: See the changes directly on browser

Open any less/css project file from your drive in any editor of your choice and make the changes.

You can directly the see changes coming to browser as follows:

Under Command prompt:

C:\Users\rohit.chauhan\Downloads\aem-guides-wknd-master\aem-guides-wknd-master>aemfed -t "http://admin:admin@localhost:4502" -w "ui.apps/src/main/content/jcr_root/"

---------------------------------------

Working dirs: [

'C:\\Users\\rohit.chauhan\\Downloads\\aem-guides-wknd-master\\aem-guides-wknd-master\\ui.apps\\src\\main\\content\\jcr_root'

]

Targets: http://admin:admin@localhost:4502

Proxy port: 3000

Interval: 100

Exclude:

---------------------------------------

Something missing or not working as expected, open an issue on GitHub: https://github.com/abmaonline/aemfed/issues

---------------------------------------

Scanning: C:\Users\rohit.chauhan\Downloads\aem-guides-wknd-master\aem-guides-wknd-master\ui.apps\src\main\content\jcr_root ...

Awaiting changes ...

---------------------------------------

Get state for all instances: 351 ms

Read file tree: 24 ms

TRYREADFILE WARN COULD NOT READ FILE C:\Users\rohit.chauhan\Downloads\aem-guides-wknd-master\aem-guides-wknd-master\ui.apps\src\main\content\jcr_root\libs\wcm\foundation\clientlibs\grid\grid_base.less

Build style tree: 74 ms

[localhost:4502] Get data from server: 897 ms

[localhost:4502] Process data: 50 ms

[localhost:4502] Clientlib tree: 948 ms

Build style and clientlib trees: 949 ms

---------------------------------------

[Browsersync] Proxying: http://localhost:4502

[Browsersync] Access URLs:

---------------------------------------

Local: http://localhost:3000

External: http://192.168.54.130:3000

---------------------------------------

UI: http://localhost:3001

UI External: http://localhost:3001

---------------------------------------

[QR Code] QR code of current url available in browser console using qr() or ___browserSync___.qr()

ADD jcr_root/apps/wknd/clientlibs/clientlib-site/components/header/styles/default.less

Deploying to [localhost:4502] in 1624 ms at 2019-11-14T12:53:58.290Z: OK

[localhost:4502] Only styling was changed, try to inject