Step by Step Vanilla SAP Commerce Cloud Installation

[joris_quenee]

Introduction

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

Install Composable Storefront sample data for content catalogue

https://github.com/SAP-samples/cloud-commerce-sample-setup/releases

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