Zum Hauptinhalt springen

Globale Konfiguration

Globale Konfiguration für eine Anwendung verwenden​

Sie können globale Werte in einer zentralen Konfigurationsdatei speichern. Ein Beispiel ist src/config/config.json.

Konfigurationsverzeichnis ändern​

  1. Fügen Sie den gewünschten Wert zu src/config/config.json oder einer neuen Konfigurationsdatei unter src/config/ hinzu: 
    {
      "storybookUrl": "https://storybook.guidewire.com"
    }
  2. Verwenden Sie den Wert in der Anwendung: 
    import { getConfigValue } from '@jutro/config';
    . . .
    <Link href={getConfigValue('storybookUrl')} icon="gw-code" />

Neue Konfigurationsdatei hinzufügen und direkt Werte daraus abrufen​

  1. Fügen Sie eine Konfigurationsdatei im Konfigurationsordner hinzu, z. B. src/config/urlConfig.json.
  2. Fügen Sie den Wert in der Konfigurationsdatei hinzu: 
    {
      "storybookUrl": "https://storybook.guidewire.com"
    }
  3. Verwenden Sie den Wert in der Anwendung: 
    import urlConfig from './config/urlConfig';
    . . .
    <Link href={urlConfig.storybookUrl} icon="gw-code" />
Note: Beim Aufrufen von getConfigValue können Sie einen defaultValue-Wert angeben, der übernommen wird, wenn in den Konfigurationsdateien kein Wert enthalten ist.

Umgebungsvariablen überschreiben​

Sie können die Umgebungsvariablen für die Anwendung überschreiben. Die Umgebung wird dadurch nicht aktualisiert.

  1. Erstellen Sie eine .env-Datei im Stamm der Jutro-Anwendung.
  2. Fügen Sie den Wert mit einem REACT_APP_-Präfix hinzu, beispielsweise: 
    REACT_APP_JAVA_HOME=/usr/bin/java25
  3. Lesen Sie den Wert in der Anwendung: 
    const javaHome = process.env.JAVA_HOME;
Note: Mit dieser Funktion können Konfigurationswerte überschrieben werden. Wenn Sie z. B. Folgendes festlegen:
`REACT_APP_storybookUrl=overridden`

gibt getConfigValue('storybookUrl') den Wert overridden zurück.

Wenn Sie SAFE_ENV=true zu Ihrer .env-Datei hinzufügen, sind nur Variablen zulässig, die mit JUTRO_ oder REACT_APP_ beginnen. Dies entspricht den Praktiken in Zusammenhang mit den Umgebungsvariablen in der React-Anwendung.

Ladereihenfolge von Umgebungsvariablen​

Die Funktion loadConfiguration kann verwendet werden, um den Wert einer Umgebungsvariablen während der Laufzeit festzulegen, zum Beispiel:

import { loadConfiguration, getConfigValue } from '@jutro/config';

loadConfiguration({ SAMPLE_ENV_VARIABLE: 'value' });
console.log(getConfigValue('SAMPLE_ENV_VARIABLE'));
// "value" is printed to console

Die in Ihrer .env-Datei definierten Umgebungsvariablenwerte haben jedoch Vorrang vor den von der Funktion loadConfiguration festgelegten Werten. Das bedeutet, dass Sie den Wert neuer Variablen festlegen können, aber die Werte von in Ihrer .env-Datei festgelegten Build-Zeit-Variablen mit dieser Funktion nicht geändert werden können.

Um die Konfigurationspriorität zu ändern, können Sie JUTRO_NEW_CONFIG_LOADING_ORDER=true in Ihrer Umgebung angeben. Wenn diese Option aktiviert ist, hat der mit der Methode loadConfiguration während der Laufzeit geladene Wert Vorrang vor Ihrer .env-Datei.

startApp.js konfigurieren​

startApp.js bewirkt Folgendes:

  1. Lädt Google Analytics.
  2. Lädt UI-Zeichenfolgen für die ausgewählte Sprache (react-intl-Meldungen).
  3. Ruft start aus dem @jutro/app-Modul auf. Die start-Methode rendert die Komponente ApplicationRoot

