AEM Front

Tools that speed up AEM development

The Core Module

The AEM Front NPM module combines AEMSync with BrowserSync, allowing you to quickly push code changes to an AEM instance and reload the browser automatically.

Browser Extension

It’s recommended to combine the core module with the AEM Front Extension for Google Chrome. The extension injects the BrowserSync script into the page whenever it is loaded in your browser.

That is especially helpful if you interact with multiple AEM projects and don’t want to manually “pollute” the code of every project.

Moreover, the extension comes with a handy keyboard shortcut that swaps pages between wcmmode “edit” and “disabled”.

Webpack Plugin

There are several ways how you can utilize the AEM Front core module. One way is to make it part of your Webpack configuration. However, even how you integrate it into Webpack can vary depending on your needs.

My Gist illustrates how it can be done.

Open Source

All tools are free, and you can contribute on Github: AEM Front NPM Module and Browser Extension.

Screenshot of AEM Front Extension in Google Chrome

Screenshot of AEM Front running in the computers terminal