Créer un site minimal en réaction avec Oracle Content Management headless

Introduction

React est une structure JavaScript largement utilisée pour créer des applications Web.

Pour utiliser notre contenu Oracle Content Management dans une application React, nous pouvons utiliser l'exemple minimal React disponible en tant que référentiel open source sur GitHub.

Dans ce tutoriel, nous allons créer un site simple et minimal à React en utilisant Oracle Content Management en tant que CMS headless ainsi que son kit de développement logiciel (SDK) pour la diffusion de contenu dans JavaScript. Oracle Content Management inclut également la prise en charge de GraphQL pour tout le contenu publié et tous les types de ressource. Cet exemple React est disponible sur GitHub.

Ce tutoriel se compose de trois tâches :

Préparer Oracle Content Management
Construire le site minimal à React
Préparer votre application pour le déploiement

Prérequis

Avant de passer à ce tutoriel, nous vous recommandons de lire d'abord les informations suivantes :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

un abonnement Oracle Content Management
un compte Oracle Content Management doté du rôle Administrateur de contenu
un ordinateur Windows ou Mac avec Node version 10 ou supérieure

Ce que nous construisons

Avec React minimal, vous pouvez facilement extraire des images et d'autres contenus de votre référentiel Oracle Content Management.

Pour consulter ce que nous construisons, voici l'état final de notre tutoriel, un site minimum React de base qui utilise le contenu d'Oracle Content Management :

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

Voici à quoi ressemblera la page d'accueil à la fin de ce tutoriel :

Cette image présente une page de destination pour un site minimal React.

Voici à quoi ressemblera la page de contact à la fin de ce tutoriel :

Cette image présente la page Nous contacter pour un site minimum React.

Voici à quoi ressemblera la page des personnes à la fin de ce tutoriel :

Cette image présente la page Nous contacter pour un site minimum React.

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle Administrateur de contenu.

Tâche 1 : Préparer Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous au démarrage rapide pour savoir comment vous inscrire à Oracle Cloud, provisionner une instance Oracle Content Management et configurer Oracle Content Management en tant que CMS headless.

Pour ce tutoriel, vous devez créer un modèle de contenu. Un pack de ressources téléchargeable est disponible pour remplir votre référentiel vide avec les types de contenu et le contenu associé.

Pour préparer Oracle Content Management :

Créez un canal et un référentiel de ressources.
Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :
- Méthode 1 : Importer le pack d'équipements des échantillons Oracle Content Management
- Méthode 2 : créer votre propre modèle de contenu

Création d'un canal et d'un référentiel de ressources

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Publier des canaux dans la liste de sélection de l'en-tête de page.
Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEMinimalChannel' dans le cadre de ce tutoriel et tenez l'accès public. Cliquez sur Save pour créer le canal.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.
Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEMinimalRepository' dans le cadre de ce tutoriel.
Dans le champ Canaux de publication, sélectionnez le canal OCEMinimalChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEMinimalRepository peut être publié sur le canal OCEMinimalChannel. Cliquez sur Enregistrer lorsque vous avez terminé.

Créer un modèle de contenu

L'étape suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes suivantes :

Méthode 1 : Importer le pack d'équipements des échantillons Oracle Content Management
Méthode 2 : créer votre propre modèle de contenu

Importer le pack de ressources d'échantillons Oracle Content Management

Vous pouvez télécharger un exemple de pack de ressources Oracle Content Management préconfiguré contenant tous les types de contenu et ressources requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu au lieu de télécharger l'exemple de pack de ressources.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir du pack de ressources d'échantillons Oracle Content Management. Vous pourrez ainsi essayer les types de contenu et modifier leur contenu. Si vous souhaitez importer le pack d'équipements d'échantillons Oracle Content Management, téléchargez l'archive du pack d'équipements OCESamplesAssetPack.zip et extrayez-la dans le répertoire de votre choix :

Téléchargez le pack de ressources Oracle Content Management Samples (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé vers un emplacement sur votre ordinateur. Après l'extraction, cet emplacement inclut un fichier nommé OCEMinimal_data.zip.
Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. Sélectionnez à présent OCEMinimalRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.
Téléchargez OCEMinimal_data.zip à partir de votre ordinateur local vers le dossier Documents.
Une fois téléchargé, sélectionnez OCEMinimal_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.
Une fois le contenu importé, accédez à la page Ressources et ouvrez le référentiel OCEMinimalRepository. Vous verrez que toutes les images et tous les éléments de contenu associés ont été ajoutés au référentiel de ressources.
Cliquez sur Tout sélectionner en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.
Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEMinimalChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.
Une fois les ressources validées, vous pouvez publier toutes les ressources sur le canal sélectionné en cliquant sur le bouton Publier dans l'angle supérieur droit.

Une fois cette opération terminée, vous pouvez voir sur la page Ressources que toutes les ressources ont été publiées. (Vous pouvez indiquer l'icône située au-dessus du nom de la ressource.)

Cette image présente la page Equipements, avec toutes les immobilisations publiées.

Après avoir importé le pack de ressources Echantillons Oracle Content Management, vous pouvez commencer à créer le site minimal dans React.

Créer votre propre modèle de contenu

Au lieu d'importer le pack de ressources d'échantillons Oracle Content Management, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons le type de contenu "MinimalMain" comme type de contenu principal pour cet exemple. Ce type de contenu se compose de logos d'en-tête et de pied de page, ainsi que d'une liste de pages à inclure dans la navigation.

Cette image présente la page d'accueil de l'exemple Minimal.

Pour créer des types de contenu pour le modèle de contenu :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Types d'actif dans la liste de sélection de l'en-tête de page.
Cliquez sur Créer dans le coin supérieur droit.
Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Cette image présente la boîte de dialogue Créer un type de ressource dans l'interface Web d'Oracle Content Management.

Nous allons créer cinq types de contenu, chacun avec son propre ensemble de champs :

MinimalMain
MinimalPage
MinimalSection
PeoplePage
Personne

Le premier type de contenu, MinimalMain, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Nom de la machine
headerLogo	Champ multimédia à valeur unique	headerLogo
footerLogo	Champ multimédia à valeur unique	footerLogo
pages	Champ de référence à valeurs multiples	pages

Voici à quoi doit ressembler votre définition de type de contenu MinimalMain :

Cette image présente la définition du type de contenu 'MinimalMain'. Il inclut les champs de données suivants : headerLogo, footerLogo, pages.

Le deuxième type de contenu, MinimalPage, doit comporter le champ suivant :

Nom d'affichage	Type de champ	Obligatoire	Nom de la machine
sections	Champ de référence à valeurs multiples		sections

Voici à quoi doit ressembler votre type de contenu MinimalPage :

Cette image présente la définition du type de contenu 'MinimalPage'. Il inclut ce champ de données : sections.

Le troisième type de contenu, MinimalSection, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de la machine
type	Champ de texte à valeur unique	X	type
en-tête	Champ de texte à valeur unique		en-tête
body	Champ de grand texte à valeur unique		body
image	Champ d'image à valeur unique		image
actions	Champ de contenu incorporé à valeur unique		actions

Voici à quoi doit ressembler votre type de contenu MinimalSection :

Cette image présente la définition du type de contenu 'MinimalSection'. Il inclut les champs de données suivants : type, en-tête, corps, image, actions.

Le quatrième type de contenu, PeoplePage, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de la machine
annonce	Champ de référence à une seule valeur		annonce
personnes	Champ de référence à valeurs multiples		personnes

Le cinquième et dernier type de contenu, Personne, est une ressource numérique personnalisée avec les champs suivants :

Nom d'affichage	Type de champ	Obligatoire	Nom de la machine
fullName	Champ de texte à valeur unique	X	fullName
titre	Champ de texte à valeur unique		titre
biodata	Champ de grand texte à valeur unique		biodata

Une fois les types de contenu créés, vous pouvez ajouter ces types de contenu au référentiel que vous avez créé précédemment, OCEMinimalRepository :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Accédez à OCEMinimalRepository.
Modifiez le référentiel et, sous Types de ressource, indiquez les cinq nouveaux types de contenu. Cliquez sur le bouton Save (Enregistrer) pour enregistrer vos modifications.

Cette image présente la page Modifier le référentiel dans Oracle Content Management, avec les nouveaux types de contenu associés au référentiel OCEMinimalRepository.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEMinimalRepository sur la page Ressources et commencer à créer vos éléments de contenu pour tous les types de contenu.

Cette image présente les éléments de contenu sur la page Ressources de l'interface Web d'Oracle Content Management, avec des options à gauche pour les collections, les canaux, les langues, les types, la sélection d'élément de contenu et le statut.

Tâche 2 : créer le site minimal dans React

Pour utiliser notre contenu Oracle Content Management dans une application React rendue côté serveur, nous pouvons utiliser l'exemple de site minimal React, disponible en tant que référentiel open source sur GitHub.

Remarque : l'utilisation de l'exemple React est facultative et nous l'utilisons dans ce tutoriel pour vous aider à démarrer rapidement. Vous pouvez également créer votre propre application React.

Pour construire le site minimal de React :

Cloner l'exemple de référentiel et installer les dépendances
Configurer l'application React
Utiliser le kit SDK Oracle Content Management Content
Utiliser le kit SDK Content pour extraire du contenu
Utilisez GraphQL pour construire la page des personnes

Cloner le référentiel échantillon et installer les dépendances

L'exemple de site React minimal est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'échantillon de GitHub vers votre ordinateur local et changer votre répertoire en racine de référentiel :

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

Maintenant que vous disposez de votre base de code, vous devez télécharger les dépendances pour l'application. Exécutez la commande suivante à partir du répertoire racine :

npm install

Configurer l'application React

Dans cet exemple de site minimal React, vous devez configurer quelques informations de sorte que le kit SDK Oracle Content Management Content (et toutes les autres demandes) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal correct. Ces valeurs sont utilisées dans src/scripts/server-config-utils.js pour instancier un nouveau client de distribution.

Cette application utilise un fichier .env lu par Webpack lorsqu'elle regroupe les applications client et serveur. Avec webpack.DefinePlugin, toutes les valeurs lues à partir du fichier .env peuvent être rendues disponibles partout dans l'application.

Ouvrez le fichier .env dans un éditeur de texte. Vous verrez ce qui suit :

# 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

Modifiez chaque paire clé-valeur pour refléter l'URL d'instance, la version d'API à cibler et le jeton de canal associé au canal de publication. Le canal de ce tutoriel est OCEMinimalChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management propose un kit SDK pour vous aider à repérer et à utiliser du contenu dans vos applications. Le kit SDK est publié en tant que module NPM et le projet est hébergé sur GitHub.

Pour en savoir plus sur le SDK, cliquez ici.

Le kit SDK a été inscrit en tant que dépendance d'exécution de ce projet dans le fichier package.json.

Utiliser le kit SDK de contenu pour extraire le contenu

Nous pouvons désormais tirer parti de Content SDK pour extraire du contenu afin de pouvoir le rendre dans notre application React.

Le kit SDK Content utilise un objet DeliveryClient pour indiquer l'adresse. Vous pouvez effectuer toutes les demandes à l'aide de cet objet client.

Le dossier src/scripts contient le code permettant d'obtenir des données à partir d'Oracle Content Management à l'aide du kit SDK Content.

Le fichier src/scripts/server-config-utils.js importe le kit SDK Content, puis crée un client de distribution à l'aide de la configuration indiquée dans .env.

La commande suivante importe le kit SDK :

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

La commande suivante crée le client de distribution :

return createDeliveryClient(serverconfig);

Le fichier src/scripts/services.js contient des fonctions permettant d'obtenir les données de cette application minimale React.

La méthode fetchOceMinimalMain() extrait le type de contenu MinimalMain avec un raccourci minimalmain.

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;
}

Remarque : la requête ci-dessus concerne une ressource dont la syntaxe est "minimalmaingraphql", qui inclut la page 'People' de type Page Personnes. Pour créer le site minimal sans la page 'Personnes', une ressource avec le slug "minimalmain" dans le pack d'actifs peut être utilisée à la place.

Pour afficher les images, services.js fournit une méthode d'aide permettant d'extraire l'ensemble de sources d'une ressource construite à partir des rendus de la ressource.

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;
}