start()​

Rendert die Jutro-Komponente ApplicationRoot.

  • Das erste Argument ist die Anwendung, die innerhalb von ApplicationRoot gerendert wird.
  • Das zweite Argument ist ein Objekt mit Eigenschaften zum Konfigurieren der Anwendung und der Komponente ApplicationRoot.

Sie können ApplicationRoot nicht als solches verwenden. Sie können es nur mithilfe von Eigenschaften konfigurieren, die im zweiten Argument übergeben werden. Im folgenden Beispiel werden sie als ...appProps übergeben.

start(Jutro, {
    rootId: 'root',
    config: [config, { 'dynamic-param': 'World' }]
    messageLoader: loadMessages,
    ...appProps // properties to pass to `ApplicationRoot`
});

React Strict Mode​

Der React Strict Mode ist eine native React-Komponente, die zusätzliche Prüfungen ausführt, wenn sie in einer Entwicklungsumgebung aktiviert ist, und Ihnen hilft, häufig auftretende Fehler in Ihren Komponenten zu finden. Dies bietet die folgenden Vorteile:

  • Es prüft Ihre Komponenten auf die Verwendung veralteter APIs
  • Die Komponenten werden erneut gerendert, um Komponenten zu finden, die ihr Verhalten beim zweiten Rendern unbeabsichtigt ändern
  • Es wird ein zusätzlicher Einrichtungs- und Bereinigungszyklus für alle Effekte in Ihrem Code erneut ausgeführt

Um den React Strict Mode zu aktivieren, fügen Sie .env der Datei JUTRO_REACT_STRICT_MODE=true hinzu.

Für bereits vorhandene Anwendungen ist der Strict Mode nicht standardmäßig aktiviert. Bei allen neuen Jutro-Apps, die aus einer Jutro-App-Vorlage erstellt werden, wird die Umgebungsvariable in der .env-Datei aktiviert.

Wenn JUTRO_REACT_STRICT_MODE=true in der .env-Datei im Stammverzeichnis einer Jutro-Anwendung festgelegt ist und die Anwendung in Nicht-Produktionsumgebungen im Entwicklermodus ausgeführt wird, wird in der start.js-Funktion der App die folgende Prüfung ausgeführt:

const isReactStrictMode = process.env.JUTRO_REACT_STRICT_MODE;
reactRoot.render(
  isReactStrictMode ? (
    <StrictMode>{WrappedComponent}</StrictMode>
  ) : (
    WrappedComponent
  )
);

Wenn der React Strict Mode in einer Jutro-Anwendung aktiviert ist, wird die gesamte Anwendung so behandelt, als wäre sie von <StrictMode>-Tags umschlossen.

rootId​

Übergeben Sie die ID des Elements, das als HTML-Stamm in public\index.html verwendet werden soll. Die React-Anwendung wird innerhalb dieses Elements gerendert.

loaderComponent​

Legt die Komponente fest, die beim Laden der Anwendung angezeigt wird. Sie ersetzt den Standard-Loader. Zum Beispiel:

import { Loader } from '@jutro/components';
//. . .
const MyLoader = ({ loaded, children }) => {
  if (!loaded) {
    return (
      <div>
        <h1>{'LOADING...'}</h1>
        <Loader />
      </div>
    );
  }

  return children;
};
//. . .
start(Jutro, {
  //. . .
  loaderComponent: MyLoader,
});

onInit​

Legt die Funktion fest, die zum Initialisieren der Anwendung verwendet werden soll. Hilfreich für jede Initialisierungslogik, die ausgeführt werden muss, z. B. das Laden eines erforderlichen Dienstes.

onRender​

Legt die Rückruffunktion fest, die nach dem Rendern der Anwendung aufgerufen werden soll.

config​

Lädt die Anfangskonfiguration. Kann zum Laden von Konfigurationsdateien und Konfigurieren von benutzerdefinierten Parametern verwendet werden. Zum Beispiel:

