Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

Using SPA editor without SPA Routing

Avatar

Level 2

We have a requirement where client has a React component library developed outside of AEM and they want to use it to create their new website in AEM. They don't want SPA features such as spa routing. We are thinking of using the React SPA project with Server Side Rendering using a express server. We will not use react routing as SPA is not a requirement for the client.  With this approach we can use all the react code already developed. 

 

Will this be a good approach? What issues can we face? Any suggestion will be helpful!

8 Replies

Avatar

Community Advisor

Hi, 

 

I think you could potentially explore the "integrated SPA" option from this article: https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html. Here you have several design patterns and options available when working with SPA.



Esteban Bustamante

Avatar

Level 2

Thanks for the response.

For us SPA is not a requirement. We want to use full react code and also use the WYSIWYG editor for content authoring.

 

 

Avatar

Community Advisor

@ayushn adobe released new feature AEM remote Spa with next js last year.. it is just awesome.. here you will use either react ssr or react csr with next js app and use aem editor functionalities as-is for content management.

 

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

Avatar

Level 2

Thanks for the response!

We don't want to use remote Spa. We want WYSIWYG editing capability for authors.

 

Avatar

Community Advisor

I understand your concerns and it's not mean to use spa as by name, it's a feature using which we can enable WYSIWYG editor, even I did multiple websites where site is normal multi page site but hosted using Remote SpA approach, if you are on AEM cloud or AMS and if client have adobe connections, explore options of AEM Universal Editor as well.

Avatar

Community Advisor

Maybe you can explore this option.

  • Create a placeholder component in AEM with required dialogs - this component will only have a DIV, and the dialog data is added to the DIV as an attributes.
  • Create a wrapper component in AEM that uses the external component and renders through the data stored in the div attributes.

This will allow you to use the standard editable template and multipage websites, but the components are selected through the React component; you can even combine the non-React Component(HTL) with the React Component.

Regards

Albin

https://www.albinsblog.com

Albin Issac – Medium

 

Avatar

Level 3

Do you have any working sample of this approach? 

How would SPA routing will take place here?

Avatar

Administrator

@ayushn Do you find the suggestions from users useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 



Kautuk Sahni