Developing AEM Commerce projects based on Commerce Integration Framework (CIF) for AEM follows the same rules and best practices like other AEM projects. Please review these first:
A local development environment is recommended to work with CIF projects.
The following instructions help you setting up a local AEM development environment for AEM Commerce using CIF with focus for AEM 6.5). If you are using AEM as a Cloud Service, please see the AEM Commerce as a Cloud Service documentation.
The AEM Commerce Add-On for AEM 6.5 aka. CIF Add-On is available for local development as well and provided as an AEM package. It can be downloaded from the Software Distribution portal as a feature pack.
The following should be installed locally:
The CIF add-on can be downloaded from the Software Distribution portal, search for ´AEM Commerce add-on`.
Make sure you always use the latest CIF Add-On version.
For local CIF project development using the AEM and the CIF add-on following steps:
Get the AEM 6.5 release and install the AEM 6.5 Service Pack. AEM 6.5 Service Pack 7 is required, however we recommend installing the last available service pack.
Unpack the AEM .jar to create the
crx-quickstart folder, run:
java -jar <jar name> -unpack
Copy the CIF add-on all package, downloaded from Software Distribution portal, into the
Alternatively the CIF add-on package can also be installed via Package Manager.
Verify the setup via OSGI console:
http://localhost:4502/system/console/osgi-installer. The list should include the CIF add-on related bundles, content-package, and OSGI configurations. Make sure that all bundles are started.
There are two ways to start your AEM Commerce project using CIF.
The AEM Project Archetype is the main tool to bootstrap a preconfigured project to get started with CIF. CIF Core Components and all the required configurations can be included in a generated project with one extra option.
Use AEM Project Archetype 25 or later to generate the project.
See AEM Project Archetype usage instructions on how to generate an AEM project. To include CIF into the project use the
mvn -B archetype:generate \ -D archetypeGroupId=com.adobe.granite.archetypes \ -D archetypeArtifactId=aem-project-archetype \ -D aemVersion=6.5.5 \ -D appTitle="My Site" \ -D appId="mysite" \ -D groupId="com.mysite" \ -D frontendModule=general \ -D includeExamples=n \ -D includeCommerce=y
CIF Core Components can be used in any project by either including the provided
all package or individual using the CIF content package and related OSGI bundles. To manually add CIF Core Components to a project use the following dependencies:
<dependency> <groupId>com.adobe.commerce.cif</groupId> <artifactId>core-cif-components-apps</artifactId> <type>zip</type> <version>x.y.z</version> </dependency> <dependency> <groupId>com.adobe.commerce.cif</groupId> <artifactId>core-cif-components-config</artifactId> <type>zip</type> <version>x.y.z</version> </dependency> <dependency> <groupId>com.adobe.commerce.cif</groupId> <artifactId>core-cif-components-core</artifactId> <version>x.y.z</version> </dependency> <dependency> <groupId>com.adobe.commerce.cif</groupId> <artifactId>graphql-client</artifactId> <version>x.y.z</version> </dependency> <dependency> <groupId>com.adobe.commerce.cif</groupId> <artifactId>magento-graphql</artifactId> <version>x.y.z</version> </dependency>
A second option to start a CIF project is to clone and use the AEM Venia Reference Store. The AEM Venia Reference Store is a sample reference storefront application that demonstrates the usage of CIF Core Components for AEM. It is intended as a best-practice set of examples and a potential starting point to develop your own functionality.
To get started with the Venia Reference Store simply clone the Git repository and start customizing the project according to your needs.
The Venia Reference Store project contains two build profiles for AEM as a Cloud Service and AEM 6.5. Check the project readme.md to see how they are used. For AEM 6.5 use the
To connect your project to the commerce system AEM must be configured with the GraphQL endpoint of your commerce system.
Replace the value of the
com.adobe.cq.commerce.graphql.client.impl.GraphqlClientImpl~default.cfg.json with the GraphQL endpoint of your commerce system used by the project.
The AEM Commerce Add-On and CIF Core Components connect to the commerce GraphQL endpoint via the AEM server and directly via the browser. Client-side CIF Core Components and CIF Add-On authoring tools by default connect to
/api/graphql. If needed this can be adjusted via the CIF Cloud Service config (see below).
The CIF add-on provides a GraphQL proxy servlet at
/api/graphql. If you don’t plan to use a local AEM Dispatcher, it is recommended to configure the GraphQL proxy servlet as well.
Navigate to http://localhost:4502/system/console/configMgr and create an OSGI config for the
Adobe CIF GraphQL Proxy Configuration service. Use the same GraphQL endpoint of your commerce system as used for the GraphQL client above.