import config from 'envConfig';
//. . .
start(Jutro, {
    //. . .
    config: [config, { 'dynamic-param': 'World' }];
});

ApplicationRoot​

Die Wrapper-Komponente, die von der start-Methode gerendert wird. Sie kann nicht direkt verwendet werden, sondern nur über das zweite Argument der Funktion start konfiguriert werden.

Sie umschließt die Anwendung in allen Komponenten, die für Folgendes erforderlich sind:

  • Loader anzeigen
  • Umwandlungen verwalten (GlobalizationProvider)
  • Barrierefreiheitskomponenten rendern (Helmet)
  • Routing verwalten (Router)
  • Authentifizierung verwalten (AuthProvider)

Zum Beispiel:

start(RatingApp, {
  messageLoader: loadMessages,
  appName: messages.appName,
  appDescription: messages.appDescription,
  rootHOCs: [(body) => <Provider store={store}>{body}</Provider>],
});

Folgende Eigenschaften werden unterstützt:

  • messageLoader: Die Funktion zum Laden von Gebietsschema-Nachrichten.
  • intlTextComponent: Ein Tag zum Rendern von i18n-Meldungen, z. B. "span". Standardmäßig wird React.Fragment verwendet.
  • errorBoundary: Das React-Element, das als „Catch-All“-Fehlergrenze für die Anwendung dient.
  • Router: Der zu verwendende Router (BrowserRouter oder MemoryRouter).
  • routerHistory - routerHistory: Wenn die Eigenschaft nicht übergeben wird, wird BrowserHistory konfiguriert. In einer Testumgebung wird MemoryHistory konfiguriert.
  • routerBasename: Die Basis-URL für alle Speicherorte. Wenn Sie die Anwendung aus einem Unterverzeichnis auf Ihrem Server bereitstellen, sollten Sie diese auf das Unterverzeichnis festlegen. Ein ordnungsgemäß formatierter Basisname muss mit einem Schrägstrich beginnen, darf aber nicht mit einem Schrägstrich enden. Diese können Sie über die UmgebungsvariableJUTRO_ROUTER_BASENAME (oder über REACT_APP_JUTRO_ROUTER_BASENAME in der .env-Datei) konfigurieren.
  • authErrorComponent: Das React-Element, das anstelle des Jutro-Standardelements gerendert wird, wenn bei der Authentifizierung ein Fehler auftritt. Diese Komponente erhält eine Eigenschaft: error.
  • appName: akzeptiert ein IntlMessageShape-Objekt. Wird im Seitentitel verwendet.
  • appDescription: akzeptiert ein IntlMessageShape-Objekt. Wird als Wert von content im <meta name="description" />-Tag verwendet.
  • rootHOCs: Eine rootHOC oder ein Array von rootHOCs, die ApplicationRoot umschließen, um Kontext in die Anwendung zu übergeben.
Note: Die Eigenschaft rootHOC nimmt keine true HOC (Higher-Order Component, Komponente höherer Ordnung) an, wie von React definiert, kann aber eine eingeschränktere Version annehmen, die sich ähnlich verhält. Der Unterschied besteht darin, dass rootHOCs auf ein einziges Argument beschränkt sind, das ein React.ReactNode-Typ sein muss.

Dies ist z. B. ein einfaches HOC, um das Argument mit einem div zu umschließen, der kein gültiger Wert für die Eigenschaft rootHOCs ist:

const withDivHOC = (Component: React.ComponentType) => {
  const Wrapper = (props) => (
    <div>
      <Component {...props} />
    </div>
  );
  return Wrapper;
};

Dies ist ein gültiger Wert:

const withDivJutroRootHOC = (node: React.ReactNode) => {
  return <div>{node}</div>;
};
Note:

Die @jutro/auth Abhängigkeit ist nun optional für @jutro/router und @jutro/components Pakete. Allerdings erfordert ApplicationRoot component jetzt, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt werden, um verwendet werden zu können.