Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Parsys is not displaying in initial content of the editable template using RemoteSPA with react with Wknd SPA initial setup

Avatar

Level 3

Hi,

I have done the basic Remote SPA with react using WKND App setup and iam getting the below issue. I didnot deploy any code specifically as well.

  • Parsys is not displaying in initial content of the editable template using RemoteSPA with react . I am using the AEM version 6.5.19 and if i go to the console i see 1 error. Please help me to get resolve this issue. 

 

kalyanchakravarthych_0-1716497050465.png

 

The above issue we are getting both sdk and AEM 6.5.19

 

Thanks & Regards,

Kalyan

14 Replies

Avatar

Community Advisor

Hi, 

You have a CORS issue, to solve this you need to configure "Adobe Granite Cross Origin Resource Sharing Policy" and allow your React app there. This is well detailed in the SPA Remote React tutorial, take a look at this step: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles... and add the config.

Make sure the config is in your AEM instance and that this config has the correct port and address for your React app.

To learn more about CORS check this: https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/security/understand-c... 

 

Hope this helps.



Esteban Bustamante

Hi @EstebanBustamante ,

 

I already configured the CORS but still Iam getting the same issue. Moreover actual page is loading and showing Parsys. Also Parsys is showing in structure mode of editable template. 

 

PFA attached screenshot.

kalyanchakravarthych_0-1716553482840.pngkalyanchakravarthych_1-1716553544220.png

 

 

Thanks & Regards,

Kalyan

Avatar

Community Advisor

Did you update your AEM instance port in this file: https://github.com/adobe/aem-guides-wknd-graphql/blob/main/remote-spa-tutorial/react-app/.env.develo... ? 

 

It looks like your React app is not appending the CORS headers while the AEM is ok. Please check this note: https://github.com/adobe/aem-guides-wknd-graphql/blob/main/remote-spa-tutorial/react-app/README.md#c...

 

Hope this helps



Esteban Bustamante

Hi @EstebanBustamante ,

 

 

I have updated the AEM host details in environment file of react/nextjs app. Please find the below screenshot.

kalyanchakravarthych_0-1716562942075.png

Not sure still why it is not working after doing all the steps followed as per the documentation.

 

Thanks & Regards,

Kalyan

Avatar

Community Advisor

Did you check that the CORS headers are appended to the React app?



Esteban Bustamante

No luck still the issue is not resolved. I am not getting what is the issue.

Avatar

Community Advisor

Are you still seeing the CORS issue in the browser console? 



Esteban Bustamante

Avatar

Community Advisor

Can you try to use your AEM instance on port 4502, I know all the configurations run smoothly with that port, I have tried myself and I haven't had those problems with the OOTB configs from the tutorial.



Esteban Bustamante

Hi @EstebanBustamante ,

 

i tried using 4502 now i dont see console errors but still the parsys is not coming in the initial content of editable template,

 

Thanks & Regards,

Kalyan

yes iam using the same boilerplate code but still iam getting the issue

Avatar

Community Advisor

Hi, 

I just double-checked, and it seems there is a bug on the "initial content" page of the editable template. Although the rest of the application works fine, there are some issues there. Since this is the boilerplate project you will have to log an issue here: https://github.com/adobe/aem-headless-app-templates/issues for more supporting.

 

 



Esteban Bustamante