aemfed

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

Issues

• 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.