Building and deploying the HCL Customer Service Hub

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.

Note: For more information about How CSR interacts with the React Store and the usage of iframeResizer, see the README file that is included in the CSR SDK.

Building the app

Run the following code from the command prompt:

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.