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

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