AEM as a Cloud Service and Magento Integration Local Setup Guidelines

AEM(Adobe Experience Manager) and Magento Integration are the best in the eCommerce world. Imagine the amazing advantages it offers when combined? This blog has covered the step-by-step guidelines of setting up AEM cloud service and Magento integration.

AEM Commerce as a Cloud Service

AEM as a cloud service has 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 versions of AEM, we had a CIF (Commerce Integration Framework)-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 integration is easier.

The AEM CIF Core Components project serves as accelerator to get started with projects using AEM, CIF and Magento. The project contains re-useable Commerce core components which combine server-side rendered AEM components with client-side React commerce components (MPA) for dynamic experiences / data.

Usually, Magento Sandbox URL Integration on local would throw CORS issue for the connection and we have designed the solution for the same.

Setup AEM Commerce as a cloud service with CIF add-on on our store-front ecommerce project

Some of the pre-requisites for the setup are:

– AEM as a cloud service SDK (Software Development Kit)
– Java 11
– Node.js
– NPM (Node package Manager)

1. Latest CIF add-on should be downloaded from Adobe Software Distribution Portal. This would be a ZIP file which contains the respective far file as add-ons for our author and publisher environments.
2. Download latest AEM as a cloud service SDK.
3. Unpack the jar by running java -jar <jar_name> -unpack in the command line to create a quickstart folder (This is just un-pack, hence AEM wouldn’t start)
4. Once quickstart folder is created, create install folder under quickstart
5. Unzip the package CIF-addon and copy .far file which include (author) in file name for author environment and (publish) in file name for publisher environment.
6. Create environment variable named as COMMERCE_ENDPOINT and provide Magento URL provided in sandbox.
   

   And add the COMMERCE_ENDPOINT into path as %COMMERCE_ENDPOINT%

7. Start AEM by running java -jar aem-author-p4502.jar through command line.
8. Now we can see commerce under localhost: 4502/aem/start.html

 


9. Setup the proxy server for Magento Endpoint so that the endpoint is available in local for CIF add-on and the CIF core components to bind products into commerce console.
    

   Proxy Setup

   Run the following command

   npx local-cors-proxy –proxyUrl <magento_endpoint_url> –port 3000 –proxyPartial “”

   When setting up the proxy server, provide your Magento endpoint without “/graphQL”.

   Proxy would start stating proxy active and we can hit the URL http://localhost:3000 for Magento Instance

   
10. Once we have done installing Venia-Storefront on AEM localhost
11. Goto – AEM Start Page – Tools – Cloud Services – CIF Configuration – Venia
    http://localhost:4502/libs/cif/shell/content/configuration.html/conf/venia
12. Edit the properties of commerce folder and in advance TabProvide the URL -> http://localhost:3000/graphql
 

13. Basic Tab Properties as
 

14. Once after the configuration, we will be able to see the products in commerce console.

This completes the integration between AEM Commerce and Magento Integration setup on local.

Author Bio

Chiran Kumar is our Associate Director with an impressive record in Application design and Architecture. For over 11.5 years. He has been at the helm of various digital experience and e-commerce projects for leading software organizations.

Chiran has completed his post-graduation in Computer Applications from Al Ameen College, Bangalore. Apart from work… Chiran loves to nurture his passion for bikes and travelling.