AEM Project Creation

In this blog, we will create a new project using the latest AEM archetype. Along the way, we’ll understand the structure of the project and will explore the modules involved in AEM development for components and templates.

1. How to create the AEM Project

There are two types of Maven archetypes you can use to create an AEM project:

1. AEM as a Cloud Service
   Set aemVersion=cloud to generate a project for AEM as a Cloud Service.
2. AEM 6.5 (AMS or On-Premise)
   Set aemVersion=6.5.0 if you’re using Adobe Managed Services or running AEM on-premise.

we will be using AEM as a cloud service

Steps

• Create a folder and Open the Command Prompt

• Note: Start your command prompt Run as Administrator, else it will throw an error at the end of project creation:

• Paste the following Maven Archetype in the Command line to generate the project in batch mode

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=37 -D appTitle="mySite" -D appId="AEM-MySite" -D
aemVersion="cloud" -D groupId="com.mySite"

• After running the command, you’ll see a folder created with the following structure:

~/code/
    |--- aem-guides-DeveloperResource/
        |--- all/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- pom.xml
        |--- README.md
        |--- .gitignore

• You can now open this folder and start exploring the modules. Each module plays a specific role in the project, such as backend logic, configurations, or front-end development.

2. Deploy and build the project

In this section, we will build and deploy the project code to a local instance of AEM.

Before you begin, make sure you have the following:

• An AEM author instance running locally on port 4502.

Steps to Build and Deploy:

• Open your terminal or command prompt and move to the project directory

cd <project Folder>

• The below command will help us to clean all the modules and delete target folders.

mvn clean install

• The below command will help us to deploy code in the AEM author instance. autoInstallPackage and other profiles will be generated at the time of project creation in main pom.xml. The below command will create a zip file of HTML, CSS, .jar, and other resources and install the same in the AEM author instance.

mvn clean install -PautoInstallPackage

• The below command will help us to deploy code in the AEM publish instance. As mentioned earlier, the autoInstallPackagePublish profile will be generated at the time of project creation in main pom.xml. The below command will also create a zip file of HTML, CSS, .jar, and other resources and install the same in the AEM author instance.

mvn clean install -PautoInstallPackagePublish

• The below command will deploy only Java code as a jar file in the form of a bundle.

mvn clean install -PautoInstallBundle

The build process typically takes about a minute. If everything runs smoothly, you should see a success message at the end, indicating the deployment is complete.

...

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for DeveloperResource Sites Project 0.0.1-SNAPSHOT:
[INFO]
[INFO] DeveloperResource Sites Project ................................. SUCCESS [ 0.113 s]
[INFO] DeveloperResource Sites Project - Core .......................... SUCCESS [ 3.136 s]
[INFO] DeveloperResource Sites Project - UI Frontend ................... SUCCESS [ 4.461 s]
[INFO] DeveloperResource Sites Project - Repository Structure Package .. SUCCESS [ 0.359 s]
[INFO] DeveloperResource Sites Project - UI apps ....................... SUCCESS [ 1.732 s]
[INFO] DeveloperResource Sites Project - UI content .................... SUCCESS [ 0.956 s]
[INFO] DeveloperResource Sites Project - UI config ..................... SUCCESS [ 0.064 s]
[INFO] DeveloperResource Sites Project - All ........................... SUCCESS [ 8.229 s]
[INFO] DeveloperResource Sites Project - Integration Tests ............. SUCCESS [ 3.329 s]
[INFO] DeveloperResource Sites Project - Dispatcher .................... SUCCESS [ 0.027 s]
[INFO] DeveloperResource Sites Project - UI Tests ...................... SUCCESS [ 0.032 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 23.189 s
[INFO] Finished at: 2023-01-10T11:12:23-05:00
[INFO] ------------------------------------------------------------------------

• Once the build and deployment are complete, you need to verify that the required packages are installed successfully. Follow these steps:

• Hit the URL: http://localhost:4502/crx/packmgr/index.jsp  and verify all the below-installed packages.

• Below are the project-related required packages that always need to be installed once the build is successfully done.

  • project_name.ui.content-1.0.0-SNAPSHOT.zip
  • project_name.ui.apps-1.0.0-SNAPSHOT.zip
  • project_name.ui.config-1.0.0-SNAPSHOT.zip
  • project_name.all-1.0.0-SNAPSHOT.zip

• If any of these packages are missing, review the build and deployment process to identify any issues.

• For a successful build, It is always required to verify the installed bundle/jar file just after the build. Its status must be active.

• http://localhost:4502/system/console/bundles

3. Understand all Sub-Modules.

In an AEM project, several sub-modules handle different parts of the system. Each module plays a critical role in organizing the project’s resources, making the development process more manageable. Let’s break down the key sub-modules:

a. core module

• The core module is responsible for the Java or backend code in the project. The backend logic, services, and APIs that drive the AEM application are bundled into a JAR file. This file gets installed into the AEM instance as part of the practice.all-1.0.0-SNAPSHOT.zip package.

• Below is the location of the project core jar file having all the backend code

b. ui.apps

• The UI.apps module is responsible for creating an empty structure inside the /apps/ and /etc/ hierarchies in AEM. It handles components, OSGi configurations, and client libraries (clientlibs).

c. ui.content

• The UI.content module creates an empty structure inside the /content/ and /content/dam/ hierarchies. It deals with the content itself, including pages, assets, templates, and experience fragments.

d. ui.frontend

• The UI.frontend module focuses on all the front-end resources, such as CSS, JavaScript, and other static files required for styling and interactivity.

e. ui.config

• The UI.config module is responsible for defining run modes in AEM. In earlier versions of AEM, this was part of the ui.apps module, meaning that even a small change in configuration required a full rebuild of the ui.apps package.

These sub-modules work together to define different layers and aspects of your AEM project. By separating the concerns into specific modules, you can easily manage and scale your project as it grows.

4. Most Common Error

• GO to parent POM.xml in project

• npm install This issue will be covered while installing the maven command To Resolve this issue.

• Go to Ui.frontend –> Module

• Go to Package.json –> Update TypeScript value –> “typescript”: “^4.8.3”,