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.

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

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)):

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

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.

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

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

• See Contributing