Building and deploying the HCL Customer Service Hub
The HCL Commerce CSR React App build process uses the standard Create React App build process along with some additional dotenv variables.
dotenv variables
dotenv is used for Create React App build process. The following variables are defined in the CSR SDK.
You can add or remove variables to fit your development, build, and deployment needs.
dotenv variable | Description |
---|---|
CSR_APP_MOCK | Used as a flag. Indicates whether the mock mode is on or off
for devServer in the local development environment when running
npm start . This is not Create React App
dotenv variable. |
REACT_APP_TRANSACTION_CONTEXT | Specifies the Transaction server REST service context path. |
REACT_APP_TRANSACTION_V2_CONTEXT | Specifies the Transaction server Admin V2 REST service context path. |
REACT_APP_ROUTER_BASENAME | Specifies the React Router <basename>
string. For more information, see https://reactrouter.com/web/api/BrowserRouter/basename-string. REACT_APP_ROUTER_BASENAME usually has the same value as PUBLIC_URL without the leading `/`. The REACT_APP_ prefix is required for an environment variable to be accessible from within React App JavaScript code. |
PUBLIC_URL | Used by React to indicate where the files are being served from: WebServer (production) or WebPack devServer (development) virtual directory. The variable can be accessed from index.html in the public folder. |
Build process prerequisites
- Before you build the app, ensure that all required static files and
translation files are present in the public folder.
Create React App recommends that you import stylesheets, images, and fonts
from JavaScript.
The public folder is useful as a workaround for a number of less common cases. For more information, see https://create-react-app.dev/docs/using-the-public-folder#when-to-use-the-public-folder.
- Ensure that iframeResizer.contentWindow.min.js is in
the public folder. The
iframeResizer.contentWindow.min.js version must
match the version of iframe-resizer-react specified in
package.json.
Ensure that the file is the same as in your local project directory node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js in case the iframe-resizer-react version was updated during the development cycle.
Building the app
npm run build
The React app is built and output to the build folder.
Deploying the app
- Copy the files from the build directory to Web Server document root. Ensure that the destination folder matches the value of the dotenv variables REACT_APP_ROUTER_BASENAME and PUBLIC_URL specified in the dotenv files.
- Define a URL rewrite rule in the Web Server for the Emerald and Sapphire reference stores to redirect the request for iframeResizer.contentWindow.min.js to the location where CSR app is being served. By default, the Emerald and Sapphire reference stores will try to load iframeResizer.contentWindow.min.js with path /iframeResizer.contentWindow.min.js.