Skip to Content
Technical Articles
Author's profile photo Joris QUENEE

Step by Step Vanilla SAP Commerce Cloud Installation


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:

$ git clone --depth=1 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",

Note: version with no dot indicates latest patched version.

Edit to add settings that will be deployed in all environments

$ cd commerce/core-customize/hybris/config/environments
$ vim

# To activate only usefull languages

# To activate swagger

# For B2B

# Start SOLR indexation at the beginning

# SmartEdit

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


# Disable auditing

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

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

# select B2B modules needed

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

# to register your auth key for SAP repository where composable storefront can be downloaded
$ vim .npmrc

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

# select B2C modules needed

Setup Composable Storefront for the Cloud env

$ vim src/app/spartacus/features/smartedit/smart-edit-feature.module.ts
// * and * don't work. only one subdomain can be replaced

$ 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://*

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


REMOVE SolrEndpointUrl;solrServerConfig(name)[unique=true];url[unique=true];master[unique=true]

INSERT_UPDATE SolrEndpointUrl;solrServerConfig(name)[unique=true];url[unique=true];master[unique=true,default=false]

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


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

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

SmartEdit settings

INSERT_UPDATE OAuthClientDetails;clientId[unique=true];resourceIds;scope[mode=append];authorizedGrantTypes;accessTokenValiditySeconds;authorities;clientSecret;

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

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

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


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.