SAP Commerce Cloud installation can be a complex task for the first time. And some steps can be easily forgotten and lead to some difficult troubleshooting. This article objective is to give an installation example detail as much as possible from the beginning to the end. Some settings example should be reviewed to ensure better security.

As prerequisite, it could be interesting to read this following article to get clear overview The Step-by-Step Illustration for Setting Up Composable Storefront in CCV2

Git Repository

First thing to do is to create a git repository where settings and custom code will be stored. SAP provides a structure example there: https://github.com/SAP-samples/cloud-commerce-sample-setup

$ git clone --depth=1 https://github.com/SAP-samples/cloud-commerce-sample-setup commerce
$ rm -rf ./commerce/.git
$ cd commerce
$ git init
$ git add .
$ git commit -m"first commit"

SAP Commerce

Edit localextensions.xml to enable/disable suitable extension for your project/demo

$ cd commerce/core-customize/hybris/config
$ vim localextensions.xml

Note: fewer extensions are activated and the faster the deployment will be

Edit manifest.json to indicate which SAP Commerce version you want to deployment and which service you want to expose

$ cd commerce/core-customize/
$ vim manifest.json

{
    "commerceSuiteVersion": "2211",
    ...
    "aspects":[ 
     { 
	"name":"backoffice",
	 "webapps":[ 
	   { 
	     "name":"hac",
	      "contextPath":"/hac"
	   },
	   ...
	   { 
	     "name":"backoffice",
	     "contextPath":"/backoffice"
           },
     ...
}

Note: version with no dot indicates latest patched version.

Edit common.properties to add settings that will be deployed in all environments

$ cd commerce/core-customize/hybris/config/environments
$ vim common.properties

# To activate only usefull languages
lang.packs=de,en,fr

# To activate swagger
springdoc.swagger-ui.enabled=true

# For B2B
occ.rewrite.overlapping.paths.enabled=true
b2bcommerce.unitlevelorders.enabled=true
quote.request.initiation.threshold.powertools.USD=5000

# Start SOLR indexation at the beginning 
backoffice.search.background.solr.indexing.enabled=true
backoffice.solr.search.index.autoinit=true

# SmartEdit
corsfilter.default.allowedOrigins=*
corsfilter.acceleratorservices.allowedOrigins=*
corsfilter.permissionswebservices.allowedOrigins=*

corsfilter.commercewebservices.allowedOriginPatterns=*
corsfilter.commercewebservices.allowedMethods=GET HEAD OPTIONS PATCH PUT POST DELETE
corsfilter.commercewebservices.allowedHeaders=origin content-type accept authorization cache-control if-none-match x-anonymous-consents x-profile-tag-debug x-consent-reference occ-personalization-id occ-personalization-time
corsfilter.commercewebservices.exposedHeaders=x-anonymous-consents occ-personalization-id occ-personalization-time
corsfilter.commercewebservices.allowCredentials=true

smarteditaddon.dynamicattribute.enabled=true
smartedittools.only.build.once=true
smartedit.pagetree.enabled=true

# Disable auditing
auditing.enabled=false
log4j2.logger.auditableActionsHandler.name=de.hybris.platform.audit.actions.impl.Slf4jAuditableActionHandler
log4j2.logger.auditableActionsHandler.level=OFF

Composable Storefront

Official instruction for building the Composable Storefront From 6 Libraries

Cloud Builder is not supporting Angular compilation. Compilation should be done externally and pushed into Git repository (dist folder)

Install prerequisite tools

# clean previous installation
$ npm uninstall -g @angular/cli
$ npm cache clean --force
$ npm cache verif

# install tool and lib
$ nvm install 18
$ npm i -g @angular/cli@15.2

Register your authentication key and Create a new Composable Storefront

$ cd commerce/js-storefront
$ rm -rf b2bspastore
$ rm -rf spartacusstore

$ ng new b2bspastore --style=scss --routing=false
$ cd b2bspastore

# to register your auth key for SAP repository where composable storefront can be downloaded
$ vim .npmrc
@spartacus:registry=https://73554900100900004337.npmsrv.base.repositories.cloud.sap/
//73554900100900004337.npmsrv.base.repositories.cloud.sap/:_auth=<secret>
always-auth=true

$ ng add @spartacus/schematics@6.3.0 --ssr

# select B2B modules needed

# add smartedit module

$ ng add @spartacus/smartedit

Setup Composable Storefront for the Cloud env

$ vim src/app/spartacus/features/smartedit/smart-edit-feature.module.ts
STOREFRONT_PREVIEW_ROUTE_PLACEHOLDER -> cx-preview
// * and *.ondemand.com don't work. only one subdomain can be replaced
ALLOWED_ORIGIN_PLACEHOLDER -> *.<domain>.model-t.cc.commerce.ondemand.com:443

$ vim index.html
<meta content="OCC_BACKEND_BASE_URL_VALUE" name="occ-backend-base-url"/>

$ vim spartacus-configuration.module.ts
providers: [provideConfig(layoutConfig), provideConfig(mediaConfig), ...defaultCmsContentProviders, provideConfig(<OccConfig>{
    backend: {
      occ: {
        // baseUrl: 'https://localhost:9002',
      }
    },
  }), provideConfig(<SiteContextConfig>{
    context: {
      currency: ['USD'],
      language: ['en'],
      baseSite: ['powertools-spa'],
      urlParameters: ['baseSite', 'language', 'currency']
    },

Note: in project/production situation, ALLOWED_ORIGIN_PLACEHOLDER should be reviewed to ensure better security

Build Composable Storefront for Cloud Portal Builder

$ cd commerce/js-storefront/b2bspastore
$ npm run build
$ npm run build:ssr
$ git add -f dist

$ cd commerce/js-storefront/spartacusstore
$ npm run build
$ npm run build:ssr
$ git add -f dist

$ git commit -m"dist update"
$ git push

Ensure manifest.json points correctly to dist folders

$ cd commerce/js-storefront
$ vim manifest.json

{
  "applications": [
    {
      "name": "spartacusstore",
      "path": "spartacusstore",
      "ssr": {
        "enabled": true,
        "path": "dist/spartacusstore/server/main.js"
      },
      "csr": {
        "webroot": "dist/spartacusstore/browser/"
      }
    },
    {
      "name": "b2bspastore",
      "path": "b2bspastore",
      "ssr": {
        "enabled": true,
        "path": "dist/b2bspastore/server/main.js"
      },
      "csr": {
        "webroot": "dist/b2bspastore/browser/"
      }
    }
  ],
  "nodeVersion": "16"
}

Cloud Portal

Where SmartEdit is hosted, the following HTTP Header should be set

Content-Security-Policy = frame-ancestors https://*.ondemand.com

Where Composable Storefront SSR is hosted, the following HTTP Header should be set

X-Frame-Options = ""

Post deployment

By default SAP Commerce Cloud doesn’t provide sample data that contains security aspects.

Then, from HAC, the following Impex should be imported to get functional platform.

Cloud SOLR settings

$serverConfigName=Default

REMOVE SolrEndpointUrl;solrServerConfig(name)[unique=true];url[unique=true];master[unique=true]
;$serverConfigName;https://localhost:8983/solr;true;

INSERT_UPDATE SolrEndpointUrl;solrServerConfig(name)[unique=true];url[unique=true];master[unique=true,default=false]
;$serverConfigName;zookeeper-0.zookeeper;
;$serverConfigName;zookeeper-1.zookeeper;
;$serverConfigName;zookeeper-2.zookeeper;

INSERT_UPDATE SolrServerConfig;name[unique = true];mode(code);
;$serverConfigName;cloud;

OCC OAuth

Import OCC Credentials

INSERT_UPDATE OAuthClientDetails;clientId[unique=true] ;resourceIds ;scope  ;authorizedGrantTypes  ;authorities ;clientSecret ;registeredRedirectUri
                                ;client-side              ;hybris            ;basic        ;implicit,client_credentials                                  ;ROLE_CLIENT             ;secret          ;http://localhost:9001/authorizationserver/oauth2_implicit_callback;
                                ;mobile_android           ;hybris            ;basic        ;authorization_code,refresh_token,password,client_credentials    ;ROLE_CLIENT             ;secret          ;http://localhost:9001/authorizationserver/oauth2_callback;

Note: in project/production situation, password should be reviewed to ensure better security

SmartEdit settings

SmartEdit integration

INSERT_UPDATE OAuthClientDetails;clientId[unique=true];resourceIds;scope[mode=append];authorizedGrantTypes;accessTokenValiditySeconds;authorities;clientSecret;
;smartedit;hybris;basic,permissionswebservices,previewwebservices;password,client_credentials;3600;;;

INSERT_UPDATE OAuthClientDetails;clientId[unique=true];scope[mode=append]
;smartedit;personalizationwebservices

INSERT_UPDATE OAuthClientDetails;clientId[unique=true]  ;resourceIds    ;scope[mode=append]                                   ;authorizedGrantTypes       ;accessTokenValiditySeconds ;authorities                ;clientSecret;
;smartedit              ;hybris         ;basic,permissionswebservices,previewwebservices,personalizationwebservices ;password,client_credentials;3600                       ;                           ;;
;smartedit-admin        ;hybris         ;extended,permissionswebservices,previewwebservices                         ;password,client_credentials;3600                       ;ROLE_ADMINGROUP            ;secret;
;smartedit-cmsmanager   ;hybris         ;extended,permissionswebservices,previewwebservices                         ;password,client_credentials;3600                       ;ROLE_BASECMSMANAGERGROUP   ;secret;

INSERT_UPDATE SmartEditConfiguration;key[unique=true];value
;whiteListedStorefronts;"[""*""]"

Note: in project/production situation, password and whiteListedStorefronts should be reviewed to ensure better security