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

AEM Commerce As Cloud Service with CIF Add-On

 

In this post we will discuss how to setup the AEM commerce as a cloud service with CIF add-on.

 

Setup of AEM commerce as a cloud service :

 A local development environment is recommended to work with CIF projects and how to setup one is explained below:

 

Prerequisites:

Some of the prerequisites for the setup are :

1. AEM as a Cloud Service SDK

2. Java 11

3. Node.js

4. npm

5. Magento Instance URL

 

First of all , the latest CIF add-on should be downloaded from the Software Distribution portal. It is a zip file which contains the respective far file as add-ons for author and publish instance.

Now follow the steps below :

 

1. Make sure you have the latest AEM as a cloud service SDK.

2. Unpack the jar by running java -jar <jar_name> -unpack in the command line to create a quickstart folder.

3. Once the quickstart folder has been created , go inside it and create a folder named install.

4. Unzip the CIF add-on package file and copy the correct .far file in the install folder of the relative instance you are planning to run i.e. author .far file for author-4502 instance and publish .far for publish-4503 .

5. Create a local environment variable named COMMERCE_ENDPOINT holding the Magento GraphQL endpoint.

I have installed my Magento instance on my local machine and it is running on:

http://localhost/magento2/admin

In Windows : set COMMERCE_ENDPOINT=<magento_endpoint_url>/graphql

In MAC : export COMMERCE_ENDPOINT=<magento_endpoint_url>/graphql

Using echo, you can check your COMMERCE_ENDPOINT value

6. Now run the jar by running java -jar <jar_name> in the command line.

7. You will also need to setup the proxy server for Magento endpoint so that the endpoint is available locally for CIF add-on and the CIF core components and to get the products binded in the Commerce console. 

Run the following command to do that :

In Windows:

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

Note: While setting up the proxy server , pass your Magento endpoint without /graphQL.

Your proxy server will be started stating Proxy Active and you can check the same by replacing proxied part with the http://localhost:3000/

Login to the AEM SDK and verify the CIF add-on related bundles at http://localhost:4502/system/console/osgi-installer

You will also be able to see the additional Commerce tab in http://localhost:4502/aem/start.html

Setup of the local AEM Commerce as a Cloud Service is completed now.

To deploy Viena project Follow Venia project with AEM

Happy Coding!!!