In this post, I provide an overview of the UI.Frontend module in AEM, describe my thoughts on why frontend developers will love it, and step through how to get started by adding the UI.Frontend module to an existing AEM multi-module project.

Overview

The UI.Frontend module was released with AEM Archetype 20. Source code for all front-end assets now resides within the UI.Frontend directory.  Within the UI.Frontend module,  WebPack is used to bundle JavaScript and transform front-end assets before distributing the output into the appropriate AEM client libraries of your project.

Benefits

As it is with many aspects of web application development, front-end technologies tend to evolve and change quickly. Browser vendors, consortiums, and committees regularly work to introduce new features while industry and developer communities look for new ways to improve on existing techniques. These (and other) factors make it challenging to define a one size fits all front-end development process. This is where WebPack comes in handy.

WebPack introduces a build step into the front-end development process. WebPack loaders & plugins support efficiency, code reuse, and maintainability by providing useful NodeJS utilities for doing things like:

• Compiling JavaScript (ES6) or TypeScript into JavaScript (ES5) 
• Transforming SASS or LESS into CSS stylesheets
• Testing

The UI.Frontend module in AEM provides a WebPack build step that is pre-configured to perform all of the tasks needed to convert front-end assets into AEM client libraries via a customizable, modern front-end development process.

Getting Started

The UI.Frontend module provides three options to choose from: General, React, or Angular. New AEM projects are generated with the General option by default. This can changed using the  frontendModule="<option>" flag to specify the option. e.g.

mvn -B archetype:generate \
    -D archetypeGroupId=com.adobe.aem\
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=26 \
    -D appTitle="AEM Tutorials Project" \
    -D appId="tutorials"  \
    -D frontendModule="general" \
    -D groupId="com.tutorials.aem" \
    -D artifactId="tutorials.aem" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="6.5.5"

Including the UI.Frontend module into an existing project can be done in a few simple steps.

1. Use the maven command above to generate a new temporary project using the same appTile, groupId, and artifactId as your existing project.
   
   
2. Copy the ui.frontend directory from the new project into the existing project directory alongside the ui.apps and core directories.
   
   
   
   
   • Make sure the ui.frontend/pom.xml project references reflect the existing project 
   • Make sure the ui.frontend/clientlib-config.js project references reflect the existing project
     
     
3. Add ui.frontend module to parent pom.xml modules list.
   

    <modules>
           ...
           <module>core</module>
           <module>ui.frontend</module>
           <module>ui.apps</module>
          ...
   </modules>

    

4. Copy frontend maven plugin from the newly created temporary project's parent pom.xml file into the existing project's parent pom.xml file
   

   <plugin>
      <groupId>com.tutorials.aem</groupId>
      <artifactId>frontend-maven-plugin</artifactId>
      <version>1.7.6</version>
      <configuration>
         <nodeVersion>v10.13.0</nodeVersion>
         <npmVersion>6.9.0</npmVersion>
      </configuration>
      <executions>
         <execution>
            <id>install node and npm</id>
            <goals>
               <goal>install-node-and-npm</goal>
            </goals>
         </execution>
         <execution>
            <id>npm install</id>
            <goals>
               <goal>npm</goal>
            </goals>
         </execution>
      </executions>
   </plugin>

5. Navigate into ui.frontend directory and run: npm install
   • Note: NodeJS v10 is defined in the configuration above
     
     
6. Using the terminal run mvn clean install from your existing project's root directory and verify a successful build.
   
   • Note: Ensure ui.apps/src/main/content/META-INF/vault/filter.xml reflects paths to the newly generated client libraries
     
     
7. From within the ui.frontend directory, you should now be able to run the npm run dev command