how to embed AEM React SPA app in other website | Community
Skip to main content
Level 2
February 9, 2021
Solved

how to embed AEM React SPA app in other website

  • February 9, 2021
  • 2 replies
  • 1125 views

Hi team,

 

Our web lives within another team's website. we are recreating our site with AEM 6.5 React SPA and wanted to check about approch for itegration.

 

If it is react only app, we can include script tags along with matching div name and that should work but since it is AEM app seems like there is some problem on ModelManager side where it is taking a root path of current url instead of our app(just a guess). 

Any ideas or approch to embed our app in other team's site?

 

Thank you for your time and help

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by neerav_it

Able to resolve this issue via following method.

  • Added 3 js scripts and css links in external site ( clientlib-react.js,container.js,clientlib-base.js,clientlib-react.css)
  • in index,js where we initialize modelmanager, had to give our rootpath as an argument.(since our site was within external site, defualt rootpath was getting taken by browser url)(ModelManager.initialize(//your root page relative URL//))
  • in order to make sure that model.json doesn't load again, we manually check in json object to see if our page data is available(this step is not required)

2 replies

Vijayalakshmi_S
Level 10
February 11, 2021

Hi @neerav_it,

Could you please share the details/background of the website(Is it again hosted in AEM or any other external application) in which you are trying to incorporate the React app?

 

neerav_itAuthorAccepted solution
Level 2
February 22, 2021

Able to resolve this issue via following method.

  • Added 3 js scripts and css links in external site ( clientlib-react.js,container.js,clientlib-base.js,clientlib-react.css)
  • in index,js where we initialize modelmanager, had to give our rootpath as an argument.(since our site was within external site, defualt rootpath was getting taken by browser url)(ModelManager.initialize(//your root page relative URL//))
  • in order to make sure that model.json doesn't load again, we manually check in json object to see if our page data is available(this step is not required)
kautuk_sahni
Community Manager
Community Manager
February 23, 2021
Thank you for sharing the solution with Community. Keep contributing.
Kautuk Sahni