Review the required tooling and instructions for setting up a local development environment.
To accelerate the tutorial, we will start with a predefined project. Download the
ZIP file from Github, and unzip on your local development machine.
You can also clone the Git Repository and start the tutorial from there:
$ git clone firstname.lastname@example.org:Adobe-Marketing-Cloud/aem-guides-wknd-events.git $ cd aem-guides-wknd-events $ git checkout angular/start
When starting a new SPA Editor enabled project it is recommended to use the Maven Archetype for SPA Starter Kit.
The Maven AEM Project Archetype was used to create the base project structure. When creating new AEM projects, the latest archetype should always be used.
The following properties were used when generating the AEM project from the AEM Archetype:
|componentGroupName||WKND Events - Content|
Inspecting the Project
There are five areas to the project:
- Parent POM - deploys maven modules and manages dependency versions
- core - Java bundle containing all core functionality like OSGi services, listeners or schedulers, as well as component-related Java code such as servlets or request filters.
- ui.content - contains structural content and configurations (/content, /conf)
- angular-app - a webpack project for the Angular application. Later in the chapter the webpack project will be turned into a Maven module to be deployed to AEM as a client library.
More details about the inner workings of the project can be found in Getting Started with AEM Sites Part 1 - Project Setup.
Build and deploy the project to a local AEM instance
From the command line, within the aem-guides-wknd-events directory run the following:
$ mvn -PautoInstallPackage clean install
The above command will deploy the project to AEM running on http://localhost:4502.
If you recieve an error during the build, ensure your maven settings.xml file includes Adobe's nexus repository.
View Package Manager to verify the deployment
Navigating to http://localhost:4502/crx/packmgr/index.jsp you should see that 5 packages were installed. The ui.apps and ui.content package for the WKND events project and 3 packages for AEM Core Components.
The ui.content module includes two templates as part of the starter project. Inspect the templates by navigating to http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd-events
You should see templates for WKND Event Angular App and WKND Event Page:
The SPA Editor is designed to work with Editable templates. This gives the implementation the full power of re-usable policies and other features. With the initial release of the SPA Editor, the UI for Editable Templates cannot be used. This is expected to be updated in the next release of the SPA Editor.
In order to update features of the template, developers will need to do this manually via CRXDE Lite or in the XML in the ui.content project.
For example, the allowed components on the layout container are defined here:
There are two templates used in defining the Page structure in AEM.
- WKND Event Angular App Template
- WKND Event Page Template
These template types serve different roles and are used differently in the page structure's buildout.
This template is used to represent the root of the Angular application and will define components in the Angular app that persist across views, such as the header. In
This template also includes Page Policy level configurations that help identify this resource as the SPA Editor application's root resource, as well as holds configuration elements that define how the site's content is serialized to JSON. This will be explored later in this tutorial when the HierarchyPage implementation is reviewed.
There is a single WKND Event Angular App page at the root of the SPA Editor site.
The WKND Event Page represents a normal content page that exists underneath the WKND Event Angular App page.
There are typically many of these content pages compromising a SPA Editor site.
The following is the basic page structure, with the Angular app root being at /content/angular and the first content page of the SPA Editor existing under the Angular app root page at /content/angular/home.
Next part in the tutorial: