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.
