Develop AEM Commerce for AEM as a Cloud Service develop
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. Review the following first:
Local Development with AEM as a Cloud Service SDK local
A local development environment is recommended to work with CIF projects. The CIF Add-On provided for AEM as a Cloud Service 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.
Required Software
The following should be installed locally:
- AEM as a Cloud Service SDK
- Java™ 11
- Apache Maven (3.3.9 or newer)
- Node.js v10+
- npm 6+
- Git
Accessing the CIF add-on
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. SDK listings are accessible with an AEM as a Cloud Service license.
Local Setup
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 so you can create the
crx-quickstart
folder, run:code language-bash java -jar <jar name> -unpack
-
Create a
crx-quickstart/install
folder -
Copy the correct Sling Feature archive file of the CIF add-on into the
crx-quickstart/install
folder.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 Adobe Commerce GraphQL endpoint.Example macOS X:
code language-bash export COMMERCE_ENDPOINT=https://<yourcommercesystem>/graphql
Example Windows:
code language-bash set COMMERCE_ENDPOINT=https://<yourcommercesystem>/graphql
This variable is used by AEM to connect to your commerce system. Also, the CIF add-on includes a local reverse proxy to make the Commerce GraphQL endpoint available locally. This proxy is used by the CIF authoring tools (product console and pickers) and for the CIF client-side components doing direct GraphQL calls.
This variable must be set up for the AEM as a Cloud Service environment as well. For more information on variables, see Configuring OSGi for AEM as a Cloud Service.
-
(Optional) To enable staged catalog features, you must create an integration token for your Adobe Commerce instance. Follow the steps at Getting Started to create the token.
Set an OSGi secret with the name
COMMERCE_AUTH_HEADER
to the following value:code language-xml Authorization: Bearer <Access Token>
For more information on secrets, see Configuring OSGi for AEM as a Cloud Service.
-
Start the AEM as a Cloud Service SDK
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.
Project Setup project
There are two ways to Bootstrap your CIF project for AEM as a Cloud Service.
Use AEM Project Archetype
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.
See AEM Project Archetype usage instructions on how to generate an AEM project. To include CIF into the project, use the includeCommerce
option.
For example:
mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
-D archetypeGroupId=com.adobe.aem \
-D archetypeArtifactId=aem-project-archetype \
-D archetypeVersion=35 \
-D appTitle="My Site" \
-D appId="mysite" \
-D groupId="com.mysite" \
-D includeCommerce=y
CIF Core Components can be used in any project by either including the provided all
package or individually 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>
Use AEM Venia Reference Store
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, clone the Git repository and start customizing the project according to your needs.