Adobe Experience Manager (AEM) Maven Project Archetype 24

Maven AEM Project Archetype 24 was released a few weeks ago for creating an AEM website project that utilize the latest Adobe Experience Manager standards and technologies. Requires AEM 6.5.5.0+, 6.4.8.1+ or AEM as a Cloud Service, Java 8 or 11 and Maven 3.3.9+.

Maven Settings

Add the following to the <activeProfiles> section of your Maven settings. Maven settings are typically located in a hidden .m2 folder in you home directory. For example, ~/.m2/settings.xml

<activeProfiles>
  <activeProfile>adobe-public</activeProfile>
</activeProfiles>

If you don’t have a settings.xml file in that location, copy the settings.xml from maven’s home conf folder into your .m2 folder. Find Maven home with mvn -v.

Project Generation

In a terminal, create a directory for the source code. e.g.,

cd repo_base_foldername

mkdir src

If there is already a project folder for a previous project created from Archetype with the same appId as the new project, for example myproject, it will need to be renamed or removed before the new archetype project can be generated.

In the source code directory src, use the mvn command to init the project with the desired archetype version.

This is an example for batch mode project generation:

cd src

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=24 \
 -D aemVersion=6.5.0 \
 -D appTitle="My Project" \
 -D appId="myproject" \
 -D groupId="com.myproject"

The archetypeGroupId has been changed to com.adobe.aem. Starting with version 24, the archetype is deployed directly to Maven Central to align with public Adobe AEM artifacts.

This is an example for generating a multilingual project in batch mode that uses language-masters:

cd src

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=24 \
 -D aemVersion=6.5.0 \
 -D appTitle="My Project" \
 -D appId="myproject" \
 -D groupId="com.myproject" \
 -D language=en \
 -D country=us \
 -D singleCountry=n

Available Properties

Name Default Description
appTitle For website title and component groups
appId For app, conf and content folder names; clientlib names
artifactId ${appId} Base Maven artifact ID
groupId Base Maven group ID
package ${groupId} Java Source Package
version 1.0-SNAPSHOT Project version
aemVersion 6.5.0 Target AEM version (can be cloud for AEM as a Cloud Service; or 6.5.0, 6.4.4, or 6.3.3 for Adobe Managed Services or on-premise)
sdkVersion latest When aemVersion=cloud an SDK version can be specified
includeDispatcherConfig y Includes a dispatcher configuration either for cloud or for AMS/on-premise, depending of the value of aemVersion (y/n)
frontendModule general Includes a webpack frontend build module that generates the clientlibs (general or none; angular or react for SPA)
language en Language code to create the content structure
country us Country code to create the content structure
singleCountry y Includes a language-master content structure (y/n)
includeExamples n Includes a Component Library example site (y/n)
includeErrorHandler n Includes a custom 404 response page that will be global to the entire instance (y/n)
includeCommerce n Includes CIF Core Components dependencies and generates corresponding artifacts.
commerceEndpoint Required for CIF only. Optional endpoint of the commerce system GraphQL service to be used (e.g. https://hostname.com/grapql)
datalayer n Activate integration with Adobe Client Data Layer
amp n Enable AMP support for generated project templates

Install Maven Archetype

How do I build and install the Maven archetype project to my localhost AEM instance?

In your terminal, navigate to the project directory where the root level pom.xml is located and run mvn -PautoInstallPackage clean install

Options

Specify a different hostname

-Daem.host=dev.myhost.com

Specify a different port

-Daem.port=4503

Specify credentials

-Dvault.username=admin -Dvault.password='secret'

Skip Tests

-DskipTests

Example using all of these options

mvn -PautoInstallSinglePackage -Daem.host=dev.myhost.com -Daem.port=4503 -Dvault.username=admin -Dvault.password='secret' -DskipTests clean install

UI Tweaks

How to enable CSS Grid support for Autoprefixer in the AEM Webpack build. For example, in the ui.frontend module webpack.common.js config, make the changes in these two places:

  1. Near the top of the file where the node modules are required, add autoprefixer, e.g., const autoprefixer = require('autoprefixer');
  2. Update configuration rules where we load local PostCSS plugins using the postcss-loader by changing require('autoprefixer') to autoprefixer({ grid: true }) in the plugins() function.
webpack.common.js
'use strict';

const path                    = require('path');
const webpack                 = require('webpack');
const autoprefixer            = require('autoprefixer');
const MiniCssExtractPlugin    = require('mini-css-extract-plugin');
const TSConfigPathsPlugin     = require('tsconfig-paths-webpack-plugin');
const CopyWebpackPlugin       = require('copy-webpack-plugin');
const { CleanWebpackPlugin }  = require('clean-webpack-plugin');

const SOURCE_ROOT = __dirname + '/src/main/webpack';

module.exports = {
  resolve: {...},
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          ...
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return [
                  autoprefixer({ grid: true })
                ];
              }
            }
          },
          ...
        ]
      }
    ]
  }
};

Note that the ellipsis ... in the code snippet above is not a part of the actual code and is there only to denote code that is being skipped and not applicable to the example.


Part 4 of 4 in the AEM Maven Project series.

Part 1 | Adobe Experience Manager (AEM) Maven Project Archetype 23

comments powered by Disqus