Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

React Text Component is not adding in aem-guides-wknd-events example.

Avatar

Level 1

Hi Team,

I have installed AEM 6.4 (with Service pack 2) on local machine successful. My plan is to create AEM SPA project in local environment. So i have refereed below adobe site link to create AEM SPA project

Getting Started with React and AEM SPA Editor

---------------------------------------------------------------

https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/...

Below is the listing of chapters in the tutorial:

Successfully completed Chapter 0 - project Setup steps and finally build deployed project into my local AEM instance. As per the Chapter 1

steps i have created React "Text " in  wknd project and build and deployed successfully into my local AEM instance. But "Text" component is not visible on my local environment.

Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 1

So I have tried multiple times but same result, So could you please assist how do i add React component in Wknd project.

Thanks,

Athiraj.

8 Replies

Avatar

Employee

Interesting, in the tutorial docs before they were publicly available there was a section that talks about AEMFED (AEM FrontEnd Developer) which is an application that automatically pushes your compiled React app into aem.

aemfed -t "http://admin:admin@localhost:4502" -w "./jcr_root"

AEMFED will be monitoring the jcr_root folder within your React App and as soon as a change is made (eg: npm run build), it will deploy the change into AEM.

I'm not seeing anything around this on the Helpx docs for the Wknd tutorial though ...

I haven't gone through the Wknd SPA tutorial specifically, but I have deployed a simple SPA to see how it works. I'll probably go through the Wknd SPA tutorial this week and if you don't get a better answer from someone else, I'll circle back here and provide me thoughts.

Avatar

Community Advisor

I am hoping you have created a component successfully. then after

As the template is an editor,  have you added a component using template policy. then only you will be able to add the component to parsys and then drag drop.

please let know if you are able to add it.

Avatar

Employee Advisor

Hi @aem_marc,

There are two WKND tutorials one for traditional AEM sites and then another set for developing with the SPA editor. The traditional sites one includes some steps to use AEMFED: Getting Started with AEM Sites Chapter 3 - Client-Side Libraries and Responsive Grid

AEMFED could also be used with the SPA Editor but I think the intention is to do most of your local SPA development using the built-in webpack server: Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 2 and just periodically deploying the compiled App to the local AEM instance (using maven or AEMFED)

Avatar

Employee Advisor

I'm assuming that you see the Text component in the AEM UI and that you can add it to the page, but when you do it disappears?

It may be a JS / client lib caching issue: Adobe Experience Manager Help | Set up a Local AEM Development Environment there are some steps to invalidate the clientlibs and then trying a fresh browser session / clear history might help...

Avatar

Level 1

I'm having the exact same issue and I do not see the text component at all in the AEM UI, it just says "No resultsPlease try with another keyword"

Avatar

Level 1

I am having the same issue. Could you please share how did you fix it.