React components not available in WKND SPA React

[wesbarichak]

Hey all,

I'm trying to follow the tutorial for building the WKND SPA React project and am not able to see or edit the React components that come with the project. This fella here: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

When I view the page in the console, the Components tab does not list any components (according to the tutorial, I should see a Text and Layout component there).

When I view the page as published and inspect the page, the Hello world string is contained in a <p> tag whereas I'd expect to see a script there that pulls in the content.

And, the console displays the following warnings:

So, the page is looking for those minified js and css files and they aren't there. Is this likely the cause of the behaviors I'm seeing? I've tried invalidating the clients and clearing the browser cache but no luck.

I'm guessing there's an issue in my maven build that is causing those files not to get copied where they need to be, but I'm not really sure where to look. I'm very new to both Maven and AEM, so any tips would be greatly appreciated!

AEM: 6.5.12

JDK 11.0.5

Maven 3.8.5

Node.js (locally installed for this project): 14.16.1

Node.js (globally installed for another project): 16.14

[SantoshSai]

Hi @wesbarichak 

May I know what is the maven archetype you are using to build project? Appreciate if you paste command here.

Regards,
Santosh

[wesbarichak]

@SantoshSai 

mvn -B archetype:generate \

 -D archetypeGroupId=com.adobe.aem \

 -D archetypeArtifactId=aem-project-archetype \

 -D archetypeVersion=36 \

 -D appTitle="WKND SPA React" \

 -D appId="wknd-spa-react" \

 -D artifactId="aem-guides-wknd-spa.react" \

 -D groupId="com.adobe.aem.guides.wkndspa.react" \

 -D frontendModule="react" \

 -D aemVersion="6.5.12"

[SantoshSai]

@wesbarichak 

I believe it requires, core components - do you have installed them? https://github.com/adobe/aem-core-wcm-components
If you check here for /apps/wknd-spa-react/components/text component inherits to core components.

[wesbarichak]

@SantoshSai I didn't install them manually or anything, but I assume they came with the maven archetype I built. I can see it in the package manager.

[SantoshSai]

I had similar issues, upgrading to core components 2.19.2 and restart instance worked! 

[wesbarichak]

@SantoshSai hmm, I upgraded to 2.19.2, but that didn't seem to do it for me.

[SantoshSai]

Hi @wesbarichak 

Followed below steps,
1.  Build project 

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=36 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="6.5.12"

2. Switch to ui.frontend and run 

npm install

3. Switch back to main project and run below command

mvn clean install -PautoInstallPackage -Pclassic

[wesbarichak]

Sorry for the late reply! Got sidetracked with vacation and another project. Still no luck. I do get an interesting warning after building though. 

[sunil_kumar_]

Hi @wesbarichak ,
Try to get existing wknd react spa code from get and build at your local. It works. You can use this for your learning. 
Build as per you AEM, If using AEM 6.5.x use additional parameter while build as mantion
mvn clean install -PautoInstallSinglePackage -Pclassic

https://github.com/adobe/aem-guides-wknd-spa/tree/React/latest

Check this as well, If it helps.

https://youtu.be/cWEfSNrgvRE

[SantoshSai]

Though I agree cloning project works but need to identify what's the problem in building project in batch mode when system specs are at its place.