La méthode fetchPage() extrait le type de contenu MinimalPage à l'aide de la valeur d'identifiant de la page obtenue à partir de la requête précédente.

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

La méthode getRenditionURLs() extrait les URL de rendu de toute image pouvant être définie dans une section à l'aide de l'ID de cette image. Cet appel est effectué côté client.

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));
}

Utilisez GraphQL pour construire la page Personnes

Nous utilisons le client Apollo dans package.json pour intégrer GraphQL à React et la méthode fetchPeople dans src/scripts/services-graphql.js pour appeler GraphQL sur le serveur de contenu.

Pour plus d'informations sur l'inclusion de la prise en charge de GraphQL dans Oracle Content Management, essayez le tutoriel Utiliser GraphQL avec React et Oracle Content Management.

Maintenant que nous avons notre requête de données, nous pouvons afficher les réponses dans nos composants Réagir.

Comparaison entre l'affichage côté client et côté serveur

Avec le rendu côté client (CSR), le client est responsable de la création et de l'affichage du contenu d'une page Web à l'aide de JavaScript. Avec le rendu côté serveur (SSR), la page est créée sur le serveur et une page Web est renvoyée au client.

Lorsque la page Web est demandée à partir du serveur dans le rendu côté client, le document HTML renvoyé contient du squelette HTML et aucun contenu réel. Il contient une référence à un groupe JavaScript, que le client demande ensuite à partir du serveur. A la réception de ce bundle, le client exécute JavaScript et remplit la page Web. Tant que le client n'a pas terminé l'exécution de JavaScript, tous les utilisateurs voient une page Web vide. Un inconvénient des applications rendues côté client est que lorsque certains analyseurs Web indexent le site, il n'y a pas de contenu réel à indexer.

Avec le rendu côté serveur (SSR), la page est créée sur le serveur et une page Web est renvoyée au client. L'avantage de cela est que les analyseurs de liens Web peuvent indexer le contenu sur la page Web.

Flux d'application Réagir au site minimal

Le flux de l'application de site minimale React est le suivant :

Le client envoie une demande au serveur pour une route donnée.
Le serveur Express reçoit la demande.
Le serveur Express effectue ensuite les tâches suivantes :
1. Il détermine les composants qui seront affichés pour le routage donné et appelle la fonction fetchInitialData du composant pour obtenir toutes les données de ce composant.
2. Il crée une chaîne de tout le contenu à afficher. (Chaque composant est invité à effectuer un rendu pour produire son balisage HTML.)
3. Il crée un document HTML contenant les éléments suivants :
  - Chaîne de contenu à afficher
  - Lien vers une feuille de style, le cas échéant
  - Balise de script contenant le client-bundle.js dont le client aura besoin
  - Données obtenues à partir de tous les composants, sérialisées au format JSON
4. Le serveur renvoie ensuite le code HTML au client.
Le client reçoit le code HTML et le affiche. L'utilisateur verra une page Web entièrement formée.
L'élément JavaScript du code HTML stocke les données dans la fenêtre du navigateur Web sur le client.
Le client demande le fichier client-bundle.js à partir du serveur. Après la réception, le client exécute JavaScript dans le groupe.
- Il "hydrate" le code HTML, en ajoutant dans n'importe quel JavaScript côté client, comme les processus d'écoute d'événement.
- Chaque composant affiché voit si ses données sont stockées dans la fenêtre. Si tel est le cas, ces données sont utilisées. Sinon, le composant obtient les données dont il a besoin en adressant des demandes au serveur Oracle Content Management via Content SDK.
Si le document HTML contenait une feuille de style, le client demande la feuille de style.

En affichant la source de la page Web, vous verrez tout le contenu HTML, indiquant que la page a été affichée sur le serveur.

Remarque : cet exemple d'application obtient les données des composants racine, puis les transmet à tout composant enfant qui en a besoin. Une alternative consiste à utiliser un outil de gestion d'état tel que Redux, qui place les données dans un magasin, et tout composant peut demander les données à partir de ce magasin.

Serveur et rendu Express côté serveur

L'application serveur utilise un serveur Express pour recevoir la demande, générer une instance d'application React, générer la page HTML et renvoyer la réponse.

Le fichier du serveur Express se trouve dans src/server/server.js.

Le serveur Express accepte toutes les demandes, puis utilise le réact-router-dom matchPath() pour obtenir le composant qui sera affiché pour le routage spécifié. Cette opération appelle à son tour la méthode fetchInitialData de ce composant pour obtenir les données de ce composant et renvoyer une promesse. La promesse est exécutée et un objet contexte est créé pour contenir les données. Un programme d'affichage est ensuite appelé pour générer la page HTML avant de renvoyer le contenu HTML au client.

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);
    }
  });
});

Le programme d'affichage est situé sur src/server/renderer.jsx et utilise la réact-dom/server renderToString() de React pour obtenir une chaîne de tout le contenu affiché.

// 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>,
);

L'objet de contexte transmis au programme de rendu est transmis au routeur côté serveur, StaticRouter. Lors du rendu côté serveur, tout composant peut obtenir les données des accessoires du composant.

this.props.staticContext.data

Le rendu renvoie le balisage HTML qui contient le contenu React, les données sérialisées et une référence au groupe JavaScript à exécuter sur le client.

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

Lorsque le client reçoit le code HTML, les données sont rendues disponibles dans la fenêtre et le client demande le groupe de clients à partir du serveur.

Affichage côté client

Le code de rendu côté client se trouve dans src/client/main.js. Ce code passe par l'ensemble du code HTML de la page Web, en ajoutant le code JavaScript côté client.

Ce processus est appelé hydratation.

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

Réagir aux composants

React utilise une technologie appelée JSX, qui est une extension de syntaxe de type HTML à JavaScript, pour afficher le contenu. Même si vous pouvez écrire JavaScript pur pour afficher les données à partir d'Oracle Content Management, nous vous recommandons vivement d'utiliser JSX.

L'application de site minimale décompose chaque page en plusieurs composants plus petits.

Les sections suivantes comprennent un aperçu de la façon dont React affiche notre application dans chacun de nos composants :

Variable IS_BROWSER
Fichier Routes
Composant d'application
Composant de page
Composants d'en-tête et de pied de page
Composant de section
Personnes (composant)
Composant Personne
Composant d'erreur

Variable IS_BROWSER

Le package Web permet de regrouper le code client et le code serveur. Un fichier de configuration indique au pack Web comment créer chaque bundle.

Ouvrez le fichier de configuration du groupe de clients, webpack.client.config.js. Au bas du fichier, une variable est définie pour indiquer que l'application s'exécute dans un navigateur.

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

Ouvrez le fichier de configuration du groupe de serveurs webpack.server.config.js. En bas du fichier, la même variable est définie pour indiquer que l'application n'est pas en cours d'exécution dans un navigateur. La variable IS_BROWSER est accessible depuis n'importe où dans le code d'application React pour déterminer si l'application est en cours d'affichage sur le serveur ou dans le client.

Fichier de routage

