How to organize your clientlibs JavaScript files by Integrating Adobe Experience Manager and System.Js

Some simple steps to organize your clientlibs javascript files using System.js

Repository with the final code


  • An Adobe Experience Manager (AEM) Instance
  • Java  
  • Maven
  • SystemJs

Creating the app

  • AEM project archetype
  • Creating your first Adobe Experience Manager 6.2 Project using Adobe Maven Archetype 10
  • Assuming you that have maven in the path, if not change "mvn" to for example "c:\program files\maven3.3.9\bin\mvn"
    mvn archetype:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10 -DarchetypeRepository= -DgroupId=AEM62App -DartifactId=echo62 -Dversion=0.1.0-SNAPSHOT -DappsFolderName=AEM62App -DartifactName=AEM62App -DcomponentGroupName=AEM62 -DcontentFolderName=AEM62App -DcssId=AEM62CSS -DpackageGroup=AEM62App  -DsiteName=AEM62App
  • Add the import-package element with javax.inject;version=0.0.0,* inside the instructions element in the pom.xml:48 file to fix the: Cannot find a a file corresponding to class in the repository.
    Processing Info:
    Page             = /content/AEM62App/en 
    Resource Path    = /content/AEM62App/en/jcr:content/par/servicecomponent 
    Cell             = helloworld 
    Cell Search Path = page/par|parsys/helloworld 
    Component Path   = /apps/AEM62App/components/content/helloworld
  • Add dependencies="[jquery]" at the end of the .content.xml clientlib file
  • Add System.js, my-module.js and reusable-module.js alongside the .content.xml.  I suggest you add a folder also to store all your js files and also many more sub-folders inside that one so you have each module in its own "set"
  • Remember to add the files and their respective locations to the js.txt as seen in the video
  • Modify the helloworld.html:22 so we can target it using the new module
  • mvn clean install -PautoInstallPackage for installing the app
  • Et voilà, we now have ourselves a new project using system.js and adobe experience manager (AEM)

Entradas populares de este blog

Why marketing matters even if you are "just" a software developer

Metamorph: Como crear el Diagrama de Estados para la aplicación Hello World en Enterprise Architect

Metamorph: How to create the Hello World’s state Diagram in Enterprise Architect