Using SPA editor without SPA Routing

[ayushn]

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!

[EstebanBustamante]

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.

[ayushn]

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.

[Shashi_Mulugu]

@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...

[ayushn]

Thanks for the response!

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

[Shashi_Mulugu]

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.

[Albin_Issac]

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

[beast42]

Do you have any working sample of this approach? 

How would SPA routing will take place here?

[kautuk_sahni]

@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.