Commerce Storefront Sample Application ·

Our storefront sample application shows how you can build amazing commerce experiences with the latest Commerce platform technologies. The application back end is built on the new Salesforce Commerce API (a RESTful headless API). The front end is built with Lightning Web Components (LWC). In between, it uses GraphQL and the Salesforce Commerce Node.js SDK.

Read more about the architecture.

The sample application shows you a recommended approach for building a storefront, but it is not a complete and fully functional storefront reference application. The sample application now includes a home page, product list page, product detail page, and basket. More great features are coming soon!

Note: sfcc-sample-apps is a monorepo with a sample application and Backend For Frontend (BFF) dependency modules. Typically, dependencies modules are published to a public npm server. However to develop an application, the modules are included together in a single repository.

Prerequisites

1. Download and install Node.js v12.
2. Install yarn: npm install yarn -g

Setup

To set up the sample application:

1. Clone the sfcc-sample-apps repository: git clone git@github.com:SalesforceCommerceCloud/sfcc-sample-apps.git

2. Change into the sfcc-sample-apps folder: cd sfcc-sample-apps

3. Copy the api.example.js file located at /packages/storefront-lwc/app/, save it as api.js, and make sure api.js is added to your .gitignore file.

4. In the api.js file, provide values for the following variables (you can obtain these values from your Account Executive (AE) or Customer Support Manager (CSM)):

Variable	Description
COMMERCE_CLIENT_API_SITE_ID	Unique site ID (for example, RefArch or SiteGenesis).
COMMERCE_CLIENT_CLIENT_ID	Unique ID used exclusively for API access. See Add a Client API for more information.
COMMERCE_CLIENT_REALM_ID	Unique four-character realm ID (for example, bblx).
COMMERCE_CLIENT_INSTANCE_ID	Unique instance ID within a realm (for example, 015).
COMMERCE_CLIENT_SHORT_CODE	Unique region-specific merchant ID (for example, staging-001).
COMMERCE_SESSION_SECRET	Unique ID for session management (for example, thisisasecretkey).
COMMERCE_CORS	Optionally enable CORS for GraphQL on the defined domains (for example, enable all domains with "\*").

Note: If the COMMERCE_SESSION_SECRET key is not unique per customer application, session information can be unintentionally shared between ecommerce sites.

5. Install dependencies: yarn

6. Build the sample application: yarn build

7. Start the sample application: yarn start:dev (development mode) or yarn start (production mode)

8. To access the application, open the browser to http://localhost:3000

You can optionally test the sample application: yarn test

Debug

We recommend Visual Studio Code inbuilt debugger to troubleshoot the code. The .vscode launch configuration is included in the repo. To debug using VSCode, see VS Code Debugging.

Configuration

• You can change the logging levels by modifying the COMMERCE_LOG_LEVEL property in api.js. The supported log levels are:
  • TRACE
  • DEBUG
  • INFO
  • WARN
  • ERROR
  • SILENT
• You can also change the server listening port by changing the port property in scff-sample-apps/packages/storefront-lwc/lwc-services.config.js.

Learn More About Supporting Technologies

• NodeJS
• ECMAScript 6
• Sass
• GraphQL
• Apollo
• Lightning Web Components
• Jest
• Visual Studio Code

Library of Components

The sample app currently includes the following components:

• Home Page
• Product Detail
• Product Search Results
• Basket

Contributing

• See Contributing