React Store architecture

The React Store architecture is based on a Single Page Application (SPA) model whereby the browser loads the React JavaScript as an application, executes an HTTP request to retrieve data and renders the storefront UI. The model is a client-centric headless Store model that makes API calls to scalable services provided by the HCL Commerce Transaction server and HCL Commerce Search server.

The React Store application when deployed into the runtime architecture is a set of flat minimized JavaScript, HTML and other asset files on a web server. Any web server can be used, including the provided store-web server which can be cleaned and installed with your custom Store applications.

The recommended deployment consists of an Authoring environment that enables business users to make content changes and preview the store and a Production environment that is scaled for production loads to serve the Store shoppers.

The environments include Ingress as a router to direct requests to the appropriate server within the same domain/host name to ensure there are no cross site issues. The initial request from a browser with a Store URL is routed to the store-web server by Ingress and loads the application files into the browser. The following events occur within the React Store application:

  • A session is established. The React Store application uses WCToken for the session.
  • From the URL the corresponding page that is to be loaded is determined.
  • All components that are associated with the page are initiated as coded by the front end developer.
  • REST service calls are made to the back domain/host name to retrieve or post data to HCL Commerce servers.
  • Each component is rendered to form the UI on the page.

REST services are all made from the browser for each shopper and are routed from Ingress to target the HCL Commerce Transaction servers (ts-app) or the Search query services (search-query-app). As an SPA, for each subsequent page request, only the changed areas of the page are refreshed and updated (virtual DOM).

The Authoring Environment operates in the same way as the Production Environment but typically within the firewall for internal users. Under the Authoring Environment, the React Store application is enabled to support Store Preview capabilities. It accepts the PreviewToken generated by the Management Center and passes the token to all REST services which return results according to the preview context.