Dans notre site, nous ne fournissons que deux itinéraires. Le fichier '/page/people' est acheminé vers le composant People. Toutes les autres demandes sont dirigées vers le composant Page.

Toutes les pages ont un en-tête, contenant le logo et les liens de la société, et un pied de page, contenant un logo et des icônes de réseaux sociaux.

Le fichier src/pages/Routes.js définit les routages de l'application. Ici, nous utilisons l'opérateur de répartition ES6 pour les références d'application et de page. En effet, les importations de ces éléments sont des objets contenant le composant et sa fonction fetchInitialData (s'il en a un) plutôt que simplement le composant.

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

Composant d'application

Le composant d'application est le composant principal de l'application. Il encapsule les routages de sorte que chaque routage de l'application obtienne l'en-tête et le pied de page.

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

Les composants des routes individuelles sont le composant Page situé dans le répertoire des pages.

Ouvrez le composant App, situé sur src/pages/App.jsx. Le composant importe l'API pour obtenir les données à partir du fichier services.js.

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

Le composant d'application obtient les données requises et les transmet aux composants d'en-tête, de pied de page et de page.

Le constructeur vérifie si l'application est en cours d'exécution sur le client ou le serveur à l'aide de la variable process.env.IS_BROWSER définie dans les fichiers de regroupement de packages Web. Si le composant est en cours de rendu dans le client, les données sont obtenues à partir de la fenêtre.

Remarque : lorsqu'une page est accédée à l'aide du routage côté client, le rendu côté serveur ne se produit pas. Au lieu de cela, le contenu sera affiché à l'aide du rendu côté client. Par conséquent, la fenêtre ne contiendra aucune donnée et le client devra effectuer un appel de serveur pour l'obtenir.

Si le composant est affiché sur le serveur, les données sont obtenues à partir de this.props.staticContext, c'est-à-dire les données transmises à partir du fichier du serveur Express. Les données, ou valeurs par défaut, sont ensuite stockées dans l'état du composant.

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,
  };
}

Lors du rendu côté serveur, fetchInitialData est appelé pour obtenir les données du serveur. Il renvoie une promesse au code appelant, le code du serveur Express.

function fetchInitialData() {
  return fetchOceMinimalMain();
}

Lorsque le composant s'affiche (voir la méthode rendu()), il obtient toutes les données de l'état du composant et les transmet à l'en-tête, aux composants de pied de page et à la route de page.

src/pages/App.jsx exporte un objet contenant la fonction fetchInitialData et le composant.

export default {
  fetchInitialData,
  component: App,
};

Composant de page

Le composant Page est chargé d'afficher toutes les sections définies pour une page.

Ouvrez le composant Page, situé sur src/pages/Page.jsx.

fetchInitialData est appelé lors du rendu côté serveur pour obtenir les données du serveur.

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

componentDidUpdate vérifie si le chemin d'accès de l'emplacement a changé en indiquant une modification de navigation, puis extrait les données en conséquence.

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

Dans la méthode rendu(), vous pouvez voir que les données à afficher sont obtenues à partir de l'état du composant. Ces données comportent une liste de sections, de sorte que la méthode de rendu des composants de page effectue une itération via la liste et appelle le composant Section pour chaque section de la liste.

A l'instar du composant App, le composant Page exporte un objet contenant la fonction fetchInitialData et le composant.

export default {
  fetchInitialData,
  component:  Page,
};

Composants d'en-tête et de pied de page

Le composant d'en-tête, situé dans src/components/Header.jsx, et le composant de pied de page, situé dans src/components/Footer.jsx, utilisent simplement les données qui leur sont transmises à partir du composant d'application. Ils n'obtiennent aucune donnée supplémentaire du serveur.

Composant de section

Le composant Section, situé dans src/components/Section.jsx, est utilisé par le composant Page et est utilisé pour afficher tous les éléments de contenu de type MinimalSection.

Des données sont transmises à ce composant à partir du composant Page et, si les données de section contiennent une image, un appel côté client est lancé pour obtenir les URL de rendu de l'image à partir du serveur.

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

Composant Personnes

Le composant Personnes est responsable de l'affichage de la page Personnes et se trouve sur src/pages/People.jsx.

Pour plus d'informations sur l'inclusion du support GraphQL dans Oracle Content Management, consultez ce tutoriel.

Composant de personne

Le composant Person (Personne), situé dans src/components/Person.jsx, est utilisé par le composant People (Personnes) et est utilisé pour afficher tous les éléments de contenu de type Person (Personne).

Ce composant contient des données qui lui sont transmises à partir du composant Personnes et n'a pas besoin d'appeler le serveur.

Composant en erreur

Le composant Error, situé dans src/components/Error.jsx, est utilisé par les composants Page et App. S'il y a eu des erreurs pendant l'appel au serveur, il les affiche.

Tâche 3 : préparation de l'application pour le déploiement

Maintenant que nous avons construit notre site de React minimal, nous devons le voir dans un serveur de développement local afin que nous puissions déboguer tous les problèmes et prévisualiser l'application avant qu'elle ne soit mise en service.

Préparez l'application pour le déploiement en trois étapes :

Créer l'application à l'aide de Webpack
Exécuter l'application à l'aide du noeud
Utiliser des scripts pour créer et exécuter l'application en développement et en production

Créer l'application à l'aide du pack Web

Le pack Web est utilisé pour regrouper l'application. Il crée deux bundles JavaScript : server-bundle.js, qui est exécuté sur le serveur, et client-bundle.js, qui est téléchargé et exécuté sur le client.

L'application de site minimale React comporte trois fichiers de configuration Webpack :

webpack.base.config.js est fusionné avec les configurations client et serveur du pack Web.
webpack.client.config.js regroupe le code du client.
webpack.server.config.js regroupe le code du serveur.

Pour créer le bundle client, vous devez spécifier la configuration du pack Web client :

webpack --config webpack.client.config.js

Pour créer le groupe de serveurs, vous devez spécifier la configuration du package Web du serveur :

webpack --config webpack.server.config.js

Exécuter l'application à l'aide du noeud

Une fois les bundles créés, vous pouvez démarrer le serveur en exécutant la commande suivante :

node server.js

Utiliser des scripts pour créer et exécuter l'application en développement et en production

Le fichier package.json situé à la racine du projet contient des scripts qui facilitent la création des bundles et l'exécution de l'application.

Développement

Vous pouvez utiliser le script dev lors du développement :

npm run dev

Ce script crée les bundles client et serveur et démarre l'application dans un serveur local. Webpack surveillera les modifications de code et recréera les bundles client et serveur si nécessaire.

Production

Pour la production, le script de build est utilisé pour créer les groupes de clients et de serveurs :

npm run build

Une fois le script terminé, l'application peut être exécutée à l'aide de la commande suivante :

npm run start

Conclusion

Dans ce tutoriel, nous avons créé un site minimal à React, disponible sur GitHub. Ce site utilise Oracle Content Management comme CMS headless. Après avoir configuré Oracle Content Management avec un canal de contenu publié pour le tutoriel de site minimal, nous avons installé et exécuté le site React pour extraire le contenu requis et créer le site.

Pour plus d'informations sur React, visitez le site Web React.

Découvrez les principaux concepts d'Oracle Content Management dans la documentation.

Si vous souhaitez utiliser GraphQL avec React, consultez ce tutoriel.

Pour savoir comment intégrer des ressources Vidéo Plus dans Oracle Content Management avec React, reportez-vous à ce tutoriel.

Vous trouverez d'autres exemples de ce type sur la page Exemples Oracle Content Management dans Oracle Help Center.

Informations relatives au titre et au copyright

Créer un site minimal en réaction avec Oracle Content Management headless

F38764-05

Décembre 2022

Auteur principal : Oracle Corporation