Customizing the build process

1. In the tools/scripts/buildConstant.js file replace the constants ALL_APP and DEFAULT_APP with the new app name.
2. In the .env file, replace REACT_APP_STORENAME with the new app name. This variable is used only if the REACT_APP_STORENAME variable is not defined in .env.development or .env.production files.

   For more information, see Adding Development Environment Variables In .env for the Create React App.

3. In the assets folder, rename or copy the emerald or sapphire folder to the new app name. Replace the static assets in the folder, for example images, with new app specific assets.
   Note: To avoid potential conflicts or issues with different operating systems, use a lowercase folder name.
4. Replace the CSS theme in the src/themes folder.
   1. Rename or create the files appa-theme.js and appb-theme.js.
   2. Find and edit the index.js file to add the following commands:

      import 
      { 
      emeraldTheme as Emerald,
      sapphireTheme as Sapphire, 
      }
      from "@hcl-commerce-store-sdk/react-component";
      + import AppA from "./appa-theme";    
      + import AppB from "./appb-theme";
      + const themes = { AppA, AppB };
      const CurrentTheme = themes[process.env.REACT_APP_STORENAME];
      export { CurrentTheme };

5. run npm run build or npm start.

To add a new app name to the build, complete the following steps:

1. In the tools/scripts/buildConstant.js file add the new app name to the constants ALL_APP and DEFAULT_APP.
2. In the assets folder, add a new sub-folder with the new app name.
   Note: To avoid potential conflicts or issues with different operating systems, use a lowercase folder name.
3. In the src/themes folder, create the CSS theme files appa-theme.js and appb-theme.js.
4. Find and edit the index.js file to add the following commands:

   import 
   { 
   emeraldTheme as Emerald,
   sapphireTheme as Sapphire,
   }
   from "@hcl-commerce-store-sdk/react-component";
   - const themes = { Emerald, Sapphire };
   + import AppA from "./appa-theme";
   + import AppB from "./appb-theme";
   + const themes = { AppA, AppB, Emerald, Sapphire };
   const CurrentTheme = themes[process.env.REACT_APP_STORENAME];
   export { CurrentTheme };

5. run npm run build or npm start.

In order to use Google Maps in a React-based store, the store build process requires access to a Google API key. This access enables the following services for a react-based store.

• Directions API
• Distance Matrix API
• Maps JavaScript API
• Places API

To add a Google API key to the store:

1. Follow the steps in the following links:
   1. Enable and disable APIs
   2. Setting up API keys
2. Use the environment variable REACT_APP_GOOGLE_MAP_API_KEY=your google API key to add the key to the store .env file.
3. Build and deploy the store bundle.

For example,

PORT={{port}}
HTTPS={{https}}

REACT_APP_STORENAME={{appName}}
- REACT_APP_ROUTER_BASENAME={{appName}}
+ REACT_APP_ROUTER_BASENAME=

In case, if the bundle needs to be deployed into document root of a web server, the PUBLIC_URL Create React App built in env variable needs to be removed from .env files. For more information regarding this, refer Using the Public Folder.

REACT_APP_STORENAME={{appName}}
REACT_APP_ROUTER_BASENAME={{appName}}
- PUBLIC_URL=/{{appName}}