AEM Commerce as a Cloud Service

Adobe with introduction of AEM as a Cloud Service has also launched AEM Commerce as a Cloud Service. It is Adobe recommended to integrate ecommerce services from Magento and other third party commerce solutions with AEM. 

Earlier with on premise versions of AEM, we had a CIF-connector to integrate Magento. But now a CIF add-on is available at the Software Distribution portal from where we can download the latest version of CIF add-on and the things will go much smoother.

In this post we will discuss on how to setup the AEM commerce as a cloud service with CIF add-on and how to setup our very own first ecommerce project.

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:

Some of the prerequisites for the setup are :

1. AEM as a Cloud Service SDK 

2. Java 11

3. Node.js

4. npm

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.

In Windows : set COMMERCE_ENDPOINT=<magento_endpoint_url>/graphql

In MAC : export COMMERCE_ENDPOINT=<magento_endpoint_url>/graphql

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 <magento_endpoint_url> --port 3000 --proxyPartial ""

In MAC : npx local-cors-proxy --proxyUrl <magento_endpoint_url> --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/. 

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

Setup a new project/existing project:

Now when the setup is complete it is time to deploy the project and do end-to-end testing of the connection between AEM and Magento.

You can create a new project or deploy an existing sample project (Venia storefront).

Doing either way will install a core CIF component package too, which includes the OOTB Core CIF components. 

Read more about Core CIF Components.

1. Create a new project :

The new project supported for AEM commerce is created by latest Archetype version i.e. 24.

It can be used for AEM on-premise as well as AEMaaCS projects.

The command for generating a new project is as follows:

mvn -B archetype:generate 
 -D archetypeGroupId=com.adobe.aem 
 -D archetypeArtifactId=aem-project-archetype 
 -D archetypeVersion=24 
 -D aemVersion=cloud 
 -D appTitle="My Site" 
 -D appId="mysite" 
 -D groupId="com.mysite" 
 -D frontendModule=general 
 -D includeExamples=n 
 -D includeCommerce=y

It is same as what we did for setting up AEMaaCS , but only marking includeCommerce as y for commerce enabled projects.

2. Deploy the sample Venia project :

For getting hands dirty on the AEM Commerce , you can straight away download the sample project given by Adobe from here.

Once the project is installed in AEM , traverse to http://localhost:4502/commerce.html and you you might still not see the products under the commerce console in your local. 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.

So to setup that navigate to http://localhost:4502/libs/cif/shell/content/configuration.html/conf/venia and open the commerce properties. 

In GraphQL Proxy Path set http://localhost:3000/graphql, the category root id (2 ) and the store view (default).

It will look something like this :

Now you will be able to see the products in the commerce console.

This concludes that the integration between AEM and Magento is successful.

You can also open any of the Venia content page and checkout the Sign In , Create an Account Cart Checkout etc. functionalities to see the end-to-end flow.

This winds up out motive of setting up a local AEM Commerce as a cloud service instance and the project.

Hope you find it useful.

Happy Coding !!!