Initial support for proxying all provided targets
Each target maintains and updates its own dumplibs clientlib tree
Prefix log messages with target name
BrowserSync proxy ports start at default (3000) and increase by two (proxy + ui) for each provided target, in same order as targets on command line

Integrate clientlib error logging

Show clientlib related errors for a request in console using Sling log tracers. It shows serverside errors for Less compilation and minification using the YUI and GCC
Read and store OSGi config to see if tracers are enabled and show instructions on how to enable on dev

Other

Add browsersync cache buster also on initial requests to stop using cached code on reload and make styling injection smoother on Firefox
Update several dependencies and rewrite for new aemsync 3.0 structure using Pipeline
Use patched version of aemsync to fix package manager clutter

Readme

Source

aemfed

Speed up your AEM front-end development using aemsync, BrowserSync and this.

Features

Watches changes in files and uploads them to AEM using aemsync
Determines which clientlibs are affected by the uploaded changes
Runs BrowserSync in proxy modus so it can communicate with all open instances of your site without any browser plugins. It reloads these pages when the changes have been uploaded, or it only injects the new styling when only styling changes were made, maintaining the state of the page.
Show serverside clientlib errors for each request

Installation

In your project folder

npm install aemfed

Usage

Show the available options

npx aemfed -h

When npx is not avialable, install it with

npm install -g npx

Run with specific server, ignore pattern and folder to watch

npx aemfed -t "http://admin:admin@localhost:4502" -e "**/*___jb_(old|tmp)___" -w "src/content/jcr_root/"

If you have a package.json in your project, add it as a script

"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, connect your browser to the local access URL and port provided by BrowserSync, so you load the pages with the BrowserSync scripts and reloading and injecting is working without any other plugins.

Requirements

Works best with a recent version of node/npm, but tested with node 6.x
Tested on AEM 6.1, 6.3 SP1 and 6.3 SP2

Isues

When sending a clientlib to BrowserSync that is not included in the page, all styling is reloaded. Issue in BrowserSync, will be fixed in future release: #1505
Using ~ (homedir) in paths to watch does not work as expected when aemfed does all the path processing (paths are surrounded with quotes)
YUI minification generates errors for each request if there is an error (Less and GCC generate errors only first time after a resource was changed)
Less variables are not supported in imports

Thanks to the BrowserSync team, to gavoja for aemsync and kevinweber for aem-front.

Keywords

FAQs

What is aemfed?

Is aemfed popular?

Is aemfed well maintained?

Last updated on 07 May 2018

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.

Install