Venia Code with AEM SDK and Magento

 

In last blog we have setup AEM SDK with CIF add-on in AEM author instance. Now its time to deploy Venia ecommerce project.

Prerequisites:

1. AEM as a Cloud Service SDK

2. Java 11

3. Node.js

4. npm

5. Magento Instance URL 

Follow below steps to deploy existing project on AEM author:

1. Clone aem-cif-guides-venia project

git clone https://github.com/adobe/aem-cif-guides-venia.git

2. Comment dispatcher profile from root pom.xml ( not required as of now)

3. Go to Project directory and run below command to deploy code on AEM author:

4. Once the project is installed in AEM , traverse to http://localhost:4502/commerce.html or go to

http://localhost:4502/aem/start.html > Commerce>

5. Below is the error that shows up when you open the console.

This is because our AEM instance can’t access the Cross origin graphQL proxy endpoint of Magento.

6. To setup proxy, run below command:

npx local-cors-proxy --proxyUrl http://localhost/magento2 --port 3000 --proxyPartial ""

If you have already run this command as part of previous blog then skip this step.

7. Now go to http://localhost:4502/aem/start.html 

Tools > Cloud services > CIF Configuration

Click Properties

Add below configuration:

• GraphQL point: default( by default selected)
• Store view: default
• GraphQL query path : http://localhost:3000/graphql
• language: English
• Root category Id: 2

Click Save & Close.

8. Go to http://localhost:4502/aem/start.html > commerce>

or directly http://localhost:4502/commerce.html/browse

you can see Viena Code is coming in commerce 

Click on viena, all products gets loaded

And graphQL query is

Happy Coding!!!