Getting Started with AEM Sites - Setup Project Eduzone System Part 7

I. Initialize project with Maven Archetype

This tutorial guides based on the Windows OS. Suppose your environment is different and able to refer and consider it as the document for setup. We also talk about a little bit difference between Maven and Maven Architype. 

• Maven or stands by Maven Project that a build automation tool used primarily for Java projects and can download it here. Based on a project object model (POM) concept, Maven tools help perform some execution command as build, clean, deploy, verify, ...That means that Maven built the project can call those projects with another name "Maven Project."

• Maven Archetype is a template or pattern available built for initializing Java project. Obviously, to build an AEM project, we must use the AEM project archetype with a custom namespace, title project, and all of the stuff attributes and accelerate our project. You can follow updated latest versions and predecessor versions of Maven Archetype here and give the best option to be suitable.

Perform some steps to examine the Maven version and verify the folder repository in your local environment. Ensure that you don't miss any folder configurations of Maven in folder ./m2. All establishing contains a repository folder if you don't find the folder named "adobe-public" or "repository" and can re-check install Maven in your local.

• Open up a command-line terminal. Verify that Maven is installed:

C:\Users\Lorence>mvn --version
Apache Maven 3.6.2 (40f52333136460af0dc0d7232c0dc0bcf0d9e117; 2019-08-27T22:06:16+07:00)
Maven home: C:\maven\bin\..
Java version: 1.8.0_281, vendor: Oracle Corporation, runtime: C:\Program Files\Java\jdk1.8.0_281\jre
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"

• Verify that the repository profile is active by running the following command:

C:\Users\Lorence>mvn help:effective-settings
[INFO] Scanning for projects...
...
...
http://maven.apache.org/xsd/settings-1.1.0.xsd">
 <localRepository>C:\Users\Lorence\.m2\repository</localRepository>
 <pluginGroups>
  <pluginGroup>org.apache.maven.plugins</pluginGroup>
  <pluginGroup>org.codehaus.mojo</pluginGroup>
 </pluginGroups>
</settings>


