Personnalisation du processus de génération

1. Dans le fichier tools/scripts/buildConstant.js, remplacez les constantes ALL_APP et DEFAULT_APP par le nouveau nom de l'application.
2. Dans le fichier .env, remplacez REACT_APP_STORENAME par le nouveau nom de l'application. Cette variable n'est utilisée que si la variable REACT_APP_STORENAME n'est pas définie dans ou dans les fichiers .env.development ou .env.production.

   Pour plus d'informations, voir Ajout de variables d'environnement de développement dans .env pour l'application Créer React.

3. Dans le dossier assets, renommez ou copiez le dossier emerald ou sapphire vers le nouveau nom de l'application. Remplacez les actifs statiques du dossier, par exemple les images, par de nouveaux actifs spécifiques à l'application.
   Note: Pour éviter tout conflit ou problème potentiel avec les différents systèmes d'exploitation, utilisez un nom de dossier en minuscules.
4. Remplacez le thème CSS dans le dossier src/themes.
   1. Renommez ou créer les fichiers appa-theme.js et appb-theme.js.
   2. Editez et modifiez le fichier index.js en ajoutant les commandes suivantes :

      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. Exécutez npm run build ou npm start.

Pour ajouter un nouveau nom d'application à la génération, procédez comme suit :

1. Dans le fichier tools/scripts/buildConstant.js, ajoutez le nouveau nom de l'application aux constantes ALL_APP et DEFAULT_APP.
2. Dans le dossier assets, ajoutez un nouveau sous-dossier avec le nouveau nom de l'application.
   Note: Pour éviter tout conflit ou problème potentiel avec les différents systèmes d'exploitation, utilisez un nom de dossier en minuscules.
3. Dans le dossier src/themes, créez les fichiers de thème CSS appa-theme.js et appb-theme.js.
4. Editez et modifiez le fichier index.js en ajoutant les commandes suivantes :

   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. Exécutez npm run build ou npm start.

Pour utiliser Google Maps dans un magasin basé sur React, le processus de génération de magasin requiert l'accès à une clé d'API Google. Cet accès active les services suivants pour un magasin basé sur react.

• API de directions
• API de matrice de distance
• API JavaScript Maps
• API Lieux

Pour ajouter une clé d'API Google au magasin :

1. Procédez comme suit dans les liens suivants :
   1. Activer et désactiver des API.
   2. Configuration de clés d'API
2. Utilisez la variable d'environnement REACT_APP_GOOGLE_MAP_API_KEY=votre clé d'API Google pour ajouter la clé au fichier .env de magasin.
3. Générez et déployez le groupement de magasin.

Par exemple,

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

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

Si le groupement doit être déployé dans la racine de document d'un serveur Web, la variable d'environnement intégrée Create React App PUBLIC_URL doit être supprimée des fichiers .env. Pour plus d'informations à ce sujet, voir Utilisation du dossier public.

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