Configurazione del server di sviluppo locale

Per caricare l'IU dell'applicazione in un ambiente di sviluppo, assicurarsi che le applicazioni micro - frontend e store - root - config siano in esecuzione.

Per consolidare l'esecuzione di tutte le applicazioni micro-frontend all'interno dell'applicazione Sterling Store Engagement, utilizzare le utility e gli script a riga di comando forniti. Gli script e i programmi di utilità della linea di comando si basano su app-config.json, che descrive la root di contesto, le porte e così via, per tutte le applicazioni di micro - frontend. Consente inoltre alcuni instradamenti a un server remoto che consente agli sviluppatori di scegliere l'applicazione che si desidera eseguire localmente.

Gli sviluppatori possono scegliere di servire le applicazioni di micro - frontend da un server remoto invece di eseguire localmente. Come sviluppatore, è possibile configurare l'istanza del toolkit sviluppatori locale o l'istanza del cloud di sviluppo o QA come server remoto. Se il server remoto è abilitato a HTTPS, viene stabilita una connessione sicura al server utilizzando il file di certificato p12 configurato e la password del certificato. Configurando il server remoto, è possibile scegliere gli instradamenti appropriati o le applicazioni micro - frontend da utilizzare da un server locale e da un server remoto. Dopo aver generato e scaricato il certificato client, configurare il percorso del certificato client nel file app-config-overrides.json . Per ulteriori informazioni sulla generazione e il download del certificato client, vedere Generazione di certificati client.

Se si utilizza la versione 17+ di node.js, impostare la seguente variabile d'ambiente.

export NODE_OPTIONS=--openssl-legacy-provider

Nota: nel toolkit dello sviluppatore locale o nell'istanza cloud, assicurarsi che l'OIDC ( OpenID Connect) o SSO (Single Sign - On) non sia abilitato per l'utilizzo come server remoto.

Il seguente esempio di codice illustra il file 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"
      }
    }
}}

Ogni root dell'applicazione micro - frontend package.json fornisce lo script, yarn start-app per avviare l'applicazione della funzione. Come sviluppatore, puoi sovrascrivere app-config.json fornendo app-config-overrides.json per eseguire le applicazioni micro - frontend nelle seguenti modalità:

Per eseguire alcune applicazioni di micro - frontend localmente, completa la seguente procedura:
- Copia e incolla l'applicazione micro - frontend o il nome instradamento dal file app-config.json all'oggetto routes in app-config-overrides.json.
- Per il nome dell'applicazione, impostare useRemote=false.
- Impostare serveAllAppsFromLocal=false per garantire che le restanti applicazioni micro - frontend vengano fornite da un server remoto configurato nell'oggetto remoteServerConfig .
Per eseguire tutte le applicazioni micro - frontend localmente, imposta "serveAllAppsFromLocal": true in app-config-overrides.json. In questo caso, l'indicatore useRemote per le singole applicazioni micro - frontend e le configurazioni del server remoto viene ignorato.
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.

Il comando yarn start-app analizza app-config-overrides.json e avvia localmente le applicazioni micro - frontend, configurate come "useRemote": false. Le applicazioni micro - frontend non elencate in app-config-overrides.json o con useRemote: true vengono servite da un server remoto configurato nell'oggetto remoteServerConfig nel file app-config-overrides.json .

Nota: se si imposta useRemote: true, si consiglia di avviare il browser Google Chrome in modalità di sicurezza Web disabilitata. Questo per garantire che il browser non blocchi le richieste HTTP di origine incrociata inviate al server dell'applicazione remota dall'applicazione locale.

Per Windows, eseguire il seguente comando:

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

Per Mac, esegui questo comando:

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

Il seguente esempio di codice illustra 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
          }
    }
}

Le seguenti tabelle definiscono lo schema JSON di app-config.json e app-config-overrides.json:

