AEM Vite

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.