Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

how to embed AEM React SPA app in other website

neerav_it
Level 2
Level 2

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution
neerav_it
Correct answer by
Level 2
Level 2

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)

View solution in original post

3 Replies
Vijayalakshmi_S
Community Advisor
Community Advisor

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_it
Correct answer by
Level 2
Level 2

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)

View solution in original post

kautuk_sahni
Community Manager
Community Manager
Thank you for sharing the solution with Community. Keep contributing.