Name: Setting Up a Local SAP Commerce Cloud Composable Storefront Instance
Uploaded: 2023-9-29
Duration: 469 s
Description: In this video, you will learn how to set up your local Composable Storefront environment by using the Composable Storefront libraries.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div>In this video, you will learn how to set up your local Composable Storefront environment by using the Composable Storefront libraries.</div></div></div></div>

Setting Up a Local SAP Commerce Cloud Composable Storefront Instance

Hello, everyone. In this video, I’m going to show you how to set up a composable storefront using Composable Storefront libraries on your local system. There are some pre-requisites to set up a composable storefront when building it from libraries. To build Composable Storefront from 6.x libraries, a minimum of SAP Commerce Cloud version 2105 is required. That said, we recommend you use the latest release. Your version of Angular CLI needs to be at least 15.2.4, but less than 16. Versions 16 and higher are not supported. Your Node.js version needs to be either 16 or 18. For version 16, use at least 16.13.0, and for version 18, use version 18.10.0 or newer. npm version 8.0 or newer is required. In this video, I will use composable storefront libraries 6.2 and SAP Commerce Cloud 2211, but you can use any 6.x libraries. Make sure you have the OOTB SAP Commerce Cloud set up either locally or on a commerce cloud environment, and that you have installed the Electronics sample data and the composable storefront sample data extensions.  Here are the steps to build Composable Storefront locally. The first step is to create an Angular App. This requires you to set up access to the composable storefront libraries. After setting up access, add composable storefront libraries in your angular App, install dependencies, verify the API end point, and start your composable storefront app. We will cover these steps in detail during this video. As we just saw, our first step is to create an Angular app. Open a Terminal or Command prompt window at the location of your choice and verify that all dependencies are installed.  Check Angular, node, npm and yarn versions to make sure you are using supported versions.  Create a new Angular app called mystore. This will create the mystore folder and app. Navigate to the folder you just created.  Composable Storefront is the official Spartacus release from SAP, so you need to setup access to Composable Storefront libraries in the Repository-based shipment channel. For that, you need an S-user account with the appropriate license to download the Composable Storefront libraries. Log into the RSBC repository, located at https://ui.repositories.cloud.sap/www/webapp/users/, using your S-user account. You can copy this URL either from the SAP help page or from this PowerPoint presentation, after downloading it. Click on Add user and create a technical user, if one doesn’t already exist. Here, I created a new technical user named testuser. Create a .npmrc file with the following content at the root of your mystore Angular application. You can copy this content from the SAP help document page or by downloading this PowerPoint presentation. You need to provide technical user credentials in the .npmrc file. To get these credentials, navigate to the RBSC website, select the technical user you created in the previous step and copy the generated NPM Base64 Credentials.  In the .npmrc file, replace the authentication details with the NPM Base64 credentials.  Your access is now all set. The next step is to add Composable Storefront libraries. The command ‘ng add @spartacus/schematics@6.2.0’ will install the 6.2.0 release of Composable Storefront using schematics.  The installer is asking you to choose which features to setup. You can select and unselect the features relevant to your installation. I’m pressing enter to move forward with the default selection.  Ok, it’s done now. We have added Composable Storefront libraries. We can now install dependencies. Run the ‘yarn install’ command to install all dependencies. This will take a while.  So far, we have installed Composable Storefront libraries and dependencies. Let’s verify the out-of-the box configuration for the base URL. You can open the project in Visual Studio Code and open the file spartacus-configuration.module.ts. You can see that the default value of baseUrl is https://localhost:9002. The default OCC base URL for commerce cloud is the local setup endpoint.  If you’re using a local setup of SAP Commerce Cloud, then keep this value, otherwise change it to your particular SAP Commerce Cloud API endpoint. We’re all set. We can now start the app to see the storefront up and running. But before doing that, please make sure your SAP Commerce Cloud environment is up and running. Also, if you are using a local SAP Commerce Cloud setup, then first visit https://localhost:9002/ in your browser to accept a privacy certificate, which will avoid any certificate-related errors in API calls. Now start the app using the command ‘yarn start --ssl'.  Your composable storefront application will be compiled, then started in the Angular Live Development Server. The --ssl switch allows the storefront application to be served over the secure https protocol. Now open the URL https://localhost:4200/. If you have installed the Electronics sample data and the Spartacus sample data extension, then the Composable Storefront for the Electronics store should appear.  If you have followed all the steps, then you should be able to see the Electronics store. Congratulations! You have built your first Composable Storefront.