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.
<h2>Overview</h2>
<img src="https://i.ibb.co/2thWCwX/AEM-UI-Frontend-Module.png" alt="AEM UI.Frontend Module" width="100%" />
The UI.Frontend module was released with <a title="AEM Archetype" href="https://github.com/adobe/aem-project-archetype/blob/master/VERSIONS.md" target="_blank" rel="noopener">AEM Archetype</a> <a title="AEM Archetype 20" href="https://github.com/adobe/aem-project-archetype/releases/tag/aem-project-archetype-20" target="_blank" rel="noopener">20</a>. Source code for all front-end assets now resides within the UI.Frontend directory.&nbsp; Within the UI.Frontend module,&nbsp; <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" title="WebPack" href="https://webpack.js.org/" target="_blank" rel="noopener">WebPack</a> is used to bundle JavaScript and transform front-end assets before distributing the output into the appropriate AEM client libraries of your project.
<h2>Benefits</h2>
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 &amp; plugins support efficiency, code reuse, and maintainability by providing useful NodeJS utilities for doing things like:
<ul>
<li>Compiling JavaScript (ES6) or TypeScript into JavaScript (ES5)&nbsp;</li>
<li>Transforming SASS or LESS into CSS stylesheets</li>
<li>Testing</li>
</ul>
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.
<h2>Getting Started</h2>
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 &nbsp;frontendModule="&lt;option&gt;" flag to specify the option. e.g.
<pre class="language-markup"><code>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"</code></pre>
<h4>Including the UI.Frontend module into an existing project can be done in a few simple steps.</h4>
<ol>
<li>Use the maven command above to generate a new temporary project using the same appTile, groupId, and artifactId as your existing project. </li>
<li>Copy the ui.frontend directory from the new project into the existing project directory alongside the ui.apps and core directories. <img src="https://i.ibb.co/68YW4yZ/clone-ui-frontend-module-from-tmp.png" alt="" width="100%" /> 
<ul>
<li>Make sure the ui.frontend/pom.xml project references reflect the existing project&nbsp;</li>
<li>Make sure the ui.frontend/clientlib-config.js project references reflect the existing project </li>
</ul>
</li>
<li>Add ui.frontend module to parent pom.xml modules list. 
<pre class="language-markup"><code> &lt;modules&gt;
 ...
 &lt;module&gt;core&lt;/module&gt;
 &lt;module&gt;ui.frontend&lt;/module&gt;
 &lt;module&gt;ui.apps&lt;/module&gt;
 ...
&lt;/modules&gt;</code></pre>
&nbsp;
</li>
<li>Copy frontend maven plugin from the newly created temporary project's parent pom.xml file into the existing project's parent pom.xml file 
<pre class="language-markup"><code>&lt;plugin&gt;
 &lt;groupId&gt;com.tutorials.aem&lt;/groupId&gt;
 &lt;artifactId&gt;frontend-maven-plugin&lt;/artifactId&gt;
 &lt;version&gt;1.7.6&lt;/version&gt;
 &lt;configuration&gt;
 &lt;nodeVersion&gt;v10.13.0&lt;/nodeVersion&gt;
 &lt;npmVersion&gt;6.9.0&lt;/npmVersion&gt;
 &lt;/configuration&gt;
 &lt;executions&gt;
 &lt;execution&gt;
 &lt;id&gt;install node and npm&lt;/id&gt;
 &lt;goals&gt;
 &lt;goal&gt;install-node-and-npm&lt;/goal&gt;
 &lt;/goals&gt;
 &lt;/execution&gt;
 &lt;execution&gt;
 &lt;id&gt;npm install&lt;/id&gt;
 &lt;goals&gt;
 &lt;goal&gt;npm&lt;/goal&gt;
 &lt;/goals&gt;
 &lt;/execution&gt;
 &lt;/executions&gt;
&lt;/plugin&gt;</code></pre>
</li>
<li>Navigate into ui.frontend directory and run: npm install
<ul>
<li>Note: NodeJS v10 is defined in the configuration above </li>
</ul>
</li>
<li>Using the terminal run mvn clean install from your existing project's root directory and verify a successful build. 
<ul>
<li>Note: Ensure ui.apps/src/main/content/META-INF/vault/filter.xml reflects paths to the newly generated client libraries </li>
</ul>
</li>
<li>From within the ui.frontend directory, you should now be able to run the npm run dev command</li>
</ol>

An overview of the AEM UI.Frontend module describing what it is and how it improves the frontend developer process