Install and Configure the CIF Add-on in AEM to connect Venia Store
In this episode of the CIF Add-on blog post series, we will cover the setup of AEM (Adobe Experience Manager) and CIF Add-on installation along with configuration. We are also going to set up the AEM Venia project.
So far, we have completed the Adobe Commerce and Venia store setup in the local environment, and if you haven’t done yet, check our previous post here on the same.
To start with the setup, we will need to install some dependencies and download a few files,
- Install NPM, NodeJS, Java SDK 11
- Download AEM as a Cloud Service SDK: The latest SDK can be downloaded from Adobe’s Software Distribution. The file to download will be in the following format AEM SDK v********.
- Download CIF Add-on Package: The latest CIF Add-on package too is available to download on Adobe’s Software Distribution. The file will be in the following format AEM CIF Add-On v*****.
- Clone AEM CIF Venia Project: The Venia project can be cloned from Adobe’s official GitHub repo.
Now that we have all that we need to set up the instances, we can begin with the Author instance first, followed by the Publish instance, then the code deployment, and finally the CIF add-on configuration.
Setting up the Author Instance
- Place the AEM as a Cloud Service SDK jar file into a folder, let us call it aem-author.
- Before we get going with starting the instance, we have to unpack the jar first, to incorporate the CIF Add-on package. To do so, use the following command,
(Note that we have renamed the AEM SDK v******** jar file to aem-author-p4502.jar.)
java -jar aem-author-p4502.jar -unpack
Once completed, it should create the crx-quickstart folder.
- Unzip the CIF Add-on package (the AEM CIF Add-On v***** file) contents, and copy the cif-cloud-ready-feature-pkg-******-cq-commerce-addon-authorfar.far file and paste it into a new directory named install within the crx-quickstart directory.
- With this, we complete the add-on installation. Now let’s get the instance started and verify if the changes are working fine. Starting the instance with the start script file under the crx-quickstart/bin directory will do just fine.
Note: After running the script, it will not show any output. Check on the link http://localhost:<port>/system/console/bundles and wait until all bundles transition into Active state.
- Once all the bundles are in the Active state, navigate to the AEM dashboard. A new tab called Commerce should appear, certifying the successful installation of the CIF Add-on.
Setting up the Publish Instance
Similar to the author instance, the Publish instance setup can be done following the same steps. The only variable part is the file names, so the author becomes publish, 4502 port becomes 4503. Like for example aem-publish–p4503.jar and cif-cloud-ready-feature-pkg-******-cq-commerce-addon-publishfar.far
Venia Code Deployment
The AEM instances are ready for deployment. The Venia project can be deployed, using the following command,
mvn clean install -PautoInstallSinglePackage,classic
CIF Add-on Configuration
In the first blog of this series, we learned that Adobe Commerce has a GraphQL layer. To consume the commerce data, a GraphQL Client needs to be configured. To do so, navigate to the configuration manager, and look out for the “GraphqlClientImpl~venia” configuration. And update the following 2 properties GraphQL Service URL and Allow HTTP communication as shown below, the rest of the other properties will remain the same.
Prior to that, we need to set up a proxy server using the below command to avoid the CORS error in the future. And the same proxy URL can be configured in the GraphQL Service URL property.
npx local-cors-proxy –proxyUrl http://localhost –port 3000 –proxyPartial “”
You can use the GraphQL client now; just adjust the CIF configuration based on the details of your Magento store. In order to reach this configuration, go to AEM Tools and select Cloud Services, then click on CIF configuration.
After accessing the CIF configuration window, select Venia and then Commerce to access additional options. Finally, choose properties from the top bar.
Magento Store Information
To check out the categories and products from the Magento venia store, come back to the Commerce tab on the AEM dashboard, and click on venia card.
The final appearance of the Venia site,
This completes the configuration of the CIF Add-on.
In this series of blogs, we saw the architecture and features of Adobe’s CIF Add-on in detail. Further, to explore the practical implementation of the add-on, we set up the Adobe Commerce engine. And finally, installed and configured the CIF add-on on our local AEM instances.
With these blogs in your arsenal, you should now be able to integrate Adobe Commerce with the AEM seamlessly.
Stay tuned for our blogs on various other topics.