This note will focus on project setup, core components, editable templates, client-side libraries, and component development with AEM sites.
Create the project
- Verify the Maven is installed.
- Navigate to the directory where you want to generate the AEM project.
- Paste the following code.
mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D archetypeVersion=39 \ -D appTitle="WKND Sites Project" \ -D appId="wknd" \ -D groupId="com.adobe.aem.guides" \ -D artifactId="aem-guides-wknd" \ -D package="com.adobe.aem.guides.wknd" \ -D version="0.0.1-SNAPSHOT" \ -D aemVersion="cloud"
4. The following folder and file structure is generated.
~/code/ |--- aem-guides-wknd/ |--- all/ |--- core/ |--- ui.apps/ |--- ui.apps.structure/ |--- ui.config/ |--- ui.content/ |--- ui.frontend/ |--- ui.tests / |--- it.tests/ |--- dispatcher/ |--- pom.xml |--- README.md |--- .gitignore
Deploy and build the project.
- Ensure an author instance of AEM running locally on port 4502.
- From the command line, navigate to the project directory.
$ cd aem-guides-wknd
3. Run the following command to build and deploy the entire project to AEM.
$ mvn clean install -PautoInstallSinglePackage
4. Navigate to Package Manager on your local AEM instance: http://localhost:4502/crx/packmgr/index.jsp. You should see packages for
5. Navigate to the Sites console: http://localhost:4502/sites.html/content. The WKND Site is one of the sites. It includes a site structure with a US and Language Masters hierarchy. This site hierarchy is based on the values for
isSingleCountryWebsite when generating the project using the archetype.
6. Open the US
> English page by selecting the page and clicking the Edit button in the menu bar:
7. Starter content has already been created and several components are available to be added to a page. Experiment with these components to get an idea of the functionality.
Inspect the project
The generated AEM project is made up of individual Maven modules, each with a different role. This tutorial and most development focus on these modules:
- core – Java Code, primarily back-end developers.
- ui.content – contains structural content and configurations like editable templates, metadata schemas (/content,%20/conf?lang=en).
- all – this is an empty Maven module that combines the above modules into a single package that can be deployed to an AEM environment.
Inclusion of Core Components
AEM Core Components are a set of standardized Web Content Management (WCM) components for AEM. These components provide a baseline set of a functionality and are styled, customized, and extended for individual projects.
Source Control Management
Maven creates a target folder whenever you build and install the code package. The target folder and contents should be excluded from SCM.
ui.apps module observe that many
.content.xml files are created. These XML files map the node types and properties of content installed in the JCR. These files are critical and cannot be ignored.
The AEM project archetype generates a sample
.gitignore file that can be used as a starting point for which files can be safely ignored. The file is generated at
Ui.apps and Ui.content modules
The ui.apps maven module contains all the rendering code needed for the site beneath
/apps. This includes CSS/JS that is stored in an AEM format called clientlibs. This also includes HTL scripts for rendering dynamic HTML. You can think of the ui.apps module as a map to the structure in the JCR but in a format that can be stored on a file system and committed to source control. The ui.apps module only contains code.
Components can be thought of as small modular building blocks of a web page. In order to reuse components, the components must be configurable. This is accomplished via the author dialog. Next let’s author a simple component and inspect how values from the dialog are persisted in AEM.
TL (HTML Template Language) and Dialogs
HTML Template Language or HTL is a light-weight, server-side templating language used by AEM components to render content.
Dialogs define the configurations available that can be made for a component.
Create the Article Page Template
When creating a page you must select a template, which is used as the basis for creating the page. The template defines the structure of the resultant page, initial content, and allowed components.
There are three main areas of Editable Templates:
- Structure – defines components that are a part of the template. These are not editable by content authors.
- Initial Content – defines components that the template start with, these can be edited and/or deleted by content authors
- Policies – defines configurations on how components behave and what options authors have.
Client libraries and front-end workflow
- Store CSS/JS in small discrete files for easier development and maintenance
- Manage dependencies on third-party frameworks in an organized fashion
- Minimize the number of client-side requests by concatenating CSS/JS into one or two requests.
Client-side libraries do have some limitations. Most notably is a limited support for popular front-end languages like Sass, LESS, and TypeScript.
Update base styles
Next, update the base styles defined in the ui.frontend module. The files in the
ui.frontend module generate the
clientlib-dependecies libraries that contain the Site theme and any third-party dependencies.
Client-side libraries do not support more advanced languages like Sass or TypeScript. There are several open-source tools like NPM and webpack that accelerate and optimize front-end development. The goal of the ui.frontend module is to be able to use these tools to manage most front-end source files.
*New Zealand Review Study Channel