Personalización del proceso de compilación

1. En el archivo tools/scripts/buildConstant.js, sustituya las constantes ALL_APP y DEFAULT_APP con el nuevo nombre de aplicación.
2. En el archivo .env, sustituya REACT_APP_STORENAME por el nuevo nombre de aplicación. Esta variable solo se utiliza si la variable REACT_APP_STORENAME no está definida en los archivos .env.development o .env.production.

   Para obtener más información, consulte Adición de variables de entorno de desarrollo en .env para la aplicación Create React.

3. En la carpeta assets, cambie el nombre o copie la carpeta emerald o sapphire al nombre de la nueva aplicación. Sustituya los elementos estáticos de la carpeta, por ejemplo, imágenes por nuevos elementos específicos de la aplicación.
   Note: Para evitar posibles conflictos o problemas con diferentes sistemas operativos, utilice un nombre de carpeta en minúsculas.
4. Sustituya el tema CSS de la carpeta src/themes.
   1. Cambie el nombre o cree los archivos appa-theme.js y appb-theme.js.
   2. Busque y edite el archivo index.js para añadir los mandatos siguientes:

      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. ejecute npm run build o npm start.

Para añadir un nuevo nombre de aplicación a la compilación, realice los pasos siguientes:

1. En el archivo tools/scripts/buildConstant.js, añada el nombre de la nueva aplicación a las constantes ALL_APP y DEFAULT_APP.
2. En la carpeta assets, añada una nueva subcarpeta con el nuevo nombre de aplicación.
   Note: Para evitar posibles conflictos o problemas con diferentes sistemas operativos, utilice un nombre de carpeta en minúsculas.
3. En la carpeta src/themes, cree los archivos de tema de CSS appa-theme.js y appb-theme.js.
4. Busque y edite el archivo index.js para añadir los mandatos siguientes:

   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. ejecute npm run build o npm start.

Para poder utilizar Google Maps en una tienda basada en React, el proceso de compilación de la tienda requerirá el acceso a una clave de API de Google. Este acceso habilitará los servicios siguientes para una tienda basada en React.

• API de Directions
• API de Disctance Matrix
• API de Maps JavaScript
• API de Places

Para añadir una clave de API de Google a la tienda:

1. Siga los pasos de los siguientes enlaces:
   1. Habilitar e inhabilitar las API
   2. Configuración de claves de API
2. Utilice la variable de entorno REACT_APP_GOOGLE_MAP_API_KEY=su clave de API de Google para añadir la clave al archivo de la tienda .env .
3. Cree y despliegue la tienda.

Por ejemplo,

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

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

En caso de que el paquete deba desplegarse en la raíz del documento de un servidor web, es necesario eliminar de los archivos .env la variable env de Create React App. Para más información al respecto, consulte Uso de la carpeta pública.

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