[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 8.169 s
[INFO] Finished at: 2021-03-18T09:47:55+07:00
[INFO] ------------------------------------------------------------------------

• Copy and paste the command below into a command line (CMD or Terminal) to execute generating the AEM project.

mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=26 -D appTitle="Eduzone Sites Project" -D appId="eduzone" -D groupId="com.adobe.aem.tutorial.eduzone" -D artifactId="aem-tutorial-edozone" -D version="0.0.1-SNAPSHOT" -D aemVersion="cloud"

• The show folder structure of the project Eduzone Sites Project. If you compare it with the previous article, the architecture of the project obeys AEM Project Archetype.

Note: While processing initialization project may encounter the error "Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:x.x.x:compile (default-compile)...". Please delete the folder repository inside the ./m2 folder and launch the command line by CMD under administrator permission.

II. Deploy Eduzone Sites Project

Be sure that your local instance of AEM already started with port 4502. You can perform the following command line to conduct to deploy and build the project to upload to the local instance of AEM. It will take a while to download all of the maven repositories established in the file project object model(POM file).

mvn clean install -PautoInstallSinglePackage or mvn -PautoInstallPackage -Padobe-public -DskipTests clean install

Take a cup of coffee and wait for more than 24 minutes. How much does it take time for your side? If you've never caught the text "BUILD SUCCESS," and then need to consider it again while following the steps above.

• Open the Package Manager in the local instance of AEM or tab the link http://localhost:4502/crx/packmgr/index.jsp to observe all packages for aem-tutorial-edozone.

Note: Usually, you need to filter some module that deploys to the local instance of AEM, for example, ui.apps and ui.content, and excluded some package based on its path. Open file pom.xml as scope global in Eduzone sites project and adjust module that excluded by commenting them.

    <modules>
        <module>all</module>
        <module>core</module>
        <module>ui.frontend</module>
        <module>ui.apps</module>
        <module>ui.apps.structure</module>
<!--        <module>ui.config</module>-->
<!--        <module>ui.content</module>-->
        <module>it.tests</module>
        <module>dispatcher</module>
        <module>ui.tests</module>
        <module>analyse</module>
    </modules>

Why do we comment on module ui.content? Typically, content concepts will create once-time and use file aem-tutorial-edozone.ui.content-0.0.1-SNAPSHOT.zip to upload to the local instance of AEM directly. Those of other updates will only update configurations in file ui.apps.

• Examine the OSGi bundle should be already active or inactive.

Review the step above and guess that the progress is already finished. But in reality, the OSGi bundle still appears to have some unexpected errors to make it don't complete and change the status from installed to active. To explain the case and we can expand our bundle from the link http://localhost:4502/system/console/bundles and observe. As a result, the bundle cannot be active, and also, there is a part of your system that doesn't work.

Eduzone Sites Project - Coreaem-tutorial-edozone.core
Symbolic Name	aem-tutorial-edozone.core
Version	0.0.1.SNAPSHOT
Bundle Location	jcrinstall:/apps/eduzone-packages/application/install/aem-tutorial-edozone.core-0.0.1-SNAPSHOT.jar
Last Modification	Fri Mar 19 09:27:06 ICT 2021
Description	Core bundle for Eduzone Sites Project
Start Level	20
Exported Packages	com.adobe.aem.tutorial.eduzone.core.filters,version=1.0
com.adobe.aem.tutorial.eduzone.core.listeners,version=1.0
com.adobe.aem.tutorial.eduzone.core.models,version=1.0
com.adobe.aem.tutorial.eduzone.core.schedulers,version=1.0
com.adobe.aem.tutorial.eduzone.core.servlets,version=1.0
Imported Packages	com.adobe.aem.tutorial.eduzone.core.filters,version=[1.0,2) from aem-tutorial-edozone.core (556)
com.adobe.aem.tutorial.eduzone.core.listeners,version=[1.0,2) from aem-tutorial-edozone.core (556)
com.adobe.aem.tutorial.eduzone.core.schedulers,version=[1.0,2) from aem-tutorial-edozone.core (556)
com.adobe.aem.tutorial.eduzone.core.servlets,version=[1.0,2) from aem-tutorial-edozone.core (556)
com.day.cq.wcm.api,version=[1.29,2) -- Cannot be resolved
javax.annotation,version=0.0.0 from org.apache.felix.framework (0)
javax.servlet,version=[3.1,4) from org.apache.felix.http.servlet-api (43)
org.apache.sling.api,version=[2.3,3) from org.apache.sling.api (68)
org.apache.sling.api.request,version=[2.4,3) from org.apache.sling.api (68)
org.apache.sling.api.resource,version=[2.12,3) -- Cannot be resolved
org.apache.sling.api.servlets,version=[2.3,3) -- Cannot be resolved
org.apache.sling.models.annotations,version=[1.5,2) from org.apache.sling.models.api (515)
org.apache.sling.models.annotations.injectorspecific,version=[1.1,2) from org.apache.sling.models.api (515)
org.apache.sling.settings,version=[1.3,2) from org.apache.sling.settings (17)
org.osgi.service.event,version=[1.4,2) -- Cannot be resolved

SOLVE: You need to update tag <build> in file pom.xml (aem-tutorial-edozone.core). Specifically, update dependency org.apache.sling with artifactId: org.apache.sling.caconfig.bnd-plugin. That allows scan all configurations established in AEM need to be suitable in our project.

<build>
        <plugins>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>sling-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>biz.aQute.bnd</groupId>
                <artifactId>bnd-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>bnd-process</id>
                        <goals>
                            <goal>bnd-process</goal>
                        </goals>
                        <configuration>
                            <bnd><![CDATA[
Import-Package: javax.annotation;version=0.0.0,*-exportcontents: ${packages;VERSIONED}
Sling-Model-Packages: com.adobe.aem.tutorial.eduzone.core.models
-snapshot: ${tstamp;yyyyMMddHHmmssSSS}
Bundle-DocURL:
-plugin org.apache.sling.caconfig.bndplugin.ConfigurationClassScannerPlugin
                                ]]></bnd>
                        </configuration>
                    </execution>
                </executions>
                <dependencies>
                    <dependency>
                        <groupId>org.apache.sling</groupId>
                        <artifactId>org.apache.sling.caconfig.bnd-plugin</artifactId>
                        <version>1.0.2</version>
                    </dependency>
                </dependencies>
            </plugin>
            <plugin>
                <groupId>biz.aQute.bnd</groupId>
                <artifactId>bnd-baseline-maven-plugin</artifactId>
                <configuration>
                    <failOnMissing>false</failOnMissing>
                </configuration>
                <executions>
                    <execution>
                        <id>baseline</id>
                        <goals>
                            <goal>baseline</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <configuration>
                    <archive>
                        <manifestFile>${project.build.outputDirectory}/META-INF/MANIFEST.MF</manifestFile>
                    </archive>
                </configuration>
            </plugin>
        </plugins>
    </build>

And following the statement "mvn clean install -PautoInstallSinglePackage" to execute re-build OSGi bundle again to the local instance of AEM. In some cases, we need to restart the server to ensure all bundles run properly. You can tab the link to perform this action.

• Open the link to observe all packages created from deploying and build the project. It shows all files understand extension .jar or .zip. In some cases, you can delete them and perform action re-build again.

• Please open the link to show off all sites contained by AEM hosting after the deployment stage: Almost all projects create and contain here; one of them was our project Aduzone Sites Project. The GUI visualizes the structure website based on the contents in the folder with a path: content/eduzone.

If we do some queries by SQL2 based on the path above, we can list all contents and count the number of listed sites if we want to filter the only object as format Page and add extra condition AND [jcr:primaryType] = "cq:Page" in the query statement.

That reason already leads us to observe two pages us and en as picture above. Between two pages has a hierarchical decentralization and page en as consider children of page us. To open page en(English) by selecting the page and clicking the Edit button in the menu bar:

• Adobe Experience Manager (AEM) Sites Component: The concept is quite large to research and break out into small many portions for implementation. Somehow, when clicking the Edit button and we open the Editor that supports customization powerfully with the Front-End page.

Three huge customizations are designed in three tabs: Assets, Components, and Content Tree. When tab components and show empty. That means we will perform creating components for the next article to import and use on this site.

III. Analyze The Project Layout

In general, An AEM project is generated by individual Maven modules; then, each module corresponds with a specific folder as below. As a result, the file pom.xml existed in an individual module with a particular configuration. They are not the same for all, such as core, content, apps, ...

• core: Java Code, primarily establishes configuration in http://localhost:4502/system/console/configMgr and using Apache Sling servlet to access service of Back-End.
• ui.frontend: Usually, It contains source code for CSS, JavaScript, Sass, TypeScript. To summarize, some duties belong to the Front-End developer. There is a special point in folder ui.frontend. We can run independently with the statement "npm run dev" to launch a static site in the browser.
• ui.apps: Contains components or dialog that is self-definition embed file CSS or JS put in the client library folder.
• ui.content: contains structural content and configurations like editable templates, metadata schemas.
• all: An empty Maven module that combines the above modules to a single package deployed to an AEM environment.

Observe the picture below and see the general AEM Project Archetype. We can have more conditions to thoroughly analyze each part of AEM Archetype as Cloud, Core Components, Responsive Layout, Style System, etc...

IV. Conclusions

The article mainly presented how to initialize the AEM project along with the front-end structure. Target aims to help someone generate a new AEM project using a Maven archetype, understand the different modules (core, all, frontend, content, ...). If you encounter any problem while referring to my post, please leave a comment below to support you.