The AEM Project contain all of the code and configurations for an implementation. The AEM Project Archetype creates a minimal, best-practices-based Adobe Experience Manager project as a starting point for your own AEM projects.
Hello in this video, we will be looking at how to use the AEM Project Archetype to generate an AEM project.
Now we also have a ui.content module and this gets its name because it’s loosely mapped to the content and configurations in AEM. Now the intention of the ui.content module is to contain all the structural content that our application is going to rely on. So this can be things like high-level page structure, DAM folder structures. It’ll also contain things like some initial template definitions and other pieces of mutable content.
Now there’s some additional modules that get generated by the Archetype. One is a dispatcher module that contains all of the dispatcher configurations for the project, as well as some integrated testing modules. Lastly, there is the all module. Now the all module, as the name implies, contains all of the code that needs to be packaged and deployed to AEM. During the Maven build process, the ui.apps and ui.content modules generate packages that are embedded in the all module. And finally, the last step of the Maven build is to generate an all package, which is finally deployed to AEM. Now, everything in the AEM project is going to be managed in source control. And the only thing that is going to be deployed to AEM is that all package. So this is a bit complex but that’s why we’ve got the AEM Project Archetype to help us generate this structure for us automatically.
So let’s look at this in action.
The AEM Project Archetype is opensource and it can be found on GitHub. Like other projects at Adobe, the Archetype is continuously updated. So whenever starting a new project, you should look to use the latest version. The GitHub README has some high-level information about the Archetype and it’s got some useful links to much more detailed documentation, as well as several tutorials, which you can follow along with, and go through all the steps of implementing your own AEM sites project. Now if we scroll down, you can see the different parameters that the Archetype uses to generate a project. So if you’re starting out your own project, it’s a good idea to become familiar with these and understand the effects and how it can impact the generated project.
All right, so let’s go ahead and generate a sample project using the Archetype. And if we scroll down the README, we can see some basic commands. And we’re just going to generate this project using command line terminal. Now, as a best practice, you want to have a dedicated directory to hold all of your source code. So I’ve got this folder for all my code.
And we want to make sure that you have a Java installed. You can’t generate the project without it. You also of course need Apache Maven installed. And now the AEM project itself relies on npm and Node.js, so you’ll want those two tools to be installed as well.
All right, so we’re just going to copy this command here to generate our project. And again if you’re doing this on your own, you’d want to change the app title, app ID, group ID to match the different parameters based on your application and organization.
So I’m just going to paste this command into my terminal. And that’s going to start the generation of our AEM project.
And once that’s finished, we can see that we’ve got a new folder called mysite. That’s our generated project. And if we navigate into that folder, you can see the different Maven modules. Let’s take a closer look at those using the Finder. And so here you can see all of the Maven modules we discussed earlier. We’ve got the all module, which is going to contain all our code, core, dispatcher, integrated testing, as well as ui.apps, ui.content and ui.frontend.
All right, so the next thing we want to do is let’s go ahead and actually build our project. And to do that we’ll use the command mvn clean install and the profile we’re going to use is autoInstallSinglePackage. And this profile will build and deploy our code base to a local instance of AEM.
So what we’re seeing now is Maven compiling all of our different Maven modules, core, ui.apps, ui.frontend. And eventually we should see a message like this, which indicates that we’ve built and compiled everything and that our build was successful. Now for the sake of the video, I’ve sped up the Maven build process but in general it takes about a minute or so. Before we log into AEM, let’s check out the build artifacts that Maven generated. So under core, you can see we’ve got our JAR file, this is the OSGi bundle for all the Java code as part of the project. Under ui.apps, we’ve got our ui.apps package, that ZIP. And you can also see under ui.content, we’ve got the ui.content ZIP. And of course beneath our all module, we can see the all package, which is packaging up all of the sub-modules, and that’s going to be installed on AEM. So now let’s quickly switch over to my local instance of AEM. We’ll just go ahead and log in and let’s see the result of that deployment. If we go to Tools, Deployments, Packages, this is going to open up AEM Package Manager. And here we can see our mysite.all package, which included our ui.apps package, as well as our ui.content package.
So those have been successfully uploaded and installed. All right, so let’s go ahead and see what sample content was bundled as part of the project. We can navigate into AEM sites. We can see a new site called mysite. And we can go ahead and open up the homepage.
And if we switch into Edit mode, we can see that we’ve got a pretty basic site, some basic styles. But, yeah, we’ve got a title component, several teaser components, and all of these are part of AEM core components which have been bundled in as part of our AEM project. And while not everything is really styled, everything is fully functional. So we can update and author content, add images to these teasers. So it’s a great starting point.
Now, the AEM Project Archetype also includes a sample editable template. And this allows us to create new pages. So we can create a new page based on this content page template. And for the title we’ll just call it First Page. And then we can go ahead and open it.
And again nothing too exciting but we do have a title component, as well as a main layout container. And here we can insert new components. We can use the core text component. And everything is fully functional. So we can add, you know, a little Hello World message here and see it populate on our page.
And if we want to check out the editable template that this page is based on, from the Page Properties menu we can click Edit Template. And so here we’ve got our editable template which was generated by the Project Archetype. Again, it’s pretty simple. We’ve got a layout container, a footer, header and title but at least everything is all wired up and it’s all configured to work together.
So that’s it for this short video on the AEM Project Archetype. Thanks for watching. -