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>We are aware of intermittent issues in accessing the learning content</p>

We are aware of intermittent issues in accessing the learning content

Personalize your learning.

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?

Please try again later

Sorry, we encountered an error

Try again or reset results to continue browsing

We didn’t find what you’re looking for

To continue, please log in

Your session has timed out

Validate your skills and learning by completing the certification exam and gain a highly recognised accreditation.

Book your certification exam

Complete the assessment to validate your SAP PartnerEdge competency qualifications.

Ready to take your assessment?

Learn about the key features and essentials in the latest release to help you prepare for the Stay Certified assessment.

Prepare for assessment

Learn new skills you need at your own pace with our bite-sized lessons.

Prepare for certification

In your My Learning account you can view your certification and learn how to take your Stay Certified assessment.

Ready to take your Stay Certified assessment?

Explore {title} at SAP Learning. Find out more!

Assessment

Course Completion

Knowledge Badge

Certification Exam

Theoretical Exam

Schedule

External Course

Practical Exercise

Practical Test

External Hands-On

External Resource

Learning Journey

Learning Journey Assessment

Lesson

Live Session

Practice System

Quiz

Scenario Based Assessment

Course Assessment

Course

Stay Certified

Subscription

System Based Assessment

Test Out

Unit

Video

Video Playlist

Week

You can now register for free Live Sessions.

Access activated

<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.