Automate the creation of component and clientlibs in AEM/CQ5

While working for a client, i got a requirement. The requirement was simple they had front end team which was producing angular apps and i had to use the developed app and create an AEM component with clientlibs automatically with all the editing capabilities liked dialog etc. For anyone who isn’t aware about angular app, angular apps are one page apps and they use Angular JS. So for most part except header and footer nothing is going to be shared among all the apps that the front end devs were producing.

The solution that i devised was to use grunt. Grunt has several apis for file manipulation, json iteration etc. While creating the dialogs, i asked the front end devs to provide me a json which i then iterated and successfully produced the dialog.xml.

I also used the js and css that front end produced to produce the clientlib and js.tx and css.txt file. This was all done using grunt. Finally, they also produced html which i had to then parse and convert into sightly compatible html file.

The process took a while to deliver but now there is no upfront cost to the client in terms of having a AEM developer. The front guys can get the component produced by executing just a command.

The implementation was client specific but can help someone in developing something along the lines if there is any such need.


3 thoughts on “Automate the creation of component and clientlibs in AEM/CQ5

  1. Can you post some code snippets which we can follow? Can we create components having complex dialogs; having validation; events using grunt as well?

  2. Could you explain how you converted an Angular app into AEM components by using a simple example? I’m very curious about the conversion process end result. How do you deal with all the different components of an Angular app (directives, controllers, filters etc)?

    Very cool project!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s