CRM and CX Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Showing results for 
Search instead for 
Did you mean: 
safin
Advisor
Advisor

Introduction


As we know, Composable storefront is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud, this framework is extensible, progressive  and open sourced, more importantly, it provides better performance compared with traditional accelerator based storefront.

In this post, I will show you how to set up composable storefront in ccv2 based on these steps:

  • Design your code repository structure

  • Configure SAP Commerce Cloud to enable Composable Storefront

  • Create the Composable Storefront application

  • Set up git repository

  • Configure a connection with your git repository

  • Build and deploy your Composable Storefront application


For simplicity, I will suppose

  • electronics-spa site will be used as a demo

  • There are no customizations in both Sap Commerce Cloud and Composable Storefront, just use the default code.

  • Sap Commerce Cloud 2211 will be used

  • Composable Storefront 6 will be used


Code Repository Structure


Since composable storefront sample data and related properties are required in Sap Commerce Cloud in order to enable composable storefront, we will use two separate subdirectories, one is for SAP Commerce Cloud customization, the other is for composable storefront customization, the final code repository structure is as follows:


Code Repository Structure


Please note, single directory for all customizations are deprecated and cannot be used for composable storefront.

You can first create a folder as your root folder (for example: commerce-cloud-sandbox, later i will reference it as $WORKSPACE), then develop your composable storefront application following the above repository structure.

Configure SAP Commerce Cloud to enable Composable Storefront


In order to enable Composable Storefront, some work are required in Sap Commerce Cloud including:

  • Get spartacussampledata extension from SAP Commerce Cloud Sample Repository Release page, spartacussampledata contain electronics-spa site and related CMS data for Composable Storefront.

  • Move spartacussampledata extension into $WORKSPACE/core-customize/hybris/bin/custom

  • Change localextensions.xml to include spartacussampledata extension

  • In the $WORKSPACE/core-customize/hybris/config/local.properties file, add the following line: acceleratorservices.payment.sopmock.enabled=true

  • ...


You can refer to Installing SAP Commerce Cloud 2211 for use with Composable Storefront for detail for more details

Create the Composable Storefront Application


Create Angular Application


Move to $WORKSPACE/js-storefront, create spartacusstore angular application based on the instructions in building the Composable Storefront From 6 Libraries

Please note, there are two options to create your Composable Storefront application: download Composable Storefront libraries from RBSC, or generate libraries using Composable Storefront source code.

Commonly, we will download  composable storefront 6 libraries from the Repository Based Shipment Channel (RBSC),  it means we need to create an S-user for RBSC and generate a related NPM Base64 Credentials, then use this credentials to create .npmrc file under $WORKSPACE/js-storefront/spartacusstore

Optionally, if you don't have right to use RBSC, you can still build a composable storefront application by generating the libraries yourself from any version of the open source code in GitHub, please refer to Self-Publishing Spartacus Libraries Using the Open Source Code

Configure occ-backend-base-url


Edit index.html in $WORKSPACE/js-storefront/spartacusstore/src to configure occ-backend-base-url:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="OCC_BACKEND_BASE_URL_VALUE" name="occ-backend-base-url"/>
<title>Spartacusstore</title>
<base href="https://blogs.sap.com/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

Here, OCC_BACKEND_BASE_URL_VALUE is a placeholder, which will be replaced with the real API aspect external URL at application startup by CCV2 environment.

Develop manifest.json for this Angular Application


Go to $WORKSPACE/js-storefront/ and create manifest.json as follows:


Cloud Build Manifest for Composable Storefront App



Set Up Git Repository


Next, you need to setup git repository and submit your code, there are something you need to know:

(1) In previous step, node_modules folder will be generated, which will be used like a cache for the external modules that your Composable Storefront application depends upon. Just delete node_modules folder since CCV2 environment will provide all dependent modules

(2) CCV2 environment will use .npmrc created in previous step to download Composable Storefront libraries in order to build your application, so delete dist folder generated during local building in previous step

(3) if you cannot provide .npmrc because of some reasons (for example, don't have access right for RBSC), just keep local build, in other words, don't delete dist folder. furthermore, you need to modify .gitignore to comment out or delete /dist, so the files in dist folder can be successfully submitted to git repository:


.gitignore


Please note, If the <application.path>/dist does exist, the build process assumes that this directory contains a JavaScript storefront that is already built and it skips the build

Configure a Connection with Your Git Repository


Once git repository is setup, you can configure ccv2 to setup connection with your git repository as follows:


Configure Connection with Your Git Repository


 

Build and Deploy Your Composable Storefront Application


It's time to create a build for your composable storefront using cloud portal:


Building Composable Storefront App


 

Once the building is successful, you can deploy this building to specific environment:


Deployment of Composable Storefront App


Since there are some data introduced (in spartacussampledata extension) to support Composable Storefront, please choose 'Migrate data' or 'Initialize database' for platform update mode

Verify


After deployment is finished, you can access the Composable Storefront by clicking the url for electronics spa endpoint:


Composable Storefront APP Homepage



Summary


In this post, i list all the necessary steps to create a workable Composable Storefront in ccv2,

Hopefully i can help you a little in providing ccv2 solution in real case.

If you have any questions or comments, feel free to add it, :-).
2 Comments