Installation
Deprecation Notice
Please be aware that the ClientLib filtering functionality in the AEM Vite plugin for AEM is now deprecated and will be discontinued in the near future. A Vite specifc plugin will be made available that enhances the local development experience. See Vite Plugin for additional information.
Installation is straightforward and easy. Please ensure your read the below carefully as some manual steps are needed to finish the installation.
Add the Maven dependency
Add the aem-vite.all
package as a Maven dependency in your apps pom.xml
file.
<dependency>
<groupId>dev.aemvite</groupId>
<artifactId>aem-vite.all</artifactId>
<version>2.2.1</version>
</dependency>
Next, add the following to your FileVault configuration; remembering to change the <target>
path to suit your project structure.
<embedded>
<groupId>dev.aemvite</groupId>
<artifactId>aem-vite.all</artifactId>
<type>zip</type>
<target>/apps/${appId}-packages/application/install</target>
</embedded>
INFO
This will typically be added to your all module or ui.apps if you don't have an all module.
Dependencies
AEM Vite doesn't rely on any 3rd-party dependencies and only makes use of API's available in the AEM Uber JAR and Cloud SDK.
Configure ClientLibs
As Vite natively builds ES modules by default, it is important to have AEM generate <script module>
tags for your ClientLibs.
Update your template(s)
The first change needed will be switch from the built-in clientlib.html
HTL template to the AEM Vite template. Start by opening all of your page components/templates and change:
<sly
data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
></sly>
to
<sly
data-sly-use.clientlib="/apps/aem-vite/granite/sightly/templates/clientlib.html"
></sly>
Add esModule
HTL binding
Within the same file(s), locate all your data-sly-call
instances for clientlib.<type>
where <type>
refers to all or js. Update all instances where you require ES module support. Adding the esModule
binding won't automatically enable ES modules which you will need to enable in the next step.
<sly
data-sly-test="${clientLibCategoriesJsHead}"
data-sly-call="${clientlib.js @ categories=clientLibCategoriesJsHead, esModule=true}"
></sly>
Add esModule
ClientLib property
Next, open your ClientLibs folder/configuration and after allowProxy
add the esModule
property which instructs the custom ClientLibs handler in AEM Vite to generate <script>
tags with the module
attribute.
See the example below.
<?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"
allowProxy="{Boolean}true"
esModule="{Boolean}true"/>
Please Note
Only add the esModule
property to ClientLibs that will be consuming ES bundles generated by Vite. Adding it to non-ES modules won't break things in general but is not recommended.