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

Pre-requisites

• 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=https://repo.adobe.com/nexus/content/groups/public/ -DgroupId=AEM62App -DartifactId=echo62 -Dversion=0.1.0-SNAPSHOT -Dpackage=com.aem.community -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:

  org.apache.sling.api.scripting.ScriptEvaluationException: org.apache.sling.scripting.sightly.SightlyException: Cannot find a a file corresponding to class com.aem.community.core.models.HelloWorldModel 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)