Création et déploiement du hub HCL Customer Service
Le processus de création de l'application React du RSC HCL Commerce utilise le processus de création Create React App standard avec certaines variables dotenv supplémentaires.
variables dotenv
dotenv utilisé dans le cadre du processus de création Create React App. Les variables suivantes sont définies dans CSR SDK.
Vous pouvez ajouter ou supprimer des variables pour répondre à vos besoins en termes de développement, de création et de déploiement.
| variable dotenv | Description |
|---|---|
| CSR_APP_MOCK | Utilisé comme indicateur. Indique si le mode fictif est actif ou inactif pour devServer dans l'environnement de développement lors de l'exécution de npm start. Il ne s'agit pas de la variable dotenv Create React App. |
| REACT_APP_TRANSACTION_CONTEXT | Spécifie le chemin du contexte du service REST du serveur de transactions. |
| REACT_APP_TRANSACTION_V2_CONTEXT | Spécifie le chemin du contexte du service REST du serveur de transactions Admin V2. |
| REACT_APP_ROUTER_BASENAME | Spécifie la chaîne du routeur React <basename>. Pour plus d'informations, voir https://reactrouter.com/web/api/BrowserRouter/basename-string. REACT_APP_ROUTER_BASENAME a généralement la même valeur que PUBLIC_URL sans le "/" de début. Le préfixe REACT_APP_ est requis pour qu'une variable d'environnement soit accessible à partir du code JavaScript de l'application React. |
| PUBLIC_URL | Utilisé par React pour indiquer l'emplacement à partir duquel les fichiers sont utilisés : Répertoire virtuel WebServer (production) ou WebPack devServer (développement). La variable est accessible à partir de index.html dans le dossier public. |
Conditions préalables au processus de création
- Avant de créer l'application, assurez-vous que tous les fichiers statiques et de traduction requis sont présents dans le dossier public. Create React App vous recommande d'importer les feuilles de style, les images et les polices depuis JavaScript.
Le dossier public est utile comme solution de contournement pour un certain nombre de cas moins courants. Pour plus d'informations, voir https://create-react-app.dev/docs/using-the-public-folder#when-to-use-the-public-folder.
- Assurez-vous que iframeResizer.contentWindow.min.js se trouve dans le dossier public. La version iframeResizer.contentWindow.min.js doit correspondre à la version de iframe-resizer-react spécifiée dans package.json.
Assurez-vous que le fichier est le même que dans votre répertoire de projet local node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js au cas où la version de iframe-resizer-react a été mise à jour pendant le cycle de développement.
Création de l'application
npm run buildL'application React est créée et placée dans le dossier build.
Déploiement de l'application
- Copiez les fichiers du répertoire build vers la racine du document de serveur Web. Assurez-vous que le dossier de destination correspond à la valeur des variables dotenv REACT_APP_ROUTER_BASENAME et PUBLIC_URL spécifiée dans les fichiers dotenv.
- Définissez une règle de réécriture d'URL dans le serveur Web pour les magasins de référence Emerald et Sapphire afin de rediriger la demande iframeResizer.contentWindow.min.js vers l'emplacement où l'application RSC est exécutée. Par défaut, les magasins de référence Emerald et Sapphire essaieront de charger iframeResizer.contentWindow.min.js avec le chemin /iframeResizer.contentWindow.min.js.