5

Upgrade to Composable Storefront Version 5.0 – Steps & Challenges – Lessons...

 1 year ago
source link: https://blogs.sap.com/2023/04/04/upgrade-to-composable-storefront-version-5.0-steps-challenges-lessons-learned/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
April 4, 2023 4 minute read

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

“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:

Screen-Shot-2023-03-31-at-6.16.16-PM.png

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

Screen-Shot-2023-03-31-at-11.41.56-AM.png

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

Screen-Shot-2023-03-31-at-11.20.38-AM.png

We may face challenges if there is an issue with npmcredentialsfromrbsc authenticity or if the file is not generated as per guideline.

Screen-Shot-2023-03-31-at-10.56.27-AM.png

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.

Screen-Shot-2023-03-31-at-3.36.31-PM.png

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

 ng update @spartacus/[email protected]

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/[email protected] --force

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

Screen-Shot-2023-04-01-at-7.58.25-AM.png

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:

Screen-Shot-2023-03-31-at-5.01.35-PM.png

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
Screen-Shot-2023-03-31-at-5.25.48-PM-1.png
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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK