Unable to select Edit mode in SPA page

[patrickrosales]

Expected Behaviour

When opening the SPA page within the Editor I should be able to open Edit mode for the SPA page. Able to see the Side Panel and Page Information on the top left.

Screenshot of working We Retail example page

Actual Behaviour

When opening the SPA page (http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html) I am not able to open Edit mode. Also, not able to see Side Panel or Page Information on the top left.

Screenshot of issue with SPA page

Reproduce Scenario (including but not limited to)

See Steps to Reproduce

Steps to Reproduce

1. Using the AEM Jar file + properties above, run the command java -jar aem-author-p4502.jar to install AEM locally
2. Confirm local install by logging in and navigating to http://localhost:4502/aem/start.html
3. Clone the git repo - adobe/aem-guides-wknd-spa
4. Checkout the branch React/create-project-solution
5. Deploy to AEM - mvn clean install -PautoInstallSinglePackage
6. Confirm SPA is deployed to AEM. You should see a new wknd-spa-react site at http://localhost:4502/sites.html/content/wknd-spa-react/us
7. Open http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

Platform and Version

Java

java version "11.0.9" 2020-10-20 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.9+7-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.9+7-LTS, mixed mode)

Maven

Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: /usr/local/Cellar/maven/3.6.3_1/libexec
Java version: 11.0.9, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.9.jdk/Contents/Home
Default locale: en_CA, platform encoding: UTF-8
OS name: "mac os x", version: "10.16", arch: "x86_64", family: "mac"

AEM Jar
Tried step 1 in Steps to Reproduce with the following AEM Jar file versions

AEM 6.5
2021.1.4738.20210107T143101Z-201217
2020.12.4676.20201216T130744Z-201201

aem-guides-wknd-spa branch

React/create-project-solution

Sample Code that illustrates the problem

No new code was added or existing code modified.

Logs taken while reproducing problem

Console output when executing mvn clean install -PautoInstallSinglePackage from step 6 in Steps to Reproduce
aem-deploy.log

[godanny86]

hey @patrickrosales which version of AEM are you using?

For AEM 6.5 you will need to add the -Pclassic profile to the build: https://github.com/adobe/aem-guides-wknd-spa/tree/React/create-project-solution#building-for-aem-6xx

I'll double check to see if you need any service packs installed

[patrickrosales]

hi @godanny86 - appreciate the quick response! I'm using version AEM 6.5 (screenshot below).

That's good to know re: adding -Pclassic. I tried deploying with that profile and I do get the same error previously where Edit mode is not selectable and there is not Side Panel or Page Information

AEM Version

[godanny86]

Ah, i think at a minimum you need 6.5.4. Service Pack 8 is available here: https://experience.adobe.com/#/downloads/content/software-distribution/en/aem.html?package=/content/software-distribution/en/details.html/content/dam/aem/public/adobe/packages/cq650/servicepack/aem-service-pkg-6.5.8.zip. I'll update the README as well to note this.

More details and tutorial can be found here: https://experienceleague.adobe.com/docs/experience-manager-learn/spa-react-tutorial/overview.html?lang=en#local-dev-environment

[patrickrosales]

Thank you @godanny86

I'm getting a 404 Page Not Found for that link above - wondering if you are able to see it correctly or see the same

Is there a general page for all the AEM jar releases? I know these two links below but they don't seem to contain AEM 6.x jar files

https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html
https://experience.adobe.com/#/downloads/content/software-distribution/en/aemcloud.html

Thanks for your help on this!

[godanny86]

ah sorry. So you would get a 404 for: https://experience.adobe.com/#/downloads/content/software-distribution/en/aem.html ? I think that must mean you don't have access to 6.5 Service Packs, fixes. You can file a ticket with support:

You can also do the tutorial using AEM as a Cloud Service SDK: https://experience.adobe.com/#/downloads/content/software-distribution/en/aemcloud.html?package=/content/software-distribution/en/details.html/content/dam/aemcloud/public/aem-sdk-2021.3.5063.20210316T050737Z-210225.zip, if you download that zip it will have the quickstart-jar for AEM as a Cloud Service (no service packs needed)

[patrickrosales]

Hi @godanny86 - I was able to install 6.5 with Service Pack 8 and then deploy the branch React/create-project-solution successfully. The editor can access Edit Mode and the side panel shows also.

I also then retried the Steps to Reproduce in my first post for the AEM 6.5 version. First, I deleted my aem-guides-wknd-spa repository. Next, followed all the steps and navigated to the editor. Now, the Side Panel appeared correctly and I was able to enter Edit Mode for AEM 6.5.

I'm wondering if anything is being cached in the build for aem-guides-wknd-spa that would be the cause for the original issue.

[patrickrosales]

I've now tried deploying React/latest on a clean install of AEM 6.5 base jar files. I'm getting the following render of the Components in the side panel: