Upgrade to Composable Storefront Version 5.0 – Steps & Challenges - Lessons learned

[phy_abhijit]

“Starting with version 5.0, “SAP Commerce Cloud, composable storefront” is the name for the official release of project “Spartacus” libraries published by SAP. The officially supported composable storefront is available to SAP Commerce Cloud customers. Documentation is available on the SAP Help Portal.

Composable storefront is based off the Spartacus open source code and is included in the SAP Commerce Cloud license at no extra cost. Composable storefront has a roll-forward update policy.”  - Source

Upgrade Spartacus from 3.X to Spartacus/Composable Storefront 5.0

What we need to have for respective Spartacus/Composable storefront are as follows:

If the application is still running on Spartacus 3.x and if we need to upgrade to Composable Storefront 5.0, the recommended approach is nothing but stage upgrade approach. We should not directly upgrade to Composable Storefront 5.x as there are major changes on platform libraries and the Reference app structure has been restructured significantly. We need to upgrade first to Spartacus 4.x from 3.x version and then Composable Commerce 5.xAll the steps are mentioned to upgrade from 3.x to 4.x in the following document:

Updating Spartacus to Version 4.x

We all know that Spartacus version 4.x is no longer supported but we still need to go through this ‘stage upgrade‘ to reach Composable commerce 5.0 version. We need to be careful during this ‘staged upgrade’ while migrating to the Reference App Structure.  We need to update all the relevant modules as per recommendation.

Once we upgrade successfully to Spartacus 4.x, then there are certain steps to follow to get Spartacus 5.0 code as it is now an official SAP product but still the code base is Open source. We cannot just pull libraries from github what is possible for prior versions.

Updating Spartacus 4.x to Spartacus 5.0/Composable Storefront 5.0

We you can download composable storefront libraries from Repository Based Shipment Channel by logging into the repo channel with S-User id. All those steps are mentioned here. We can find below the highlighted area from which we need to copy NPM Base64 Credentials

We need to create .npmrc file containing the npmcredentialsfromrbsc at the root of the  composable storefront project.

We may face challenges if there is an issue with npmcredentialsfromrbsc authenticity or if the file is not generated as per guideline. You may face challenges if you do not use the file format correctly. Please use utf-8 format else you might be facing the below issue.

After we install those as per the table shown about for Angular development environment in our local, we need to run the following command from terminal opened the root of the composable storefront project.

If we are specific to Composable Storefront 5.0, we need to run

 ng update @spartacus/schematics@5.0.0

Otherwise if we want to upgrade to latest version of Composable Storefront, which is 5.2 as of now today 31.03.2023, we can run

 ng update @spartacus/schematics@5

On another note, if there is any issue like “ Migration failed: Incompatible peer dependencies found.” then we can use following to update

 ng update @spartacus/schematics@5.0.0 --force

Once it runs successfully, we should have the latest Spartacus dependencies in package.json file as shown below highlighted.

Now we can install application by running following command @/js-storefront/front-store folder

yarn install

and then run the application @/js-storefront/front-store folder

yarn start

If the Commerce Cloud 2211 already and installed locally, we can point our Composable Storefront to local back end as follows:

Opend file /js-storefront/front-store/src/environments/environment.ts file and update the baseUrl to

point to the local backend:

export const environment = {

                            production: false,

                            backend: {

                                      occ: {

                                            baseUrl: 'https://localhost:9002',

                                            prefix: '/myStorewebservices/v2/',

                                           },

                                      },

                            };

 

Third party library dependency:

   If any application we’re about to upgrade to latest version 5.0, we need to cross check as we all know that core composable storefront 5.0 libraries were released in November 2022. Not all third-party libraries have published their compatible version with Composable Storefront 5.0.  We have experienced similar and had multifold challenges. We cannot upgrade application if associated third party library are not compatible with 5.x version.

Cross-Origin Resource Sharing (CORS) Issue:

We may face CORS issue when we deploy the change into different environments through Commerce Cloud portal. We can perform following steps to fix the issue.

• Check property “allowedHeaders’ through HAC and those are there, we may need to rerun the CORS impex


• Before we rerun the impex, we need to delete the web application services for CORS in Backoffice


• Then we can rerun the impex

INSERT_UPDATE CorsConfigurationProperty;key[unique=true];value;context[default=myStorewebservices,unique=true]

;allowedOriginPatterns;*

;allowedMethods;GET HEAD OPTIONS PATCH PUT POST DELETE

;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

;exposedHeaders;x-anonymous-consents occ-personalization-id occ-personalization-time

Composable Storefront Update 5.0.0: Link

Composable Storefront Update (latest) 5.2.0: Link

Hope it helps you to understand well and accelerate your upgrade to the latest SAP Composable Storefront 5.x

Stay tuned for more updates on Composable Storefront upgrade. 🙂

If you have any feedback or suggestions, please feel free to add a comment below.