Showing results for 
Show  only  | Search instead for 
Did you mean: 

DXM Developer Knowledge Base

commercetools Integration for DXM

Originally available in Crownpeak's Github repository.

commercetools - The eCommerce Solution for Innovators and Visionaries. Increase business agility and innovate across new business models. Build your commerce architecture of the future with the most flexible, cloud based commerce API solution on the market.

This integration allows a content author to fully-manage the non-ecommerce/product management experience of the commercetools Sunrise demonstration site from within DXM.


The commercetools Integration for DXM leverages Sunrise SPA, commercetool's sample single page application site, and extends it to allow full content management from within DXM.

A Crownpeak Content Xcelerator℠ manifest is included, to allow you to provision Sunrise SPA within DXM in minutes.

Optionally, an Amazon Web Services (AWS) CloudFormation Template is included within this repo, to allow rapid provisioning of the public-facing experience within a serverless AWS environment.

Sunrise SPA Preview in DXM

Sunrise SPA preview within DXM Interface.

Sunrise SPA Inline in DXM

Images swapped from items within DXM DAM, simply using Drag & Drop to replace the default ones.

Sunrise SPA Inline Showing Footer Links Changed

Footer links changed, adding Crownpeak link.

Published Sunrise SPA - on AWS Serverless

Published commercetools Demonstration Site to AWS Serverless configuration.

Configuration Steps (with Crownpeak Content Xcelerator℠)

  1. Download Crownpeak Content Xcelerator℠ and install, per the instructions.

  2. Download Sunrise-SPA-DXM.xml to your favourite location.

  3. Open Crownpeak Content Xcelerator℠ and select Import Data.

    Crownpeak-Content-Xcelerator℠ - Import Data

  4. Complete information within "Import" screen with your details (see the instructions on the Crownpeak Content Xcelerator℠ if you are unsure).

    Crownpeak-Content-Xcelerator℠ - Authentication

  5. Select Sunrise-SPA-DXM.xml and pick the commercetools root folder.

    Crownpeak-Content-Xcelerator℠ - Pick Assets

  6. Click Next and wait for any Problems to be identified. Assuming none are, click Next again.

  7. Choose the DXM Folder Path where you would like the content deployed, and click Go.

    (N.B. A top-level folder called commercetools will be created automatically.)

    Crownpeak-Content-Xcelerator℠ - Choose Folder Path

  8. Wait for Sunrise-SPA-DXM.xml to be deployed.

    Sunrise SPA Import Complete

  9. Browse to your deployed Sunrise SPA site and open the Home Asset in Preview Mode.

    Sunrise SPA Preview in DXM

  10. Finally, configure your publishing requirements within DXM.

Configuration Steps (Manually)

We recommend using the steps above, combined with Crownpeak Content Xcelerator℠ to install Sunrise SPA into DXM - however, if you do choose to install manually, you may follow the steps below.

  1. Clone/download Sunrise SPA from commercetools' GitHub repository.

  2. Follow all installation/configuration instructions in the Sunrise SPA repository.

  3. Add/replace source files within the contents of ./src/ including all sub-folders within this repository.

  4. Copy files within ./public/ into /public/ within your repository.

  5. Re-build the Sunrise SPA site.

    npm run build
  6. Upload the contents of /dist/ within your site into a new Folder within DXM.

  7. Create new Project in DXM to hold Templates & Library Files. Ensure that Project is created inside Component Library.

  8. Create New Library Files, per contents of ./Library/

  9. Create New Templates, per contents of ./Templates/

  10. Create relevant Assets using the Templates that you have configured.

  11. Finally, configure your publishing requirements within DXM.

Configuration Steps (AWS Serverless Deployment)

This is an optional step, using an Amazon Web Services (AWS) CloudFormation Template, to allow rapid provisioning of the public-facing experience within a serverless AWS environment (S3, CloudFront and Lambda).

  1. Login to your Amazon Web Services Console and visit CloudFormation.

  2. Select the Region that you wish to deploy the CloudFormation Stack into and click Create Stack.

  3. Upload Sunrise-SPA-DXM-Serverless.yaml.

  4. Give the Stack a name (TIP: I use the Fully-Qualified Domain Name (FQDN), to make it easy to find in future).

  5. Supply the ARN for your pre-generated SSL Certificate, managed by AWS Certificate Manager.

  6. Supply the FQDN.

  7. Complete the wizard to provision the CloudFormation Stack.

  8. Once completed, create an IAM Policy to enable the DXM to upload files to the S3 Bucket. See below for an example:

        "Version": "2012-10-17",
        "Statement": [
                "Effect": "Allow",
                "Action": "s3:ListAllMyBuckets",
                "Resource": "arn:aws:s3:::*"
                "Effect": "Allow",
                "Action": [
                "Resource": [
                "Effect": "Allow",
                "Action": [
                "Resource": [
  9. Create an IAM User, inheriting the IAM Policy. Configure publishing from within DXM, using the Export S3 settings.

  10. Browse to your site.

Published Sunrise SPA - on AWS Serverless

Labels (1)