This archetype creates a minimal Adobe Experience Manager project as a starting point for your own SPA projects. The properties that must be provided when using this archetype allow to name as desired all parts of this project.
See the Getting Started with the AEM SPA Editor - WKND Events Tutorial on the Adobe Help Center website for an example of how to use it.
- Java 1.8 or higher
- Maven 3.5.0 or higher
- Include the Adobe Public Maven Repository in your maven settings
It is recommended to set up the local AEM instances with nosamplecontent
run mode.
Modules of the generated project is defined in src/main/resources/archetype-resources:
- core: OSGi bundle containing:
- Java classes (e.g. Sling Models, Servlets, business logic)
- ui.apps/src/main/content/jcr_root/apps:
- AEM components with their scripts and dialog definitions
- ui.content/src/main/content/jcr_root/conf:
- AEM content package with editable templates stored at
/conf
- AEM content package with editable templates stored at
- ui.content/src/main/content/jcr_root/content:
- AEM content package containing sample content (for development and test purposes)
- angular-app: Angular application in case frontend chosen is set to be "angular" at project generation
- react-app: React application in case frontend chosen is set to be "react" at project generation
- all: Combines all modules to be installed as content package in AEM
This archetype requires following parameters:
groupId
- Maven artifact groupId for all projectsartifactId
(default is${groupId}.${projectName}
) - Maven artifact "root" artifactId, is suffixed for the individual modulesversion
(default is1.0.0-SNAPSHOT
) - Maven artifact versionpackage
(default is${groupId}.${projectName}
) - Java class package nameprojectName
(default ismysamplespa
) - Used for building AEM apps path, content path, conf etc. Should not include spaces or special character.projectTitle
(default isMy Sample SPA
) - Descriptive project namecomponentGroup
(default is${projectTitle}
) - Name of the component group in AEM EditoroptionFrontend
(default isreact
) - Type of frontent project, allowed options: either angular or react
$ mvn clean install archetype:update-local-catalog
$ mvn archetype:crawl
Depending on the use case maven can use different archetype variant (use -DarchetypeCatalog
to choose one):
internal
represents~/.m2/repository/
local
represents~/.m2/archetype-catalog.xml
remote
represents http://repo.maven.apache.org/maven2/archetype-catalog.xml
Archetype aem-spa-project-archetype
must be available locally (by cloning this repo and building it) or on artifactory.
You must be in a directory without a pom.xml
file. A sub-folder will be created for the newly created project.
Starter Kit project can be created using following options:
- in command line in interactive mode
- in command line in batch mode
In interactive mode a series of questions will be asked set parameters for new project.
$ mvn archetype:generate \
-DarchetypeCatalog=internal \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=1.0.3-SNAPSHOT \
Please note that properties declared in archetype-metadata.xml with defaultValue
are not asked during interactive mode and are defaulted to suggested values.
In batch mode all the required parameters muse be set via -Dparameter=value
argument.
$ mvn archetype:generate -B \
-DarchetypeCatalog=local \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=1.0.3-SNAPSHOT \
-Dpackage=<package> \
-DgroupId=<group-id> \
-DartifactId=<artifact-id> \
-Dversion=<version> \
-DprojectTitle="<project-title>" \
-DprojectName=<project-name> \
-DcomponentGroup=<component-group> \
-DoptionFrontend=react
Developing single page applications on AEM assumes that the front-end developer observes standard best practices when creating an SPA. If as a front end developer you follow these general best practices as well as few AEM-specific principles, your SPA will be functional with AEM and its content-authoring capabilities.
- Portability - As with any components, the components should be built to be as portable as possible. The SPA should be built with portably and reusable components, avoiding static paths that refer to the content structure.
- AEM Drives Site Structure - The front end-developer creates components and owns their internal structure, but relies on AEM to define the content structure of the site.
- Dynamic Rendering - All rendering should be dynamic.
- Dynamic Routing - The SPA is responsible for the routing and AEM listens to it and fetches the component data based on it. Any routing should be dynamic as well.
If you keep these principles in mind as you develop your SPA, it will be as flexible and as future proof as possible while enabling all supported AEM authoring functionality.
For further details about SPA development on AEM including guideliens, walkthroughs, best practices and examples, see the AEM Developer Documentation.