Store SDK and application configurations

The HCL Commerce Store SDK provides a set of foundational React components for interacting with HCL Commerce business logic that can be used as the basis for creating and managing your custom Store and allows front end developers to focus on customizing and replacing the display and view aspects of the store. All aspects of the React application, including the foundation, are customizable by front end developers and are provided as references to interact with HCL Commerce REST APIs and session management.

Environments for the Store SDK

The Store SDK provides a flexible environment in which a React web developer can create the Store UI. The development environment can be configured in the following modes:

  • As a local environment without an HCL Commerce Transaction server or Search server using the mock API framework to emulate any REST responses.
  • As a local environment with a local Transaction server (HCL Commerce toolkit) and local Search Docker service.
  • As a connected environment with a local Transaction server (HCL Commerce toolkit) and a remote Search Docker service.
  • As a connected environment with a remote Transaction server (HCL Commerce toolkit) and a remote Search Docker service.

For more information about how to configure the modes, see the Readme.md file that is included in the Store SDK.

The React Store application

The React Store application comprises of the following packages:

  • A pre-packaged Node environment with source code for a set of foundational components and framework customers, accompanying build tools, static assets for sample stores, and Node environment to build and start the React applications.
  • A pre-packaged web-server docker container containing minimized static files representing the React application. The web-server docker container assets are created from the build process of the Node environment.​​​

The node environment and store-web server also include a set of static assets for the sample stores including images for marketing assets, product category images, and web display assets.

The Node environment has a common code base and assets with an npm install/start/build process that can be used to deploy two distinct React applications​​​​​​​ that provide the following sample stores:

  1. A B2C Reference Store application (Emerald) with a pre-wired page flow for B2C with an 'Emerald green' UI design.
  2. A B2B Reference Store application (Sapphire) with a pre-wired page flow for B2B with a 'Sapphire blue' UI design.

Setting up the development environment

You can custom build your React Store application using any web development IDE and deploy to the provided store-web server, any other web server, or choose your own deployment method. When using the store-web container, the React Store application names can be referenced by the stores/eSites thar are created by the site administrators.

The store-web environment includes both the Emerald and Sapphire Reference Store application.

You can start the npm environment with either the Emerald or the Sapphire application.

Each React application can serve one or more stores and accepts a parameter storeId=<storeId>. If the storeId is not specified, the application considers the <storeName> to be the same name as the application.

React Store application development flow

The following diagram shows the typical React Store application development flow.