Tabella 1.app-config.json definizione dello schema
Elemento o attributo	Descrizione
Nome	Nome dell'applicazione del negozio.
`"devServerConfig":{ "port":1111, "contextRoot":"/isf/store-frontend" }`	La configurazione del server di sviluppo al livello root indica il numero di porta e la root di contesto utilizzati dall'applicazione root di archivio. `port`: il numero di porta dell'applicazione root del negozio. Supporta solo valori numerici. `contextRoot`: specifica la root di contesto dell'applicazione root del negozio. Supporta solo valori stringa.
`"remoteServerConfig": { "hostName": "store-dev.oms.supply-chain.ibm.com", "port": 443, "https": true, "options": { "pfx":"/path/to/certificate.p12", "passphrase":"<password>" } }`	La configurazione del server remoto utilizzata per servire le applicazioni angolari da un server remoto. Questa configurazione consente agli sviluppatori di eseguire specifiche applicazioni angolari in locale, e le restanti da servire da un server remoto. Il server remoto potrebbe essere l'istanza OMS DTK o le istanze cloud di sviluppo o QA con un certificato e una password validi configurati in `app-config-overrides.json`. Gli sviluppatori possono configurare l'istanza OMS DTK o l'istanza cloud QA o di sviluppo come server remoto. hostName: Nome host o indirizzo IP del server remoto. Supporta solo il valore stringa. port: indica il numero di porta del server remoto. Supporta solo valori numerici. https: Indica se il protocollo HTTPS è utilizzato nel server remoto. Supporta solo valori booleani. -opzioni: Questo oggetto è obbligatorio quando un server remoto utilizza il protocollo HTTPS. options.pfx: Il percorso del certificato p12 . Per ulteriori informazioni sulla generazione e il download del certificato client, vedere Generazione di certificati client. options.passphrase: la parola d'ordine del certificato. Configurare questi attributi solo nel file `<store-temp>/app-config-overrides.json` .
`serveAllAppsFromLocal: true\|false`	Indica se tutte le applicazioni angolari specificate in `<store-temp>/app-config.json` e `<store-temp>/app-config-overrides.json` devono essere avviate e fornite da un'istanza locale. Quando questo indicatore è impostato su true, l'indicatore `useRemote` configurato per una singola applicazione angolare viene ignorato. Questo indicatore supporta solo il valore boolean e deve essere configurato solo nel file `<store-temp>/app-config-overrides.json` .
`"routes":{ ... "login":{ "useRemote":"true\|false "devServerConfig"":{ "port":4200, "contextRoot":"login" } }, ... }`	Contiene l'elenco di configurazioni di applicazioni angolari abilitate per singola spa. Ciascuna configurazione dell'applicazione include le seguenti proprietà: `port`: numero di porta in cui l'applicazione angolare viene fornita localmente. Supporta solo valori numerici. `contextRoot`: specifica la root di contesto dell'applicazione angolare. Supporta solo valori stringa. `useRemote`: indicatore per indicare se l'applicazione deve essere servita da un server remoto o locale. Supporta solo valori booleani. Per servire l'applicazione angolare fornita dall'applicazione da un server remoto, definisci la seguente configurazione nel file `<store-temp>/app-config-overrides.json` . Assicurarsi di copiare il nome esatto dell'applicazione. `routes: { "login": { "useRemote": true } }`

La tabella riportata di seguito fornisce l'elenco di dettagli dell'applicazione angolare abilitata per la singola spa fornita dall'applicazione:

Tabella 2. Le rotte fornite dalle applicazioni o le applicazioni micro-frontend configurate in app-config.json
Nome applicazione	Descrizione
shell - app	Inizializza l'applicazione di archiviazione con tutti i dati di configurazione necessari per il funzionamento. Il `app-shell` viene caricato in una modalità headless e non è visibile nell'IU. Non è possibile personalizzare questa applicazione.
barra di navigazione	barra di navigazione
accesso	Fornisce la funzione di accesso.
pagina iniziale	Fornisce la funzionalità della home page, che visualizza i portlet per diverse persone.
ordini	Fornisce la funzione correlata a un'entità dell'ordine di vendita, ad esempio l'elenco degli ordini, il riepilogo degli ordini, l'acquisizione degli ordini e la pacificazione dei clienti degli ordini. I punti di immissione sono la ricerca di ordini globali, il portlet di ricerca ordini e il portlet di verifica rapida.
restituisce	Fornisce la funzione di reso degli ordini di vendite. Il punto di ingresso restituisce il portlet.
profilo cliente	Fornisce la funzionalità per visualizzare i risultati della ricerca del cliente e dettagli del profilo del cliente. Il punto di ingresso è il portlet Ricerca e trova cliente globale.
ritiro dal magazzino	Fornisce la funzionalità dell'ordine di ritiro per i negozi abilitati a Sterling Store Inventory Management (SIM). Il punto di ingresso è il portlet dell'ordine di ritiro.
spedizione - magazzino - ritiro	Fornisce la funzionalità di ordine di prelievo dal retrobottega basata sulla spedizione per i negozi disabilitati alla gestione dell'inventario. Il punto di ingresso è il portlet dell'ordine di ritiro.
prelievo in batch	Fornisce la capacità di prelievo in batch per i negozi abilitati alla gestione dell'inventario. Il punto di ingresso è il portlet dell'ordine di ritiro.
spedizione - lotto - ritiro	Fornisce una capacità di prelievo in batch basata sulle spedizioni per i negozi disabilitati dalla gestione dell'inventario. Il punto di ingresso è il portlet dell'ordine di ritiro.
ordine di imballaggio	Fornisce la funzione di ordine del pacco. Il punto di ingresso è il portlet dell'ordine dei pacchetti.
ritiro dal cliente	Fornisce la funzionalità di ritiro del cliente. Il punto di ingresso è il portlet ritiro dal cliente.
pacchi di spedizione	Fornisce la funzione di spedizione degli ordini. Il punto di ingresso è il portlet degli ordini di spedizione.
riepilogo - elenco - spedizione	Fornisce l'elenco di spedizioni e la funzionalità di riepilogo delle spedizioni. Il punto di entrata è il portlet Ricerca spedizione globale e trova spedizioni.
conteggio ciclo	Fornisce la funzione di conteggio cicli. Il punto di ingresso a questa applicazione è dal portlet conteggio cicli.
ricerca - inventario	Fornisce la funzione di ricerca inventario. Il punto di ingresso è dal portlet di inventario di ricerca.
sposta - inventario	Fornisce la funzione di spostamento inventario. Il punto di ingresso per questa applicazione proviene dal portlet di spostamento inventario.
inventario accantonamento	Fornisce la funzione di inventario di accantonamento. Il punto di ingresso proviene dal portlet di inventario di accantonamento.
inventario - trasferimento	Fornisce la funzione di trasferimento dell'inventario e il punto di ingresso è dal portlet di trasferimento dell'inventario.
Configurazioni	Consente di configurare le ubicazioni in un negozio e viene aperto dal menu dell'applicazione utilizzando l'opzione di menu Configurazioni .