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
– NPM (Node package Manager)
- 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.
- Download latest AEM as a cloud service SDK.
- 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)
- Once quickstart folder is created, create install folder under quickstart
- 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.
- Create environment variable named as COMMERCE_ENDPOINT and provide Magento URL provided in sandbox.
And add the COMMERCE_ENDPOINT into path as %COMMERCE_ENDPOINT%
- Start AEM by running java -jar aem-author-p4502.jar through command line.
- Now we can see commerce under localhost: 4502/aem/start.html
- 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.
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
- Once we have done installing Venia-Storefront on AEM localhost
- Goto – AEM Start Page – Tools – Cloud Services – CIF Configuration – Venia
- Edit the properties of commerce folder and in advance TabProvide the URL -> http://localhost:3000/graphql
- Basic Tab Properties as
- 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.
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.