SPA Editor Project create-project
Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor.
Objective
- Understand the structure of a new AEM SPA Editor project built from a Maven archetype.
- Deploy the starter project to a local instance of AEM.
What you will build
In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters.
A classic Hello World message.
Prerequisites
Review the required tooling and instructions for setting up a local development environment. Ensure that a fresh instance of Adobe Experience Manager, started in author mode, is running locally.
Get the project
There are several options to create a Maven Multi-module project for AEM. This tutorial used the latest AEM Project Archetype as a basis for the tutorial code. Modifications have been made to the project code in order to support multiple versions of AEM. Please review the note about backward compatibility.
aemVersion
property of the archetype.-
Download the starting point for this tutorial via Git:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout Angular/create-project-start
-
The following folder and file structure represents the AEM Project that was generated by the Maven archetype on the local file system:
code language-plain |--- aem-guides-wknd-spa |--- all/ |--- core/ |--- dispatcher/ |--- ui.apps/ |--- ui.apps.structure/ |--- ui.content/ |--- ui.frontend / |--- it.tests/ |--- pom.xml |--- README.md |--- .gitignore |--- archetype.properties
-
The following properties were used when generating the AEM project from the AEM Project archetype:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 Property Value aemVersion cloud appTitle WKND SPA Angular appId wknd-spa-angular groupId com.adobe.aem.guides frontendModule angular package com.adobe.aem.guides.wknd.spa.angular includeExamples n note note NOTE Notice the frontendModule=angular
property. This tells the AEM Project Archetype to bootstrap the project with a starter Angular code base to be used with the AEM SPA Editor.
Build the project
Next, compile, build, and deploy the project code to a local instance of AEM using Maven.
-
Ensure an instance of AEM is running locally on port 4502.
-
From the command line terminal verify that Maven is installed:
code language-shell $ mvn --version Apache Maven 3.6.2 Maven home: /Library/apache-maven-3.6.2 Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
-
Run the below Maven command from the
aem-guides-wknd-spa
directory to build and deploy the project to AEM:code language-shell $ mvn -PautoInstallSinglePackage clean install
If using AEM 6.x:
code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
The multiple modules of the project should be compiled and deployed to AEM.
code language-plain [INFO] ------------------------------------------------------------------------ [INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT: [INFO] [INFO] wknd-spa-angular ................................... SUCCESS [ 0.473 s] [INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s] [INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min] [INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [ 0.694 s] [INFO] WKND SPA Angular - UI apps ......................... SUCCESS [ 6.351 s] [INFO] WKND SPA Angular - UI content ...................... SUCCESS [ 2.885 s] [INFO] WKND SPA Angular - All ............................. SUCCESS [ 1.736 s] [INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [ 2.563 s] [INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [ 1.846 s] [INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [ 0.270 s] [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------
The Maven profile autoInstallSinglePackage compiles the individual modules of the project and deploys a single package to the AEM instance. By default this package is deployed to an AEM instance running locally on port 4502 and with the credentials of admin:admin.
-
Navigate to Package Manager on your local AEM instance: http://localhost:4502/crx/packmgr/index.jsp.
-
You should see three packages for
wknd-spa-angular.all
,wknd-spa-angular.ui.apps
andwknd-spa-angular.ui.content
.All of the custom code needed for the project is bundled into these packages and installed on the AEM runtime.
-
You should also see several packages for
spa.project.core
andcore.wcm.components
. These are dependencies automatically included by the archetype. More information about AEM Core Components can be found here.
Author Content
Next, open the starter SPA that was generated by the archetype and update some of the content.
-
Navigate to the Sites console: http://localhost:4502/sites.html/content.
The WKND SPA includes a basic site structure with a country, language and home page. This hierarchy is based on the archetype’s default values for
language_country
andisSingleCountryWebsite
. These values can be overwritten by updating the available properties when generating a project. -
Open the us > en > WKND SPA Angular Home Page page by selecting the page and clicking the Edit button in the menu bar:
-
A Text component has already been added to the page. You can edit this component like any other component in AEM.
-
Add an additional Text component to the page.
Notice that the authoring experience is similar to that of a traditional AEM Sites page. Currently a limited number of components are available to be used. More is added over the course of the tutorial.
Inspect the Single Page Application
Next, verify that this is a Single Page Application with the use of your browser’s developer tools.
-
In the Page Editor, click the Page Information menu > View as Published:
This will open a new tab with the query parameter
?wcmmode=disabled
which effectively turns off the AEM editor: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled -
View the page’s source and notice that the text content Hello World or any of the other content is not found. Instead you should see HTML like the following:
code language-html ... <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="spa-root"></div> <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script> ... </body> ...
clientlib-angular.min.js
is the Angular SPA that is loaded on to the page and responsible for rendering the content.Where does the content come from?
-
Return to the tab: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
-
Open the browser’s developer tools and inspect the network traffic of the page during a refresh. View the XHR requests:
There should be a request to http://localhost:4502/content/wknd-spa-angular/us/en.model.json. This contains all of the content, formatted in JSON, that will drive the SPA.
-
In a new tab, open http://localhost:4502/content/wknd-spa-angular/us/en.model.json
The request
en.model.json
represents the content model that will drive the application. Inspect the JSON output and you should be able to find the snippet representing the Text component(s).code language-json ... ":items": { "text": { "text": "<p>Hello World! Updated content!</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, "text_98796435": { "text": "<p>A new text component.</p>\r\n", "richText": true, ":type": "wknd-spa-angular/components/text" }, ...
In the next chapter we will inspect how the JSON content is mapped from AEM Components to SPA Components to form the basis of the AEM SPA Editor experience.
note note NOTE It may be helpful to install a browser extension to automatically format the JSON output.
Congratulations! congratulations
Congratulations, you have just created your first AEM SPA Editor Project!
It is quite simple right now but in the next few chapters more functionality is added.
Next Steps next-steps
Integrate the SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA.