Configuración del servidor de desarrollo local

Para cargar la interfaz de usuario de la aplicación en un entorno de desarrollo, asegúrese de que las aplicaciones micro-frontend y store-root-config estén en ejecución.

Para consolidar la ejecución de todas las aplicaciones micro-frontend dentro de la aplicación Sterling Store Engagement, utilice las utilidades y scripts de línea de comandos que se proporcionan. Los programas de utilidad y scripts de línea de mandatos se basan en app-config.json, que describe la raíz de contexto, los puertos, etc., para todas las aplicaciones microfrontales. También permite ciertas rutas a proxy a un servidor remoto que permite a los desarrolladores elegir la aplicación que desean ejecutar localmente.

Los desarrolladores pueden elegir dar servicio a las aplicaciones microfrontales desde un servidor remoto en lugar de ejecutarse localmente. Como desarrollador, puede configurar la instancia de kit de herramientas de desarrollador local o la instancia de nube de desarrollo o de QA como servidor remoto. Si el servidor remoto está habilitado para HTTPS, se establece una conexión segura con el servidor utilizando el archivo de certificado p12 configurado y la contraseña del certificado. Al configurar el servidor remoto, puede elegir las rutas adecuadas o las aplicaciones microfrontales para servir desde un servidor local y desde un servidor remoto. Después de generar y descargar el certificado de cliente, configure la vía de acceso del certificado de cliente en el archivo app-config-overrides.json . Para obtener más información sobre la generación y descarga del certificado de cliente, consulte Generación de certificados de cliente.

Establezca la siguiente variable de entorno mencionada si utiliza la versión 17+ de node.js.

export NODE_OPTIONS=--openssl-legacy-provider

Nota: En la instancia de nube o el kit de herramientas de desarrollador local, asegúrese de que el OpenID Connect (OIDC) o el inicio de sesión único (SSO) no está habilitado para utilizarlo como servidor remoto.

El siguiente código de ejemplo ilustra el archivo app-config.json :

{
  "name": "store-frontend",
  "devServerConfig": {
    "port": 9000,
    "contextRoot": "/isf/store-frontend"
  },
  "routes": {
    "app-shell": {
      "devServerConfig": {
        "port": 4200,
        "contextRoot": "app-shell"
      }
    },
    "login": {
      "devServerConfig": {
        "port": 4204,
        "contextRoot": "login"
      }
    },
    "nav-bar": {
      "devServerConfig": {
        "port": 4300,
        "contextRoot": "nav-bar"
      }
    },
    "home": {
      "devServerConfig": {
        "port": 4203,
        "contextRoot": "home"
      }
    },
    "customer-profile": {
      "devServerConfig": {
        "port": 4202,
        "contextRoot": "customer-profile"
      }
    }
}}

Cada raíz de aplicación de microfrontend package.json proporciona el script yarn start-app para iniciar la aplicación de característica. Como desarrollador, puede alterar temporalmente app-config.json proporcionando app-config-overrides.json para ejecutar las aplicaciones microfrontales en las modalidades siguientes:

Para ejecutar unas pocas aplicaciones microfrontales localmente, realice los pasos siguientes:
- Copie y pegue la aplicación microfrontal o el nombre de ruta del archivo app-config.json en el objeto de rutas en app-config-overrides.json.
- Para el nombre de aplicación, establezca useRemote=false.
- Establezca serveAllAppsFromLocal=false para asegurarse de que las aplicaciones microfrontales restantes se sirven desde un servidor remoto que está configurado en el objeto remoteServerConfig .
Para ejecutar todas las aplicaciones microfrontales localmente, establezca "serveAllAppsFromLocal": true en app-config-overrides.json. En este caso, se ignora el distintivo useRemote para las aplicaciones microfrontales individuales y las configuraciones de servidor remoto.
Draft comment: shailaskumar@in.ibm.com

Note: As all the micro-applications are running locally, it results in high memory consumption. Therefore, you might observe performance degradation or system not responding.

El mandato yarn start-app analiza app-config-overrides.json e inicia las aplicaciones microfrontales localmente, que están configuradas como "useRemote": false. Las aplicaciones microfrontales que no están listadas en app-config-overrides.json o con useRemote: true se sirven desde un servidor remoto que está configurado en el objeto remoteServerConfig en el archivo app-config-overrides.json .

Nota: Si establece useRemote: true, se recomienda que inicie el navegador Google Chrome en la modalidad de seguridad web inhabilitada. Esto es para asegurar que su navegador no bloquee ninguna petición HTTP de origen cruzado que se haga al servidor de aplicaciones remoto desde su aplicación local.

Para Windows, ejecute el mandato siguiente:

chrome.exe --user-data-dir="C:\tmp" --disable-web-security

Para Mac, ejecute el mandato siguiente:

open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/tmp

El siguiente código de ejemplo ilustra app-config-overrides.json:

{
    "name": "store-frontend",
    "serveAllAppsFromLocal": false,
    "remoteServerConfig": {
        "hostName": "store-dev.oms.supply-chain.ibm.com",
        "port": 443,
        "https": true
        "options": {
           "pfx":"/path/to/certificate.p12",
           "passphrase":"<password>"
       }
    },
    "routes": {
        "app-shell": {
            "useRemote": false
          },
          "login": {
            "useRemote": false
          },
          "nav-bar": {
            "useRemote": false
          },
          "home": {
            "useRemote": false
          },
          "backroom-pick": {
            "useRemote": false
          }
    }
}

Las tablas siguientes definen el esquema JSON de app-config.json y app-config-overrides.json:

Tabla 1.app-config.json definición del esquema
Elemento o atributo	Descripción
nombre	Nombre de la aplicación de tienda.
`"devServerConfig":{ "port":1111, "contextRoot":"/isf/store-frontend" }`	La configuración del servidor de desarrollo en el nivel raíz indica el número de puerto y la raíz de contexto utilizados por la aplicación raíz de tienda. `port`: el número de puerto de la aplicación raíz de tienda. Sólo da soporte a un valor numérico. `contextRoot`: especifica la raíz de contexto de la aplicación raíz de tienda. Sólo da soporte al valor de serie.
`"remoteServerConfig": { "hostName": "store-dev.oms.supply-chain.ibm.com", "port": 443, "https": true, "options": { "pfx":"/path/to/certificate.p12", "passphrase":"<password>" } }`	La configuración de servidor remoto que se utiliza para servir aplicaciones angulares desde un servidor remoto. Esta configuración permite que los desarrolladores ejecuten aplicaciones angulares específicas en local, y que las restantes se sirvan desde un servidor remoto. El servidor remoto puede ser la instancia OMS DTK, o instancias de nube de desarrollo o QA con un certificado y una contraseña válidos configurados en `app-config-overrides.json`. Los desarrolladores pueden configurar la instancia de OMS DTK o la instancia de nube de desarrollo o QA como un servidor remoto. hostName: El nombre de host o la dirección IP del servidor remoto. Sólo da soporte al valor de serie. port: Indica el número de puerto del servidor remoto. Sólo da soporte al valor numérico. https: Indica si se utiliza el protocolo HTTPS en el servidor remoto. Sólo da soporte al valor booleano. -opciones: Este objeto es obligatorio cuando un servidor remoto utiliza el protocolo HTTPS. options.pfx: vía de acceso del certificado p12 . Para obtener más información sobre la generación y descarga del certificado de cliente, consulte Generación de certificados de cliente. options.passphrase: contraseña del certificado. Configure estos atributos sólo en el archivo `<store-temp>/app-config-overrides.json` .
`serveAllAppsFromLocal: true\|false`	Indica si todas las aplicaciones angulares especificadas en `<store-temp>/app-config.json` y `<store-temp>/app-config-overrides.json` deben iniciarse y servirse desde una instancia local. Cuando este distintivo se establece en true, el distintivo `useRemote` que se ha configurado para una aplicación angular individual se ignora. Este distintivo sólo da soporte al valor booleano y sólo debe configurarse en el archivo `<store-temp>/app-config-overrides.json` .
`"routes":{ ... "login":{ "useRemote":"true\|false "devServerConfig"":{ "port":4200, "contextRoot":"login" } }, ... }`	Contiene la lista de configuraciones de aplicaciones angulares habilitadas para un solo spa. Cada configuración de aplicación incluye las propiedades siguientes: `port`: número de puerto donde se sirve localmente la aplicación angular. Sólo da soporte a un valor numérico. `contextRoot`: especifica la raíz de contexto de la aplicación angular. Sólo da soporte al valor de serie. `useRemote`: distintivo para indicar si la aplicación debe servirse desde un servidor remoto o local. Sólo da soporte a valores booleanos. Para servir la aplicación angular proporcionada por la aplicación desde un servidor remoto, defina la siguiente configuración en el archivo `<store-temp>/app-config-overrides.json` . Asegúrese de que copia el nombre exacto de la aplicación. `routes: { "login": { "useRemote": true } }`

La tabla siguiente proporciona la lista de detalles de aplicación angular habilitada para un solo spa proporcionado por la aplicación:

Tabla 2. Rutas proporcionadas por aplicaciones o microaplicaciones frontales configuradas en app-config.json
Nombre de aplicación	Descripción
shell-app	Inicializa la aplicación de tienda con todos los datos de configuración necesarios para su funcionamiento. El `app-shell` se carga en modalidad autónoma y no está visible en la interfaz de usuario. No puede personalizar esta aplicación.
barra de navegación	barra de navegación
inicio de sesión	Proporciona la prestación de inicio de sesión.
Inicio	Proporciona la función de página de inicio, que muestra portlets para diferentes personas.
pedidos	Proporciona capacidad que está relacionada con una entidad de orden de venta como, por ejemplo, lista de pedidos, resumen de pedidos, captura de pedidos y apaciguamiento de clientes de pedidos. Los puntos de entrada son búsqueda de orden global, portlet de búsqueda de pedidos y portlet de extracción rápida.
devoluciones	Proporciona la capacidad de devoluciones de orden de venta. El punto de entrada devuelve el portlet.
perfil de cliente	Proporciona la posibilidad de ver los resultados de la búsqueda del cliente y los detalles del perfil del cliente. El punto de entrada es la búsqueda global de clientes y el portlet de búsqueda de clientes.
selección interna	Proporciona la capacidad de orden de recogida para tiendas habilitadas para Sterling Store Inventory Management (SIM). El punto de entrada es el portlet de orden de recogida.
envío-trastienda-recogida	Proporciona la capacidad de realizar pedidos de picking en la trastienda basada en el envío para las tiendas deshabilitadas para la Gestión de Inventario de Tiendas. El punto de entrada es el portlet de orden de recogida.
recogida por lotes	Proporciona la capacidad de recogida por lotes para las tiendas habilitadas para la Gestión de Inventario de Tiendas. El punto de entrada es el portlet de orden de recogida.
envío-lote-recogida	Proporciona capacidad de recogida por lotes basada en envíos para tiendas deshabilitadas para la Gestión de Inventario de Tiendas. El punto de entrada es el portlet de orden de recogida.
orden de embalaje	Proporciona la prestación de orden de embalaje. El punto de entrada es el portlet de orden de embalaje.
recogida por el cliente	Proporciona la capacidad de recogida del cliente. El punto de entrada es el portlet de recogida del cliente.
paquetes de envío	Proporciona capacidad de órdenes de envío. El punto de entrada es el portlet Enviar pedidos.
resumen de lista de envíos	Proporciona la lista de envíos y la capacidad de resumen de envíos. El punto de entrada es el portlet de búsqueda y búsqueda de envíos global.
recuento de ciclos	Proporciona la capacidad de recuento de ciclos. El punto de entrada a esta aplicación es del portlet de recuento de ciclos.
inventario de búsqueda	Proporciona la capacidad de búsqueda de inventario. El punto de entrada es del portlet de inventario de búsqueda.
mover-inventario	Proporciona la capacidad de mover inventario. El punto de entrada a esta aplicación es desde el portlet de mover inventario.
inventario de almacenaje	Proporciona la capacidad de inventario de almacenaje. El punto de entrada es del portlet de inventario de almacenaje.
inventario de transferencia	Proporciona la capacidad de inventario de transferencia y el punto de entrada procede del portlet de inventario de transferencia.
multigen	Ayuda a configurar ubicaciones en una tienda y se abre desde el menú de la aplicación utilizando la opción de menú Configuraciones .