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.
- Download and install Node.js v12.
- Install yarn:
npm install yarn -g
To set up the sample application:
-
Clone the sfcc-sample-apps repository:
git clone git@github.com:SalesforceCommerceCloud/sfcc-sample-apps.git
-
Change into the
sfcc-sample-apps
folder:cd sfcc-sample-apps
-
Copy the
api.example.js
file located at/packages/storefront-lwc/app/
, save it asapi.js
, and make sureapi.js
is added to your.gitignore
file. -
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 "\*"). |
-
Install dependencies:
yarn
-
Build the sample application:
yarn build
-
Start the sample application:
yarn start:dev
(development mode) oryarn start
(production mode) -
To access the application, open the browser to http://localhost:3000
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 inapi.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 inscff-sample-apps/packages/storefront-lwc/lwc-services.config.js
.
The sample app currently includes the following components:
- See Contributing