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, and product detail page. 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 [email protected]:SalesforceCommerceCloud/sfcc-sample-apps.git

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

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

4. In the api.mjs 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	A unique site ID (for example, RefArch or SiteGenesis).
COMMERCE_CLIENT_CLIENT_ID	A unique ID used exclusively for API access. See Add a Client API for more information.
COMMERCE_CLIENT_REALM_ID	A unique four-character ID (for example, bblx).
COMMERCE_CLIENT_INSTANCE_ID	Instance ID within a realm (for example, 015).
COMMERCE_CLIENT_SHORT_CODE	Region-specific merchant identifier (for example, staging-001).

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 sample application in development mode, open the browser to http://localhost:3000 (for production mode, open to http://localhost:3002).

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

Contributing

• See Contributing