Integrating graph ql react app to aem

[Kiranchonkar]

Hello,

I am using aem cloud instance on my local

And was trying to build a graphql app using https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

App works absolutely fine with localhost:3000 consuming graphql APIs which I built.

But now I need to push this to localhost:4502

Can anyone guide how to do this integration 

What are the possibilities 

Will this be served as iframe or will it be part of repo

Please share reference links and steps

Regards

[PRATHYUSHA_VP]

Hi @Kiranchonkar 

The main idea for building a react app by following below approach is to render the site in react based app

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

if you want to integrate in AEM, there are other ways to do it using AEM SPA editor

https://medium.com/@toimrank/aem-react-spa-fb10256dbdce

https://www.tothenew.com/blog/building-custom-components-in-aem-spa-editor-with-reactjs-a-step-by-st...

Hope this helps

Thanks

[Kiranchonkar]

I tried link which u shared but mvn clean install gives me error for node even though it is up to date.

What other ways we have to consume graph ql APIs?

I basically want to add in react the way it is shown and consume the ui on aem.

Regards

[PRATHYUSHA_VP]

If you're using headless approach with react based application above approach works.

If you want to host it in AEM, React SPA is the go-to solution

Other way if you want to use graphQL API's within AEM, here's the thread -

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-forms/use-graphql-endpoint...

for the above error you've posted, please check if package.json file updated with proper npm version details

Thanks

[iamnjain]

@Kiranchonkar 

Do you want to create your Graphql Queries on AEM? Because it's slightly different mechanism of GraphQL on AEM.

Let me know if my understanding is wrong.

[Kiranchonkar]

Hi,

Graphql is already set and have proper APIs as well ready and on basis of that I have react app working as well

But how to get it to aem is my concern 

Any spa development is needed?

Can you guide with steps 

Or any other mechanism to bring graphql APIs to aem.

[iamnjain]

As @PRATHYUSHA_VP mentioned you can try that and if you want to move everything to AEM( Graphql + React UI ) then AEM SPA integration is your solution.

Here is the Introductory Article to start with React JS SPA

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

Hope this helps.

[kautuk_sahni]

@Kiranchonkar Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!