Using the mock API framework

You can configure the React Store application development environment as a local environment without an HCL Commerce transactional server or Search server using the mock API framework to emulate any REST responses.

You can run the React Store application in mock mode with help of the MockServer library. MockServer is the npm library with which you can easily mock your back end REST API response.

You can organize your mock files in a folder for easy maintenance. By using the mock framework, front end developers can work on developing the UI without actually interacting the back end APIs.

For more information about MockServer and guidelines for creating mocks for your back end responses, see https://www.npmjs.com/package/mockserver and https://github.com/namshi/mockserver.

Location of mock framework scripts files in the Store SDK

Location Description
tools/mockServer.js This script is called when you run the store in mock mode and runs a mock server on the configured port number. The mocks folder serves as an input to the mock server to serve mock responses when it is called.
src/_foundation/apis/mock/

mockserver.services.ts

A sample HTTP REST API client/consumer which you can use for testing HTTP GET, PUT, POST responses.
src/setupProxy.js The proxy script file contains, mock host details, URL rewrite logic etc. This file contains the code that re-routes the API request to MockServer which returns mock JSON as API responses.
mocks All the back end mock files in JSON format are placed in this folder. The folder structure is based on the following format:
$REQUEST-PATH/$HTTP-METHOD.mock
For example, for the following API
GET wcs/resources/store/<storeId>/espot/Home%20Hero

the folder structure is mocks/wcs/resources/store/__/Home%20Hero/GET.mock.