Developing AEM Commerce projects based on Commerce Integration Framework (CIF) for AEM as a Cloud Service follows the same rules and best practices like other AEM projects on AEM as a Cloud Service as well. Please review these first:
A local development environment is recommended to work with CIF projects. The CIF Add-On provided for AEM as a Cloud Service environments is available for local development as well. It can be downloaded from the Software Distribution portal.
The CIF Add-On is provided as a Sling Feature archive. The zip file available on the Software Distribution portal includes two Sling Feature archive files, one for AEM author and one for AEM publish instances.
New to AEM as a Cloud Service? Check out a more detailed guide to setting up a local development environment using the AEM as a Cloud Service SDK.
The following should be installed locally:
The CIF add-on can be downloaded as a zip file from the Software Distribution portal. The zip file contains the CIF add-on as Sling Feature archive, it is not an AEM package. Note that access to the SDK listings is limited to those with AEM as a Cloud Service license.
Make sure you always use the latest CIF Add-On version.
For local CIF Add-on development using the AEM as a Cloud Service SDK following steps:
Get the latest AEM as a Cloud Service SDK
Unpack the AEM .jar to create the
crx-quickstart folder, run:
java -jar <jar name> -unpack
Copy the correct Sling Feature archive file of the CIF add-on into the
The CIF add-on zip file contains two Sling Feature archive
.far files. Make sure to use the correct one for AEM Author or AEM Publish, depending on how you plan to run the local AEM as a Cloud Service SDK.
Create a local OS environment variable named
COMMERCE_ENDPOINT holding the Magento GraphQL endpoint.
Example Mac OSX:
This variable must be set up for the AEM as a Cloud Service environment as well.
Start the AEM as a Cloud Service SDK
Start the local GraphQL proxy server
To make the Magento GraphQL endpoint available locally for the CIF add-on and the CIF components use the following command. The GraphQL endpoint will then be available at
Example Mac OSX:
npx local-cors-proxy --proxyUrl https://demo.magentosite.cloud --port 3002 --proxyPartial ''
npx local-cors-proxy --proxyUrl https://demo.magentosite.cloud --port 3002 --proxyPartial '""'
--proxyPartial needs to receive an empty string.
You can test the local GraphQL proxy by pointing a GraphQL query tool to
http://localhost:3002/graphql and test a few queries.
Login to AEM SDK and configure CIF to use the local GraphQL proxy server
Navigate to the CIF Cloud Service configuration (Tools > Cloud Services > CIF Configuration). Open the properties view of the config used by your project.
GraphQL Proxy Path property use the local proxy server endpoint
http://localhost:3002/graphql. Save the configuration.
Do not push the configuration of step 8 into the project repo. This config is only required for a local development setup. AEM as a Cloud Service environments are already set up with the GraphQL proxy during the onboarding.
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 as defined in the feature model file.
There are two ways to bootstrap your CIF project for AEM as a Cloud Service.
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 additional option.
Use AEM Project Archetype 24 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 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
CIF Core Components can be used in any project by either including the provided
all package or individualy using the CIF content package and related OSGI bunldes. 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-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 as well as 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.