Integrating graph ql react app to aem

Forum|Forum|11 months ago
January 22, 2025
3 replies
1098 views

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-headless/graphql/multi-step/graphql-and-react-app

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

Community Advisor

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-headless/graphql/multi-step/graphql-and-react-app

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-step-guide/

Hope this helps

Thanks

K

KiranchonkarAuthor

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

Community Advisor

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-to-fetch-data-and-display-in-an-aem/td-p/725778

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

Thanks

iamnjain

Community Advisor

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

K

KiranchonkarAuthor

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

Community Advisor

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/developing/hybrid/getting-started-react

Hope this helps.

kautuk_sahni

Community Manager

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

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded