Mit Headless Oracle Content Management eine minimale Site in React erstellen

Einführung

React ist ein JavaScript-Framework, das häufig zum Erstellen von Webanwendungen verwendet wird.

Um unseren Oracle Content Management-Inhalt in einer React-Anwendung zu nutzen, können Sie das minimal verfügbare React-Beispiel als Open-Source-Repository auf GitHub verwenden.

In diesem Tutorial erstellen wir eine einfache minimale Site in React, indem wir Oracle Content Management als Headless-CMS sowie sein Software Development Kit (SDK) für die Bereitstellung von Inhalten in JavaScript nutzen. Oracle Content Management unterstützt auch GraphQL für alle veröffentlichten Inhalte und alle Assettypen. Dieses React-Beispiel ist unter GitHub verfügbar.

Das Tutorial besteht aus drei Aufgaben:

Oracle Content Management vorbereiten
Erstellen Sie die minimale Site in React
Anwendung für Deployment vorbereiten

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst die folgenden Informationen lesen:

Um diesem Tutorial zu folgen, benötigen Sie:

Oracle Content Management-Abonnement
Oracle Content Management-Account mit der Rolle "Content Administrator"
ein Windows- oder Mac-Computer mit Knotenversion 10 oder höher

Was wir bauen

Mit React minimal können Sie ganz einfach Bilder und andere Inhalte aus Ihrem Oracle Content Management-Repository abrufen.

Hier finden Sie den Endstatus unseres Tutorials, einer einfachen minimalen React-Website, die Inhalte von Oracle Content Management konsumiert:

https://headless.mycontentdemo.com/samples/oce-react-minimal-sample

So sieht die Homepage am Ende dieses Tutorials aus:

Diese Abbildung zeigt eine Landingpage für eine minimale React-Site.

So sieht die Kontaktseite am Ende dieses Tutorials aus:

Diese Abbildung zeigt die Kontaktseite für eine minimale React-Website.

So sieht die Personen-Seite am Ende dieses Tutorials aus:

Diese Abbildung zeigt die Kontaktseite für eine minimale React-Website.

Um fortzufahren, benötigen Sie ein aktives Abonnement für Oracle Content Management und müssen mit der Rolle "Content Administrator" angemeldet sein.

Aufgabe 1: Oracle Content Management vorbereiten

Wenn noch keine Oracle Content Management-Instanz vorhanden ist, finden Sie unter Schnellstart Informationen zur Registrierung für Oracle Cloud, zum Provisioning einer Oracle Content Management-Instanz und zum Konfigurieren von Oracle Content Management als Headless-CMS.

Für dieses Tutorial müssen Sie ein Contentmodell erstellen. Es ist ein herunterladbares Asset Pack verfügbar, das Ihr leeres Repository mit Inhaltstypen und zugehörigen Inhalten ausfüllt.

So bereiten Sie Oracle Content Management vor:

Erstellen Sie ein Kanal- und Asset-Repository.
Erstellen Sie ein Contentmodell mit einer der beiden folgenden Methoden:
- Methode 1: Oracle Content Management Samples Asset Pack importieren
- Methode 2: Eigenes Contentmodell erstellen

Channel- und Asset-Repository erstellen

Sie müssen zunächst einen Kanal und ein Asset-Repository in Oracle Content Management erstellen, damit Sie Inhalte veröffentlichen können.

So erstellen Sie einen Kanal und ein Asset-Repository in Oracle Content Management:

Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
Wählen Sie im linken Navigationsmenü Inhalt aus, und wählen Sie Kanäle veröffentlichen aus der Auswahlliste im Seitenheader aus.
Klicken Sie in der oberen rechten Ecke auf Erstellen, um einen neuen Channel zu erstellen. Benennen Sie den Kanal "OCEMinimalChannel" für dieses Tutorial, und halten Sie den Zugriff öffentlich. Klicken Sie auf Speichern, um den Channel zu erstellen.
Wählen Sie im linken Navigationsmenü Inhalt, und wählen Sie dann Repositorys aus der Auswahlliste im Seitenheader aus.
Klicken Sie in der oberen rechten Ecke auf Erstellen, um ein neues Asset-Repository zu erstellen. Benennen Sie das Asset-Repository "OCEMinimalRepository" für dieses Tutorial.
Wählen Sie im Feld Kanäle veröffentlichen den Kanal OCEMinimalChannel aus, um Oracle Content Management anzugeben, dass der Inhalt im Repository OCEMinimalRepository im Kanal OCEMinimalChannel veröffentlicht werden kann. Klicken Sie auf Speichern, wenn Sie fertig sind.

Contentmodelle erstellen

Im nächsten Schritt erstellen Sie ein Contentmodell. Sie können eine von zwei Methoden verwenden:

Methode 1: Oracle Content Management Samples Asset Pack importieren
Methode 2: Eigenes Contentmodell erstellen

Oracle Content Management-Beispielassetpaket importieren

Sie können ein vorkonfiguriertes Oracle Content Management-Beispielassetpaket mit allen erforderlichen Inhaltstypen und -assets für dieses Tutorial herunterladen. Falls gewünscht, können Sie auch ein eigenes Contentmodell erstellen, anstatt das Beispielassets-Pack herunterzuladen.

Sie können eine Kopie des in diesem Tutorial verwendeten Inhalts aus dem Oracle Content Management Samples Asset Pack hochladen. Dadurch können Sie mit den Inhaltstypen experimentieren und den Inhalt ändern. Wenn Sie das Oracle Content Management Samples Asset Pack importieren möchten, laden Sie das Asset Pack-Archiv OCESamplesAssetPack.zip herunter, und extrahieren Sie es in ein Verzeichnis Ihrer Wahl:

Laden Sie das Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) von der Oracle Content Management-Seite für Downloads herunter. Extrahieren Sie die heruntergeladene ZIP-Datei in einen Speicherort auf Ihrem Computer. Nach dem Extrahieren enthält dieser Speicherort eine Datei mit dem Namen OCEMinimal_data.zip.
Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
Wählen Sie im linken Navigationsmenü Inhalt, und wählen Sie dann Repositorys aus der Auswahlliste im Seitenheader aus. Wählen Sie jetzt OCEMinimalRepository aus, und klicken Sie in der oberen Aktionsleiste auf die Schaltfläche Inhalt importieren.
Laden Sie OCEMinimal_data.zip von Ihrem lokalen Rechner in den Ordner Dokumente hoch.
Wählen Sie nach dem Hochladen OCEMinimal_data.zip aus, und klicken Sie auf OK, um den Inhalt in das Asset-Repository zu importieren.
Nachdem der Inhalt erfolgreich importiert wurde, navigieren Sie zur Seite Assets, und öffnen Sie das Repository OCEMinimalRepository. Alle zugehörigen Bilder und Inhaltselemente wurden dem Asset-Repository hinzugefügt.
Klicken Sie oben links auf Alle auswählen und dann auf Veröffentlichen, um alle importierten Assets zum Veröffentlichungskanal hinzuzufügen, den Sie zuvor erstellt haben: OCEGettingStartedChannel.
Vor der Veröffentlichung müssen Sie alle Assets validieren. Fügen Sie zuerst OCEMinimalChannel als ausgewählten Channel hinzu, und klicken Sie dann auf die Schaltfläche Validieren.
Nachdem die Assets validiert wurden, können Sie alle Assets im ausgewählten Channel veröffentlichen, indem Sie oben rechts auf die Schaltfläche Veröffentlichen klicken.

Anschließend können Sie auf der Seite Anlagen sehen, dass alle Assets veröffentlicht wurden. (Sie können das Symbol über dem Assetnamen angeben.)

Diese Abbildung zeigt die Seite "Anlagen", auf der alle Anlagen abgelegt wurden.

Nachdem Sie das Oracle Content Management Samples Asset Pack importiert haben, können Sie mit dem Erstellen der minimalen Site in React beginnen.

Eigenes Contentmodell erstellen

Anstatt das Oracle Content Management Samples Asset Pack zu importieren, können Sie auch ein eigenes Contentmodell erstellen.

Für dieses Tutorial verwenden wir den Inhaltstyp "MinimalMain" als Hauptinhaltstyp für dieses Beispiel. Dieser Inhaltstyp besteht aus Header- und Footer-Logos sowie einer Liste von Seiten, die im Nav enthalten sein sollen.

Diese Abbildung zeigt die Homepage für das Beispiel "Minimal".

So erstellen Sie Inhaltstypen für das Contentmodell:

Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
Wählen Sie im linken Navigationsmenü Inhalt aus, und wählen Sie dann Assettypen aus der Auswahlliste im Seitenheader aus.
Klicken Sie oben rechts auf Erstellen.
Wählen Sie diese Option, um einen Inhaltstyp (kein digitaler Assettyp) zu erstellen. Wiederholen Sie diesen Vorgang für alle erforderlichen Inhaltstypen.

Diese Abbildung zeigt das Dialogfeld "Assettyp erstellen" in der Oracle Content Management-Webbenutzeroberfläche.

Wir erstellen fünf Inhaltstypen mit jeweils eigenen Feldern:

MinimalMain
MinimalPage
MinimalSection
PeoplePage
Person

Der erste Inhaltstyp, MinimalMain, muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Rechnername
headerLogo	Einzelwert-Medienfeld	headerLogo
footerLogo	Einzelwert-Medienfeld	footerLogo
Seiten	Mehrfachwert-Referenzfeld	Seiten

So sollte Ihre MinimalMain-Contenttypdefinition aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "MinimalMain". Sie enthält die folgenden Datenfelder: headerLogo, footerLogo, Seiten.

Der zweite Inhaltstyp, MinimalPage, muss das folgende Feld enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Abschnitte	Mehrfachwert-Referenzfeld		Abschnitte

So sollte der Inhaltstyp MinimalPage aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "MinimalPage". Es enthält dieses Datenfeld: Abschnitte.

Der dritte Inhaltstyp, MinimalSection, muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Typ	Einwertiges Textfeld	X	Typ
Überschrift	Einwertiges Textfeld		Überschrift
Hauptteil	Einzelwert-Großtextfeld		Hauptteil
Bild	Bildfeld mit einem Wert		Bild
Aktionen	Einwertiges eingebettetes Inhaltsfeld		Aktionen

So sollte der Inhaltstyp MinimalSection aussehen:

Diese Abbildung zeigt die Definition für den Inhaltstyp "MinimalSection". Sie enthält folgende Datenfelder: Typ, Überschrift, Text, Bild, Aktionen.

Der vierte Inhaltstyp, PeoplePage, muss die folgenden Felder enthalten:

Anzeigename	Feldtyp	Erforderlich	Rechnername
Mitteilung	Einzelwert-Referenzfeld		Mitteilung
Personen	Mehrfachwert-Referenzfeld		Personen

Der fünfte und letzte Inhaltstyp, Person, ist ein benutzerdefiniertes digitales Asset mit den folgenden Feldern:

Anzeigename	Feldtyp	Erforderlich	Rechnername
fullName	Einwertiges Textfeld	X	fullName
Titel	Einwertiges Textfeld		Titel
Biodata	Einzelwert-Großtextfeld		Biodata

Nachdem Sie die Inhaltstypen erstellt haben, können Sie diese Inhaltstypen dem zuvor erstellten Repository OCEMinimalRepository hinzufügen:

Melden Sie sich als Administrator bei der Oracle Content Management-Webbenutzeroberfläche an.
Navigieren Sie zu OCEMinimalRepository.
Bearbeiten Sie das Repository, und geben Sie unter Anlagentypen alle fünf neu erstellten Inhaltstypen an. Klicken Sie auf Speichern, um die Änderungen zu speichern.

Diese Abbildung zeigt die Seite "Repository bearbeiten" in Oracle Content Management mit den neu erstellten Inhaltstypen, die mit dem Repository OCEMinimalRepository verknüpft sind.

Nachdem Sie die Inhaltstypen zum Repository hinzugefügt haben, können Sie das Repository OCEMinimalRepository auf der Seite Assets öffnen und mit dem Erstellen der Inhaltselemente für alle Inhaltstypen beginnen.

Diese Abbildung zeigt Inhaltselemente auf der Seite "Anlagen" in der Oracle Content Management-Webbenutzeroberfläche mit Optionen auf der linken Seite für Sammlungen, Kanäle, Sprachen, Typen, Auswahl von Inhaltselementen und Status.

Aufgabe 2: Mindeststandort in React erstellen

Um unseren Oracle Content Management-Inhalt in einer serverseitigen, wiedergegebenen React-Anwendung zu nutzen, können wir das minimale React-Sitebeispiel verwenden, das als Open-Source-Repository in GitHub verfügbar ist.

Hinweis: Beachten Sie, dass die Verwendung des React-Beispiels optional ist und in diesem Tutorial für den schnellen Einstieg verwendet wird. Sie können auch Ihre eigene React-Anwendung erstellen.

So erstellen Sie die minimale Site in React:

Beispiel-Repository klonen und Abhängigkeiten installieren
React-Anwendung konfigurieren
Mit dem Oracle Content Management Content-SDK arbeiten
Content mit dem Content-SDK abrufen
Verwenden Sie GraphQL, um die Personenseite zu erstellen

Beispiel-Repository klonen und Abhängigkeiten installieren

Das React-Beispiel für minimale Sites ist als Open-Source-Repository auf GitHub verfügbar.

Zunächst müssen Sie das Beispiel von GitHub auf Ihren lokalen Rechner klonen und Ihr Verzeichnis in das Repository-Root ändern:

git clone https://github.com/oracle/oce-react-minimal-sample.git
cd oce-react-minimal-sample

Da Sie nun über Ihre Codebasis verfügen, müssen Sie Abhängigkeiten für die Anwendung herunterladen. Führen Sie den folgenden Befehl aus dem Root-Verzeichnis aus:

npm install

React-Anwendung konfigurieren

In diesem minimalen Seitenbeispiel "React" müssen Sie einige Informationen konfigurieren, damit das Oracle Content Management Content-SDK (und alle anderen Anforderungen) die richtige Instanz-URL und API-Version mit dem richtigen Kanaltoken als Ziel festlegen kann. Diese Werte werden in src/scripts/server-config-utils.js verwendet, um einen neuen Zustellungsclient zu instanziieren.

Diese Anwendung verwendet eine ENV-Datei, die von Webpack gelesen wird, wenn sie die Client- und Serveranwendungen bündelt. Mit webpack.DefinePlugin können alle aus der .env-Datei gelesenen Werte überall in der Anwendung verfügbar gemacht werden.

Öffnen Sie die .env-Datei in einem Texteditor. Folgendes wird angezeigt:

# The connection details for the Oracle Content Management server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

Ändern Sie jedes Schlüssel/Wert-Paar, um die Instanz-URL, die gewünschte API-Version und das mit Ihrem Veröffentlichungskanal verknüpfte Kanaltoken anzugeben. Der Kanal für dieses Tutorial ist OCEMinimalChannel.

Mit dem Oracle Content Management Content-SDK arbeiten

Oracle Content Management bietet ein SDK für die Erkennung und Verwendung von Inhalten in Ihren Anwendungen. Das SDK wird als NPM-Modul veröffentlicht, und das Projekt wird auf GitHub gehostet.

Weitere Informationen zum SDK finden Sie hier.

Das SDK wurde als Laufzeitabhängigkeit dieses Projekts in der Datei package.json registriert.

Content mit dem Content-SDK abrufen

Jetzt können wir das Content-SDK nutzen, um Inhalte abzurufen und in unserer React-Anwendung wiederzugeben.

Das Content-SDK verwendet ein DeliveryClient-Objekt, um den Endpunkt anzugeben. Sie können alle Anforderungen mit diesem Clientobjekt erstellen.

Der Ordner src/scripts enthält den Code zum Abrufen von Daten aus Oracle Content Management mit dem Content-SDK.

Die Datei src/scripts/server-config-utils.js importiert das Content SDK und erstellt dann einen Zustellungsclient mit der in .env angegebenen Konfiguration.

Der folgende Befehl importiert das SDK:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

Der folgende Befehl erstellt den Zustellungsclient:

return createDeliveryClient(serverconfig);

Die Datei src/scripts/services.js enthält Funktionen zum Abrufen der Daten für diese minimale React-Anwendung.

Die Methode fetchOceMinimalMain() ruft den Inhaltstyp MinimalMain mit einem Adressnamen von minimalmain ab.

export async function fetchOceMinimalMain() {
  const data = await getItem('minimalmaingraphql', 'fields.headerlogo,fields.footerlogo,fields.pages');
  if (!data.hasError) {
    const { fields } = data;
    const { headerlogo, footerlogo } = fields;
    // Extract the sourceset for the headerImage and footerImage and put it back in the data
    data.headerRenditionURLs = getSourceSet(headerlogo);
    data.footerRenditionURLs = getSourceSet(footerlogo);
  }
  return data;
}

Hinweis: Die obige Abfrage bezieht sich auf ein Asset mit dem Adressnamen "minimalmaingraphql", der die Seite "Personen" des Typs "Personen" enthält. Um die minimale Site ohne die Seite "Personen" zu erstellen, kann stattdessen ein Asset mit dem Adressnamen "minimalmain" im Asset Pack verwendet werden.

Zur Wiedergabe der Images stellt services.js eine Helper-Methode bereit, mit der das Quellset für ein Asset abgerufen werden kann, das aus den Wiedergaben für das Asset erstellt wird.

function getSourceSet(asset) {
  const urls = {};
  urls.srcset = '';
  urls.jpgSrcset = '';
  if (asset.fields && asset.fields.renditions) {
    asset.fields.renditions.forEach((rendition) => {
      addRendition(urls, rendition, 'jpg');
      addRendition(urls, rendition, 'webp');
    });
  }
  // add the native rendition to the srcset as well
  urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
  urls.native = asset.fields.native.links[0].href;
  urls.width = asset.fields.metadata.width;
  urls.height = asset.fields.metadata.height;
  return urls;
}

Die Methode fetchPage() ruft den Inhaltstyp MinimalPage mit dem Adressnamen für die Seite ab, die aus der vorherigen Abfrage abgerufen wurde.

export async function fetchPage(pageslug) {
  // Get the page details
  const page = await getItem(pageslug, 'fields.sections');
  return page;
}

Die Methode getRenditionURLs() ruft die Wiedergabe-URLs für jedes Image ab, das in einem Abschnitt mit der ID für dieses Image definiert werden kann. Dieser Aufruf erfolgt auf Clientseite.

export function getRenditionURLs(identifier) {
  const client = getClient();
  return client.getItem({
    id: identifier,
    expand: 'fields.renditions',
  }).then((asset) => getSourceSet(asset))
    .catch((error) => logError('Fetching Rendition URLs failed', error));
}

Seite "Personen" mit GraphQL erstellen

Wir verwenden den Apollo-Client in package.json, um GraphQL in React und die Methode fetchPeople in src/scripts/services-graphql.js zu integrieren, um den Aufruf von GraphQL an den Content Server zu tätigen.

Weitere Informationen zur Aufnahme von GraphQL-Support in Oracle Content Management finden Sie im Tutorial GraphQL mit React und Oracle Content Management verwenden.

Nachdem wir unsere Datenabfrage abgeschlossen haben, können wir die Antworten in den React-Komponenten wiedergeben.

Clientseitiges und serverseitiges Rendering - Vergleich

Beim clientseitigen Rendering (CSR) ist der Client für das Erstellen und Rendering des Inhalts einer Webseite mit JavaScript verantwortlich. Beim serverseitigen Rendering (SSR) wird die Seite auf dem Server erstellt, und eine Webseite wird an den Client zurückgegeben.

Wenn die Webseite vom Server im clientseitigen Rendering angefordert wird, enthält das zurückgegebene HTML-Dokument Skeleton-HTML und keinen tatsächlichen Inhalt. Sie enthält eine Referenz auf ein JavaScript-Bundle, das der Client dann vom Server anfordert. Nach Erhalt dieses Bundles führt der Client JavaScript aus und füllt die Webseite auf. Bis der Client die Ausführung von JavaScript abgeschlossen hat, ist alle angezeigten Benutzer eine leere Webseite. Ein Nachteil der clientseitigen gerenderten Anwendungen besteht darin, dass, wenn einige Web-Crawler die Site indexieren, kein tatsächlicher Inhalt zum Indexieren vorhanden ist.

Beim serverseitigen Rendering (SSR) wird die Seite auf dem Server erstellt, und eine Webseite wird an den Client zurückgegeben. Der Vorteil ist, dass Web-Crawler den Inhalt auf der Webseite indexieren können.

Minimal-Siteanwendungsablauf reaktivieren

Der Ablauf der minimalen React-Siteanwendung ist wie folgt:

Der Client fordert den Server für eine bestimmte Route an.
Der Express-Server empfängt die Anforderung.
Der Express-Server führt dann die folgenden Aufgaben aus:
1. Er bestimmt, welche Komponenten für die angegebene Route wiedergegeben werden, und ruft die Funktion fetchInitialData der Komponente auf, um alle Daten für diese Komponente abzurufen.
2. Es wird eine Zeichenfolge des gesamten zu rendernden Inhalts erstellt. (Jede Komponente wird aufgefordert, das HTML-Markup zu erstellen.)
3. Es wird ein HTML-Dokument erstellt, das die folgenden Elemente enthält:
  - Die Zeichenfolge des anzuzeigenden Inhalts
  - Link zu einem Stylesheet, falls zutreffend
  - Ein Skripttag mit dem Client-bundle.js, den der Client benötigt
  - Die Daten, die aus allen Komponenten abgerufen werden und als JSON serialisiert werden
4. Der Server gibt dann die HTML an den Client zurück.
Der Client erhält die HTML und gibt sie wieder. Dem Benutzer wird eine vollständig formatierte Webseite angezeigt.
Die JavaScript in der HTML speichert die Daten im Webbrowserfenster auf dem Client.
Der Client fordert die Client-bundle.js-Datei vom Server an. Nach Erhalt führt der Client JavaScript im Bundle aus.
- Es "hydratisiert" die HTML und fügt sie in jedem clientseitigen JavaScript hinzu, wie etwa Ereignis-Listener.
- Für jede wiedergegebene Komponente wird angezeigt, ob ihre Daten im Fenster gespeichert sind. Wenn ja, werden diese Daten verwendet. Andernfalls ruft die Komponente die benötigten Daten ab, indem sie über das Content-SDK Anforderungen an den Oracle Content Management-Server sendet.
Wenn das HTML-Dokument ein Stylesheet enthält, fordert der Client das Stylesheet an.

Wenn Sie die Quelle der Webseite anzeigen, werden alle Inhalte in HTML angezeigt, was darauf hinweist, dass die Seite auf dem Server wiedergegeben wurde.

Hinweis: Diese Beispielanwendung ruft die Daten in den Root-Komponenten ab und übergibt die Daten dann an alle untergeordneten Komponenten, die sie benötigen. Alternativ können Sie ein Statusmanagementtool wie Redux verwenden, das die Daten in einen Speicher stellt, und jede Komponente kann die Daten aus diesem Speicher anfordern.

Serverseitiger Express Server und Rendering

Die Serveranwendung verwendet einen Express-Server, um die Anforderung zu empfangen, eine React-Anwendungsinstanz zu generieren, die HTML-Seite zu generieren und die Antwort zurückzugeben.

Die Express-Serverdatei befindet sich unter src/server/server.js.

Der Express-Server akzeptiert alle Anforderungen und verwendet dann React's re-router-dom matchPath(), um die Komponente abzurufen, die für die angegebene Route gerendert wird. Dies wiederum würde die Methode fetchInitialData dieser Komponente aufrufen, um die Daten dieser Komponente abzurufen und eine Zusage zurückzugeben. Die Zusage wird ausgeführt, und ein Kontextobjekt wird erstellt, das die Daten enthält. Anschließend wird ein Renderer aufgerufen, um die HTML-Seite zu generieren, bevor der HTML-Inhalt an den Client zurückgegeben wird.

server.get('*', (req, res) => {
  // matchRoutes will return all the components which will be rendered as per the request route.
  // call "fetchInitialData" on each of those components (if the component has such a method),
  // and build up an array of pending network calls for all the data required for the components
  // which will be rendered.
  const promises = matchRoutes(Routes, req.path).map(({ route }) => (
    route.fetchInitialData ? route.fetchInitialData(req) : null));

  // Execute all promises at the same time to get all the data, once its all been obtained
  // render the HTML to the client by delgating to the "renderer" method
  Promise.all(promises).then((data) => {
    // this context object gets passed into the renderer, which in turn passes it
    // to the StaticRouter. The StaticRouter passes it to any component which is called
    // as the "staticContext" prop.
    const context = { data };

    // get the content to return to the client
    const content = renderer(req, context);

    // if the route requested was not found, the content object will have its "notFound"
    // property set, therefore we need to change the response code to a 404, not found
    if (context.notFound) {
      res.status(404);
    }

    if (context.url) {
      // If a redirect was set using a Redirect component do that
      res.redirect(301, context.url);
    } else {
      // send the response
      res.send(content);
    }
  });
});

Der Renderer befindet sich unter src/server/renderer.jsx und verwendet React's re-dom/server renderToString(), um eine Zeichenfolge des gesamten angezeigten Inhalts abzurufen.

// generate the HTML content for this application
const content = renderToString(
  <StaticRouter context={context} location={req.path} basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </StaticRouter>,
);

Das an den Renderer übergebene Kontextobjekt wird an den serverseitigen Router StaticRouter übergeben. Beim serverseitigen Rendering kann jede Komponente die Daten aus den Props der Komponente abrufen.

this.props.staticContext.data

Der Renderer gibt das HTML-Markup zurück, das den React-Inhalt, die serialisierten Daten und eine Referenz auf das JavaScript-Bundle enthält, das auf dem Client ausgeführt werden soll.

<body>
  <div id="root">${content}</div>
  <script>
    window.INITIAL_DATA = ${serialize(context.data)}
  </script>
  <script src="${clientBundleFile}"></script>
</body>

Wenn der Client die HTML empfängt, werden die Daten im Fenster zur Verfügung gestellt, und der Client fordert das Client-Bundle vom Server an.

Clientseitiges Rendering

Der clientseitige Renderingcode befindet sich in src/client/main.js. Dieser Code durchläuft den gesamten HTML-Code der Webseite und fügt jeden clientseitigen JavaScript-Code hinzu.

Dieser Prozess wird hydrieren genannt.

ReactDOM.hydrate(
  <BrowserRouter basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </BrowserRouter>,
  document.querySelector('#root'),
);

React-Komponenten

React verwendet eine als JSX bezeichnete Technologie, bei der es sich um eine HTML-ähnliche Syntaxerweiterung für JavaScript handelt, um Inhalte wiederzugeben. Obwohl Sie reine JavaScript schreiben können, um Daten aus Oracle Content Management wiederzugeben, wird dringend empfohlen, JSX zu verwenden.

Die minimale Siteanwendung unterteilt jede Seite in eine Reihe kleinerer Komponenten.

Die nächsten Abschnitte enthalten einen Überblick darüber, wie React unsere Anwendung in jeder unserer Komponenten wiedergibt:

Variable IS_BROWSER
Routendatei
App-Komponente
Seite (Komponente)
Header- und Footer-Komponenten
Abrechnungsteilbereiche (Komponente)
Personen
Personenkomponente
Fehlerkomponente

Variable IS_BROWSER

Webpack wird verwendet, um den Client- und Servercode zu bündeln. Es gibt eine Konfigurationsdatei, die Webpack anweist, wie jedes Bundle erstellt wird.

Öffnen Sie die Konfigurationsdatei für das Client-Bundle webpack.client.config.js. Am Ende der Datei wird eine Variable festgelegt, die angibt, dass die Anwendung in einem Browser ausgeführt wird.

new webpack.DefinePlugin({
  'process.env.IS_BROWSER': true,
}),

Öffnen Sie die Konfigurationsdatei für das Server-Bundle webpack.server.config.js. Am Ende der Datei wird dieselbe Variable eingestellt, um anzugeben, dass die Anwendung nicht in einem Browser ausgeführt wird. Auf die Variable IS_BROWSER kann von überall im React-Anwendungscode zugegriffen werden, um zu bestimmen, ob die Anwendung auf dem Server oder im Client gerendert wird.

Routendatei

Auf unserer Website bieten wir nur zwei Routen an. "/page/people" wird an die Personenkomponente weitergeleitet. Alle anderen Anforderungen werden an die Seitenkomponente weitergeleitet.

Alle Seiten haben eine Kopfzeile mit dem Firmenlogo und Links sowie eine Fußzeile mit einem Logo und Social Media-Symbolen.

Die Datei src/pages/Routes.js definiert die Routen für die Anwendung. Hier verwenden wir den Verteilungsoperator ES6 für die App, Seitenreferenzen. Der Grund dafür ist, dass die Importe für diese Artikel Objekte sind, die die Komponente und ihre Funktion fetchInitialData (sofern vorhanden) enthalten, und nicht nur die Komponente.

export default [
  {
    ...App,
    routes: [
      {
        ...People,
        path: '/page/people',
        exact: true,
        title: 'People',
      },
      {
        ...Page,
        path: '/page/:slug',
        exact: true,
        title: 'Page',
      },
    ],
  },
];

App-Komponente

Die App-Komponente ist die Hauptkomponente der Anwendung. Es umschließt die Routen, sodass jede Route in der Anwendung den Header und Footer erhält.

<div>
  <Header pages={data.fields.pages} headerRenditionURLs={data.headerRenditionURLs} />
  {isRoot ? (
    <Redirect to={{ pathname: `/page/${firstPageSlug}` }} />
  ) : (
    renderRoutes(route.routes)
  )}
  <Footer footerRenditionURLs={footerRenditionURLs} />
</div>

Die Komponenten für einzelne Routen sind die Seitenkomponente im Seitenverzeichnis.

Öffnen Sie die App-Komponente unter src/pages/App.jsx. Die Komponente importiert die API, um die Daten aus der Datei services.js abzurufen.

import { fetchOceMinimalMain } from '../scripts/services';

Die App-Komponente ruft die erforderlichen Daten ab und übergibt sie an die Header-, Footer- und Seitenkomponenten.

Der Konstruktor prüft, ob die Anwendung auf dem Client oder Server ausgeführt wird. Dabei wird die Variable process.env.IS_BROWSER verwendet, die in den Webpack-Bundling-Dateien festgelegt ist. Wenn die Komponente im Client gerendert wird, werden die Daten aus dem Fenster abgerufen.

Hinweis: Wenn eine Seite zu einem clientseitigen Routing navigiert wird, findet das serverseitige Rendering nicht statt. Stattdessen wird der Inhalt mit clientseitigem Rendering wiedergegeben. Daher enthält das Fenster keine Daten, und der Client muss einen Serveraufruf tätigen, um sie abzurufen.

Wenn die Komponente auf dem Server wiedergegeben wird, werden die Daten aus this.props.staticContext abgerufen, d.h. die Daten, die aus der Express Server-Datei übergeben werden. Die Daten bzw. Standardwerte werden dann im Status der Komponente gespeichert.

constructor(props) {
  super(props);

  let data;
  if (process.env.IS_BROWSER) {
    data = window.INITIAL_DATA;
    // Do not delete the data yet, as the Page component needs to read from it
  } else {
    const { staticContext } = this.props;
    data = staticContext.data;
  }

  this.state = {
    appData: data,
  };
}

Beim serverseitigen Rendering wird fetchInitialData aufgerufen, um die Daten vom Server abzurufen. Sie gibt eine Zusage an den aufrufenden Code, den Express Server-Code, zurück.

function fetchInitialData() {
  return fetchOceMinimalMain();
}

Wenn die Komponente wiedergegeben wird (siehe Methode Render()), werden alle Daten aus dem Status der Komponente abgerufen und an die Header-, Footer-Komponenten und die Seitenroute übergeben.

src/pages/App.jsx exportiert ein Objekt, das die Funktion fetchInitialData und die Komponente enthält.

export default {
  fetchInitialData,
  component: App,
};

Seitenkomponente

Die Seitenkomponente ist für die Darstellung aller Abschnitte verantwortlich, die für eine Seite definiert wurden.

Öffnen Sie die Seitenkomponente unter src/pages/Page.jsx.

fetchInitialData wird beim serverseitigen Rendering aufgerufen, um die Daten vom Server abzurufen.

function fetchInitialData() {
  const pageslug = req.path.split('/').pop();
  return fetchPage(pageslug);
}

componentDidUpdate prüft, ob sich der Pfadname des Standorts geändert hat, was auf eine Navigationsänderung hinweist, und ruft dann die Daten entsprechend ab.

componentDidUpdate() {
  const { pageSlug } = this.state;
  const { location } = this.props;
  const { pathname } = location;
  const newSlug = pathname.split('/').pop();
  if (pageSlug !== newSlug) {
    this.fetchData(newSlug);
  }
}

In der Methode Render() können Sie sehen, dass die anzuzeigenden Daten aus dem Status der Komponente abgerufen werden. Diese Daten enthalten eine Liste von Abschnitten, sodass die Methode Render() der Seitenkomponenten die Liste iteriert und die Abschnittskomponente für jeden Abschnitt in der Liste aufruft.

Wie die App-Komponente exportiert die Seitenkomponente ein Objekt mit der Funktion fetchInitialData und der Komponente.

export default {
  fetchInitialData,
  component:  Page,
};

Header- und Footer-Komponenten

Die Headerkomponente unter src/components/Header.jsx sowie die Footer-Komponente unter src/components/Footer.jsx verwenden einfach Daten, die von der App-Komponente an sie übergeben werden. Sie erhalten keine zusätzlichen Daten vom Server.

Abschnittskomponente

Die Abschnittskomponente unter src/components/Section.jsx wird von der Seitenkomponente verwendet und wird zur Wiedergabe von Inhaltselementen des Typs MinimalSection verwendet.

Diese Komponente hat Daten, die von der Seitenkomponente an sie übergeben wurden. Wenn die Abschnittsdaten ein Bild aufweisen, wird ein clientseitiger Aufruf durchgeführt, um die Wiedergabe-URLs für das Bild vom Server abzurufen.

useEffect(() => {
  if (!image || section.RenditionURLs) return;
  getRenditionURLs(image.id).then((urls) => {
    setRenditionURLs(urls);
  }, console.error);
}, [section]);

Personenkomponente

Die Komponente "Personen" ist für die Darstellung der Seite "Personen" verantwortlich und befindet sich unter src/pages/People.jsx.

Weitere Informationen zur Aufnahme von GraphQL Support in Oracle Content Management finden Sie in diesem Tutorial.

Personenkomponente

Die Komponente "Person" unter src/components/Person.jsx wird von der Komponente "Personen" verwendet und wird zur Wiedergabe aller Inhaltselemente des Typs "Person" verwendet.

Diese Komponente hat Daten, die von der Komponente "Personen" an sie übergeben wurden und keine zusätzlichen Aufrufe an den Server vornehmen müssen.

Fehlerkomponente

Die Fehlerkomponente unter src/components/Error.jsx wird von den Seiten- und App-Komponenten verwendet. Wenn beim Aufruf des Servers Fehler aufgetreten sind, werden diese wiedergegeben.

Aufgabe 3: Anwendung für Deployment vorbereiten

Nachdem wir unsere minimale React-Website erstellt haben, müssen wir sie auf einem lokalen Entwicklungsserver sehen, damit wir alle Probleme debuggen und eine Vorschau der Anwendung vor dem Go-Live anzeigen können.

Bereiten Sie die Anwendung in drei Schritten für das Deployment vor:

Anwendung mit Webpack erstellen
Anwendung mit Knoten ausführen
Anwendung mit Skripten in Entwicklungs- und Produktionsumgebungen erstellen und ausführen

Anwendung mit Webpack erstellen

Webpack wird verwendet, um die Anwendung zu bündeln. Dabei werden zwei JavaScript-Bundles erstellt: server-bundle.js, der auf dem Server ausgeführt wird, und client-bundle.js, das heruntergeladen und auf dem Client ausgeführt wird.

Die minimale React-Siteanwendung hat drei Webpack-Konfigurationsdateien:

webpack.base.config.js wird mit den Client- und Server-Webpack-Konfigurationen zusammengeführt.
webpack.client.config.js bündelt den Code für den Client.
webpack.server.config.js bündelt den Code für den Server.

Um das Client-Bundle zu erstellen, müssen Sie die Client-Webpack-Konfiguration angeben:

webpack --config webpack.client.config.js

Um das Server-Bundle zu erstellen, müssen Sie die Server-Webpack-Konfiguration angeben:

webpack --config webpack.server.config.js

Anwendung mit Knoten ausführen

Nachdem die Bundles erstellt wurden, können Sie den Server starten, indem Sie den folgenden Befehl ausführen:

node server.js

Anwendungen in Entwicklungs- und Produktionsumgebungen mit Skripten erstellen und ausführen

Die Datei package.json im Stammverzeichnis des Projekts enthält Skripte, mit denen das Erstellen der Bundles und das Ausführen der Anwendung vereinfacht wird.

Entwicklung

Sie können das Entwicklungsskript während der Entwicklung verwenden:

npm run dev

Dieses Skript erstellt die Client- und Server-Bundles und startet die Anwendung auf einem lokalen Server. Webpack prüft Codeänderungen und erstellt gegebenenfalls die Client- und Server-Bundles neu.

Production

Für die Produktion wird das Build-Skript verwendet, um die Client- und Server-Bundles zu erstellen:

npm run build

Nach Abschluss des Skripts kann die Anwendung mit dem folgenden Befehl ausgeführt werden:

npm run start

Schlussfolgerung

In diesem Tutorial haben wir eine minimale Site in React erstellt. Diese finden Sie unter GitHub. Diese Website verwendet Oracle Content Management als Headless-CMS. Nachdem wir Oracle Content Management mit einem Kanal veröffentlichter Inhalte für das minimale Site-Tutorial eingerichtet und konfiguriert haben, haben wir die React-Site installiert und ausgeführt, um den erforderlichen Inhalt abzurufen und die Site zu erstellen.

Weitere Informationen zu React finden Sie auf der React-Website.

Weitere Informationen zu wichtigen Oracle Content Management-Konzepten finden Sie in der Dokumentation.

Wenn Sie GraphQL mit React verwenden möchten, lesen Sie dieses Tutorial aus.

In diesem Tutorial erfahren Sie, wie Sie Video Plus-Assets in Oracle Content Management mit React integrieren können.

Weitere Beispiele finden Sie auf der Seite Oracle Content Management-Beispiele im Oracle Help Center.

Titel und Copyright-Informationen

Mit Headless Oracle Content Management eine minimale Site in React erstellen

F38764-05

Dezember 2022

Hauptverfasser: Oracle Corporation