aemclient-library

How to generate clientlib for each and every component and place them respective component folder under ui.apps


Generate clientlibraries for each component and place them in respective component folder under ui apps instead of single folder clientlibs


Solution

  • Example folder structure:

    /myComponent
      /clientlib
        /css
          styles.css
        /js
          setup.js
        css.txt
        js.txt
        .content.xml
      .content.xml
      myComponent.html
    

    css.txt

    #base=css
    styles.css
    

    js.txt

    #base=js
    setup.js
    

    /clientlib/.content.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        categories="[myProject.myComponent]"/>
    

    /myComponent/myComponent.html

    <div>
      ...
    <div>
    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
         data-sly-call="${clientlib.all @ categories='myProject.myComponent'}"/>
    

    This will put the CSS & JS files below the HTML of the component. Alternatively, you could include the client-library in another client-library:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        categories="[myProject.all]"
        embed="[myProject.myComponent]"/>
    

    You could have this myProject.all client-library included in the <head> of your site or wherever else you want.