Creación e implementación del Centro de Servicio al Cliente de HCL

variables dotenv

dotenv se utiliza para crear el proceso de compilación de la Create React App. Las siguientes variables se definen en CSR SDK.

Puede agregar o quitar variables para adaptarse a las necesidades de desarrollo, compilación e implementación.


dotenv variable	Descripción
CSR_APP_MOCK	Se utiliza como indicador. Indica si el modo simulado está activado o desactivado para devServer en el entorno de desarrollo local al ejecutar `npm start`. Esta no es la variable dotenv de Create React App.
REACT_APP_TRANSACTION_CONTEXT	Especifica la ruta de contexto del servicio REST del servidor de transacciones.
REACT_APP_TRANSACTION_V2_CONTEXT	Especifica la ruta de contexto del servicio REST de Admin V2 del servidor de transacciones.
REACT_APP_ROUTER_BASENAME	Especifica la cadena <basename> de React Router. Para obtener más información, consulte https://reactrouter.com/web/api/BrowserRouter/basename-string. REACT_APP_ROUTER_BASENAME suele tener el mismo valor que PUBLIC_URL sin el '/' inicial. El prefijo REACT_APP_ es necesario para que una variable de entorno sea accesible desde el código JavaScript de React App.
PUBLIC_URL	Utilizado por React para indicar desde dónde se sirven los archivos: Directorio virtual WebServer (producción) o WebPack devServer (desarrollo). Se puede acceder a la variable desde index.html en la carpeta public.

Crear requisitos previos de proceso

Antes de compilar la aplicación, asegúrese de que todos los archivos estáticos y archivos de traducción necesarios estén presentes en la carpeta de public. Create React App recomienda importar hojas de estilo, imágenes y fuentes desde JavaScript.
La carpeta de public es útil como solución alternativa para una serie de casos menos comunes. Para obtener más información, consulte https://create-react-app.dev/docs/using-the-public-folder#when-to-use-the-public-folder.
Asegúrese de que iframeResizer.contentWindow.min.js está en la carpeta de public. La versión iframeResizer.contentWindow.min.js debe coincidir con la versión de iframe-resizer-react especificada en package.json.
Asegúrese de que el archivo es el mismo que en el directorio del proyecto local node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js en caso de que la versión iframe-resizer-react se actualizase durante el ciclo de desarrollo.

Note: Para obtener más información acerca de Cómo interactúa CSR con la React Store y el uso de iframeResizer, vea el archivo README que se incluye en CSR SDK.

Construcción de la aplicación

Ejecute el siguiente código de la solicitiud de comandos:

npm run build

La aplicación React está creada y se genera en la carpeta build.

Implementación de la aplicación

Copie los archivos del directorio build a la raíz del documento del servidor web. Asegúrese de que la carpeta de destino coincida con el valor de las variables dotenv REACT_APP_ROUTER_BASENAME y PUBLIC_URL especificadas en los archivos dotenv.
Defina una regla de reescritura de URL en el servidor web para los almacenes de referencia Emerald y Sapphire para redirigir la solicitud iframeResizer.contentWindow.min.js a la ubicación donde se sirve la aplicación CSR. De forma predeterminada, los almacenes de referencia Emerald y Sapphire intentarán cargar iframeResizer.contentWindow.min.js con la ruta de acceso /iframeResizer.contentWindow.min.js.