Creare un sito minimo in React con Oracle Content Management headless

Introduzione

React è un framework JavaScript ampiamente utilizzato per creare applicazioni Web.

Per utilizzare i contenuti di Oracle Content Management in un'applicazione React, possiamo utilizzare l'esempio minimo React disponibile come repository open source su GitHub.

In questa esercitazione, creeremo un semplice sito minimo in React sfruttando Oracle Content Management come CMS headless e il kit SDK (Software Development Kit) per la distribuzione dei contenuti in JavaScript. Oracle Content Management include anche il supporto per GraphQL per tutti i contenuti pubblicati e tutti i tipi di asset. Questo esempio di React è disponibile su GitHub.

L'esercitazione è composta da tre task:

1. Preparare Oracle Content Management
2. Creare il sito minimo in React
3. Preparare l'applicazione per la distribuzione

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere le seguenti informazioni:

• Concetti chiave
• Repository di asset

Per seguire questa esercitazione, è necessario:

• una sottoscrizione a Oracle Content Management
• un account di Oracle Content Management con ruolo Amministratore contenuto;
• un computer Windows o Mac con Node versione 10 o successiva

Quello che stiamo costruendo

Con l'opzione React minima, è possibile recuperare facilmente immagini e altri contenuti dal repository di Oracle Content Management.

Per dare un'occhiata a ciò che stiamo costruendo, ecco lo stato finale della nostra esercitazione, un sito minimo di React di base che utilizza i contenuti di Oracle Content Management:

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

Ecco come apparirà la home page alla fine di questa esercitazione:

Ecco come apparirà la pagina di contatto alla fine di questa esercitazione:

Ecco come apparirà la pagina delle persone alla fine di questa esercitazione:

Per continuare, sarà necessario disporre di una sottoscrizione attiva a Oracle Content Management e accedere con il ruolo Amministratore contenuto.

Task 1: Prepara Oracle Content Management

Se non si dispone già di un'istanza di Oracle Content Management, vedere Avvio rapido per informazioni su come registrarsi per Oracle Cloud, eseguire il provisioning di un'istanza di Oracle Content Management e configurare Oracle Content Management come CMS headless.

Per questa esercitazione è necessario creare un modello di contenuto. È disponibile un packing di asset scaricabile che riempirà il repository vuoto con tipi di contenuto e contenuto associato.

Per preparare Oracle Content Management:

1. Creare un canale e un repository degli asset.
2. Creare un modello di contenuto utilizzando uno dei due metodi riportati di seguito.
   • Metodo 1: Importazione del pacchetto asset di campioni di Oracle Content Management
   • Metodo 2: creare un modello di contenuto personale

Creare un canale e un repository degli asset

È innanzitutto necessario creare un canale e un repository di asset in Oracle Content Management in modo da poter pubblicare il contenuto.

Per creare un canale e un repository di asset in Oracle Content Management, effettuare le operazioni riportate di seguito.

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

2. Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Canali di pubblicazione dall'elenco di selezione nell'intestazione della pagina.

   

3. Nell'angolo in alto a destra fare clic su Crea per creare un nuovo canale. Assegnare un nome al canale 'OCEMinimalChannel' ai fini di questa esercitazione e mantenere pubblico l'accesso. Fare clic su Salva per creare il canale.

   

4. Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Repositori dall'elenco di selezione nell'intestazione della pagina.

   

5. Nell'angolo in alto a destra fare clic su Crea per creare un nuovo repository di asset. Assegnare un nome al repository degli asset 'OCEMinimalRepository' ai fini di questa esercitazione.

   

6. Nel campo Canali di pubblicazione selezionare il canale OCEMinimalChannel per indicare a Oracle Content Management che il contenuto del repository OCEMinimalRepository può essere pubblicato nel canale OCEMinimalChannel. Al termine, fare clic su Salva.

   

Crea un modello di contenuto

Il passo successivo consiste nel creare un modello di contenuto. Sono disponibili due metodi:

• Metodo 1: Importazione del pacchetto asset di campioni di Oracle Content Management
• Metodo 2: creare un modello di contenuto personale

Importa il pacchetto asset di campioni di Oracle Content Management

È possibile scaricare un pacchetto di asset campione preconfigurato di Oracle Content Management contenente tutti i tipi di contenuto e gli asset richiesti per questa esercitazione. Se si preferisce, è inoltre possibile creare un modello di contenuto personalizzato anziché scaricare il pacchetto di asset campione.

È possibile caricare una copia del contenuto in questa esercitazione da Oracle Content Management Samples Asset Pack. In questo modo sarà possibile sperimentare i tipi di contenuto e modificare il contenuto. Se si desidera importare il pacchetto asset di esempio di Oracle Content Management, scaricare l'archivio del pacchetto asset OCESamplesAssetPack.zip ed estrarlo in una directory a scelta:

1. Scaricare Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) dalla pagina download di Oracle Content Management. Estrarre il file zip scaricato in una posizione sul computer. Dopo l'estrazione, questa posizione includerà un file denominato OCEMinimal_data.zip.

2. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

3. Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Repositori dall'elenco di selezione nell'intestazione della pagina. Selezionare OCEMinimalRepository e fare clic sul pulsante Importa contenuto nella barra delle azioni superiore.

   

4. Caricare OCEMinimal_data.zip dal computer locale nella cartella Documenti.

   

5. Dopo il caricamento, selezionare OCEMinimal_data.zip e fare clic su OK per importare il contenuto nel repository degli asset.

   

6. Dopo aver importato correttamente il contenuto, passare alla pagina Asset e aprire il repository OCEMinimalRepository. Tutte le immagini e gli elementi di contenuto correlati sono stati aggiunti al repository degli asset.

   

7. Fare clic su Seleziona tutto in alto a sinistra, quindi su Pubblica per aggiungere tutti gli asset importati al canale di pubblicazione creato in precedenza, OCEGettingStartedChannel.

   

8. Prima della pubblicazione, è necessario convalidare tutti gli asset. Aggiungere prima OCEMinimalChannel come canale selezionato, quindi fare clic sul pulsante Convalida.

   

9. Dopo la convalida degli asset, è possibile pubblicare tutti gli asset nel canale selezionato facendo clic sul pulsante Pubblica nell'angolo superiore destro.

   

Al termine, è possibile visualizzare nella pagina Asset la pubblicazione di tutti gli asset. (È possibile indicare l'icona sopra il nome dell'asset).

Dopo aver importato Oracle Content Management Samples Asset Pack, è possibile avviare la creazione del sito minimo in React.

Crea un modello di contenuto personale

Anziché importare il pacchetto asset di campioni di Oracle Content Management, è inoltre possibile creare un modello di contenuto personalizzato.

Per questa esercitazione viene utilizzato un tipo di contenuto denominato 'MinimalMain' come tipo di contenuto principale per questo esempio. Questo tipo di contenuto è costituito da logo intestazione e piè di pagina e da un elenco di pagine che devono essere incluse nell'area di navigazione.

Per creare tipi di contenuto per il modello di contenuto:

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
2. Scegliere Contenuto nel menu di navigazione a sinistra, quindi scegliere Tipi di asset dall'elenco di selezione nell'intestazione della pagina.
3. Fare clic su Crea nell'angolo superiore destro.
4. Scegliere di creare un tipo di contenuto (non un tipo di asset digitale). Ripetere questa operazione per tutti i tipi di contenuto richiesti.

Verranno creati cinque tipi di contenuto, ciascuno con il proprio set di campi:

• MinimalMain
• MinimalPage
• MinimalSection
• PeoplePage
• Persona

Il primo tipo di contenuto, MinimalMain, deve contenere i campi riportati di seguito.

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
headerLogo	Campo multimediale a singolo valore		headerLogo
footerLogo	Campo multimediale a singolo valore		footerLogo
pagine	Campo di riferimento a più valori		pagine

Di seguito è riportato l'aspetto della definizione del tipo di contenuto MinimalMain.

Il secondo tipo di contenuto, MinimalPage, deve avere il seguente campo:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
sezioni	Campo di riferimento a più valori		sezioni

Di seguito è riportato l'aspetto del tipo di contenuto MinimalPage.

Il terzo tipo di contenuto, MinimalSection, deve contenere i seguenti campi:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
tipo	Campo di testo a valore singolo	X	tipo
intestazione	Campo di testo a valore singolo		intestazione
corpo	Campo di testo grande a singolo valore		corpo
immagine	Campo immagine a singolo valore		immagine
azioni	Campo di contenuto incorporato a singolo valore		azioni

Di seguito è riportato l'aspetto del tipo di contenuto MinimalSection.

Il quarto tipo di contenuto, PeoplePage, deve contenere i seguenti campi:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
announcement	Campo di riferimento a un solo valore		announcement
persone	Campo di riferimento a più valori		persone

Il quinto e ultimo tipo di contenuto, Persona, è un asset digitale personalizzato con i campi riportati di seguito.

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
fullName	Campo di testo a valore singolo	X	fullName
titolo	Campo di testo a valore singolo		titolo
biodati	Campo di testo grande a singolo valore		biodati

Dopo aver creato i tipi di contenuto, è possibile aggiungere questi tipi di contenuto al repository creato in precedenza, OCEMinimalRepository:

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
2. Passare a OCEMinimalRepository.
3. Modificare il repository e, in Tipi di asset, specificare tutti e cinque i tipi di contenuto appena creati. Fare clic sul pulsante Salva per salvare le modifiche.

Dopo aver aggiunto i tipi di contenuto al repository, è possibile aprire il repository OCEMinimalRepository nella pagina Asset e iniziare a creare gli elementi di contenuto per tutti i tipi di contenuto.

Task 2: Creare il sito minimo in React

Per utilizzare i contenuti di Oracle Content Management in un'applicazione React sottoposta a rendering sul lato server, è possibile utilizzare l'esempio di sito minimo React, disponibile come repository open source in GitHub.

Nota: l'uso dell'esempio React è facoltativo e viene utilizzato in questa esercitazione per iniziare rapidamente. Puoi anche creare la tua applicazione React.

Per creare il sito minimo in React:

1. Duplicare il repository di esempio e installare le dipendenze
2. Configurare l'applicazione React
3. Utilizzare Oracle Content Management Content SDK
4. Utilizzare Content SDK per recuperare il contenuto
5. Usare GraphQL per creare la pagina delle persone

Duplicare il repository di esempio e installare le dipendenze

L'esempio del sito minimo React è disponibile come repository open source su GitHub.

Sarà innanzitutto necessario clonare l'esempio da GitHub al computer locale e modificare la directory nella radice del repository:

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

Ora che si dispone del codice base, è necessario scaricare le dipendenze per l'applicazione. Eseguire il comando seguente dalla directory root:

npm install

Configurare l'applicazione React

In questo esempio di sito minimo React, devi configurare alcune informazioni in modo che l'SDK di Oracle Content Management Content (e qualsiasi altra richiesta) possa indirizzare l'URL dell'istanza e la versione dell'API corretti con il token di canale corretto. Questi valori vengono utilizzati in src/scripts/server-config-utils.js per creare un'istanza di un nuovo client di consegna.

Questa applicazione utilizza un file .env letto da Webpack quando raggruppa le applicazioni client e server. Utilizzando webpack.DefinePlugin, qualsiasi valore letto dal file .env può essere reso disponibile in qualsiasi punto dell'applicazione.

Aprire il file .env in un editor di testo. Verranno visualizzati gli elementi riportati di seguito.

# 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

Modificare ogni coppia chiave-valore per riflettere l'URL dell'istanza, la versione dell'API che si desidera definire come destinazione e il token di canale associato al canale di pubblicazione. Il canale di questa esercitazione è OCEMinimalChannel.

Utilizzare Oracle Content Management Content SDK

Oracle Content Management offre un SDK che consente di individuare e utilizzare i contenuti nelle applicazioni. L'SDK viene pubblicato come modulo NPM e il progetto viene ospitato su GitHub.

Per ulteriori informazioni sull'SDK qui.

L'SDK è stato registrato come dipendenza runtime di questo progetto nel file package.json.

Utilizzare Content SDK per recuperare il contenuto

Ora possiamo sfruttare Content SDK per recuperare i contenuti in modo da renderli disponibili nella nostra applicazione React.

Content SDK utilizza un oggetto DeliveryClient per specificare l'endpoint. È possibile effettuare tutte le richieste utilizzando l'oggetto client.

La cartella src/scripts contiene il codice per ottenere i dati da Oracle Content Management mediante Content SDK.

Il file src/scripts/server-config-utils.js importa Content SDK e crea quindi un client di consegna utilizzando la configurazione specificata in .env.

Il comando seguente importa l'SDK:

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

Il comando seguente crea il client di consegna:

return createDeliveryClient(serverconfig);

Il file src/scripts/services.js contiene funzioni per ottenere i dati per questa applicazione minima React.

Il metodo fetchOceMinimalMain() recupera il tipo di contenuto MinimalMain con uno slug di minimmain.

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

Nota: la query precedente riguarda un asset con slug "minimalmaingraphql", che include la pagina 'People' di tipo People Page. Per creare il sito minimo senza la pagina 'Persone', è possibile utilizzare un asset con slug "minimalmain" nel pacchetto asset.

Per il rendering delle immagini, services.js fornisce un metodo di supporto per recuperare il set di origini per un asset costruito dalle rendition per l'asset.

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

Il metodo fetchPage() recupera il tipo di contenuto MinimalPage utilizzando il valore slug per la pagina ottenuta dalla query precedente.

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

Il metodo getRenditionURLs() recupera gli URL di rendition per qualsiasi immagine definita in una sezione utilizzando l'ID per l'immagine. Questa chiamata viene effettuata sul lato 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));
}

Usare GraphQL per creare la pagina Persone

Utilizziamo il client Apollo in package.json per integrare GraphQL in React e il metodo fetchPeople in src/scripts/services-graphql.js per effettuare la chiamata GraphQL al content server.

Per ulteriori informazioni su come includere il supporto GraphQL in Oracle Content Management, provare l'esercitazione Usa GraphQL con React e Oracle Content Management.

Ora che abbiamo la nostra query sui dati, possiamo visualizzare le risposte nei nostri componenti React.

Visualizzazione lato client e lato server

Con il rendering lato client (CSR), il client è responsabile della creazione e del rendering del contenuto di una pagina Web utilizzando JavaScript. Con il rendering lato server (SSR), la pagina viene creata sul server e viene restituita una pagina Web al client.

Quando la pagina Web viene richiesta al server nel rendering lato client, il documento HTML restituito contiene l'HTML scheletro e nessun contenuto effettivo. Contiene un riferimento a un bundle JavaScript, richiesto dal client dal server. Alla ricezione di questo bundle, il client esegue JavaScript e popola la pagina Web. Fino a quando il client non avrà terminato l'esecuzione di JavaScript, tutto ciò che vede l'utente è una pagina Web vuota. Un aspetto negativo delle applicazioni visualizzate sul lato client è che quando alcuni web crawler indicizzano il sito, non vi è contenuto effettivo da indicizzare.

Con il rendering lato server (SSR), la pagina viene creata sul server e viene restituita una pagina Web al client. Il vantaggio è che i web crawler possono indicizzare il contenuto nella pagina Web.

Flusso di applicazione sito minimo React

Il flusso dell'applicazione sito minima React è il seguente:

1. Il client effettua una richiesta al server per un determinato percorso.
2. Il server Express riceve la richiesta.
3. Il server Express esegue quindi le attività seguenti:
   1. Determina quali componenti verranno visualizzati per l'instradamento specificato e chiama la funzione fetchInitialData del componente per ottenere tutti i dati per quel componente.
   2. Crea una stringa di tutto il contenuto da visualizzare. Ad ogni componente verrà richiesto di eseguire il rendering per produrre il markup HTML.
   3. Crea un documento HTML contenente gli elementi seguenti:
      • La stringa di contenuto da visualizzare
      • Un collegamento a un foglio di stile, se applicabile
      • Tag script contenente il client-bundle.js necessario per il client
      • I dati ottenuti da tutti i componenti, serializzati come JSON
   4. Il server restituisce il codice HTML al client.
4. Il client riceve il codice HTML e lo visualizza. L'utente vedrà una pagina Web completamente formata.
5. JavaScript nell'HTML memorizzerà i dati nella finestra del browser Web sul client.
6. Il client richiede il file client-bundle.js dal server. Dopo la ricezione, il client esegue JavaScript nel bundle.
   • "idrata" l'HTML, aggiungendo in qualsiasi lato client JavaScript, ad esempio i listener di eventi.
   • Ciascun componente visualizzato visualizza se i dati sono memorizzati nella finestra. In caso affermativo, tali dati vengono utilizzati; in caso contrario, il componente ottiene i dati necessari effettuando richieste al server Oracle Content Management tramite Content SDK.
7. Se il documento HTML contiene un foglio di stile, il client richiede il foglio di stile.

Visualizzando l'origine della pagina Web, verranno visualizzati tutti i contenuti nell'HTML, a indicare che la pagina è stata visualizzata sul server.

Nota: questa applicazione di esempio recupera i dati nei componenti radice e li trasmette a tutti i componenti figlio che lo richiedono. Un'alternativa consiste nell'utilizzare uno strumento di gestione dello stato, ad esempio Redux, che inserisce i dati in un negozio e qualsiasi componente può richiedere i dati da tale negozio.

Server Express e rendering lato server

L'applicazione server utilizza un server Express per ricevere la richiesta, generare un'istanza dell'applicazione React, generare la pagina HTML e restituire la risposta.

Il file del server Express si trova in src/server/server.js.

Il server Express accetta tutte le richieste e utilizza React-router-dom matchPath() per ottenere il componente che verrà visualizzato per il percorso specificato. Questo a sua volta chiamare il metodo fetchInitialData del componente per ottenere i dati del componente, restituendo una promessa. La promessa viene eseguita e viene creato un oggetto contesto contenente i dati. Viene quindi richiamato un renderer per generare la pagina HTML prima di restituire il contenuto HTML al 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);
    }
  });
});

Il renderer si trova in src/server/renderer.jsx e utilizza la funzione reagire-dom/server di React renderToString() per ottenere una stringa di tutti i contenuti sottoposti a rendering.

// 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'oggetto di contesto passato al renderer viene passato al router lato server, StaticRouter. Durante il rendering lato server, qualsiasi componente è in grado di ottenere i dati dalle proprietà del componente.

this.props.staticContext.data

Il renderer restituisce il markup HTML contenente il contenuto React, i dati serializzati e un riferimento al bundle JavaScript da eseguire sul client.

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

Quando il client riceve il codice HTML, i dati verranno resi disponibili nella finestra e il client richiederà il bundle client dal server.

Rendering su lato client

Il codice di rendering lato client si trova in src/client/main.js. Questo codice passa attraverso tutto il codice HTML della pagina web, aggiungendo in qualsiasi codice JavaScript lato client.

Questo processo è denominato idratazione.

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

Correggi componenti

React utilizza una tecnologia nota come JSX, un'estensione di sintassi simile a HTML a JavaScript, per eseguire il rendering del contenuto. Anche se è possibile scrivere JavaScript puro per eseguire il rendering dei dati da Oracle Content Management, si consiglia vivamente di utilizzare JSX.

L'applicazione sito minima suddivide ogni pagina in una serie di componenti più piccoli.

Le prossime sezioni includono una panoramica di come React rende la nostra applicazione in ognuno dei nostri componenti:

• variabile IS_BROWSER
• File instradamenti
• Componente applicazione
• Componente di pagina
• Componenti intestazione e piè di pagina
• Componente sezione
• Componente persone
• Componente persona
• Componente errore

Variabile IS_BROWSER

Webpack viene utilizzato per raggruppare il codice client e server. È disponibile un file di configurazione che illustra a Webpack come creare ciascun bundle.

Aprire il file di configurazione per il bundle client, webpack.client.config.js. Nella parte inferiore del file, viene impostata una variabile che indica che l'applicazione è in esecuzione in un browser.

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

Aprire il file di configurazione per il bundle di server, webpack.server.config.js. Nella parte inferiore del file, la stessa variabile viene impostata per indicare che l'applicazione non è in esecuzione in un browser. È possibile accedere alla variabile IS_BROWSER da qualsiasi punto del codice dell'applicazione React per determinare se l'applicazione sta eseguendo il rendering sul server o sul client.

File instradamenti

Nel nostro sito, forniamo solo due percorsi. '/page/people' viene instradato al componente Persone. Tutte le altre richieste vengono indirizzate al componente Pagina.

Tutte le pagine hanno un'intestazione, contenente il logo e i collegamenti dell'azienda e un piè di pagina, contenente un logo e le icone dei social media.

Il file src/pages/Routes.js definisce gli instradamenti per l'applicazione. Qui stiamo usando l'operatore di distribuzione ES6 per l'applicazione, riferimenti di pagina. Ciò è dovuto al fatto che le importazioni di questi articoli sono oggetti che contengono il componente e la relativa funzione fetchInitialData (se ne dispone uno), anziché solo il componente.

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

Componente app

Il componente App è il componente principale dell'applicazione. Congela gli instradamenti in modo che ogni instradamento dell'applicazione ottenga l'intestazione e il piè di pagina.

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

I componenti per i singoli instradamenti sono il componente Pagina che si trova nella directory delle pagine.

Aprire il componente App, situato in src/pages/App.jsx. Il componente importa l'API per recuperare i dati dal file services.js.

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

Il componente App recupera i dati richiesti e li passa ai componenti Intestazione, Piè di pagina e Pagina.

Il costruttore verifica se l'applicazione è in esecuzione sul client o sul server utilizzando la variabile process.env.IS_BROWSER impostata nei file di bundle di Webpack. Se il componente viene visualizzato nel client, i dati vengono ottenuti dalla finestra.

Nota: quando si naviga su una pagina per utilizzare l'instradamento lato client, il rendering lato server non verrà eseguito. Il rendering del contenuto verrà eseguito utilizzando il rendering lato client. Di conseguenza, la finestra non conterrà alcun dato e il client dovrà effettuare una chiamata al server per ottenerlo.

Se il componente viene visualizzato sul server, i dati vengono ottenuti da this.props.staticContext, ovvero dai dati passati dal file di Express Server. I dati o i valori predefiniti vengono quindi memorizzati nello stato del componente.

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

Durante il rendering lato server, fetchInitialData viene chiamato per ottenere i dati dal server. Restituisce una promessa al codice chiamante, il codice Express Server.

function fetchInitialData() {
  return fetchOceMinimalMain();
}

Quando il componente viene visualizzato (vedere il metodo render()), recupera tutti i dati dallo stato del componente e li passa all'intestazione, ai componenti del piè di pagina e al percorso di pagina.

src/pages/App.jsx esporta un oggetto contenente la funzione fetchInitialData e il componente.

export default {
  fetchInitialData,
  component: App,
};

Componente di pagina

Il componente Pagina è responsabile del rendering di tutte le sezioni definite per una pagina.

Aprire il componente Pagina, situato in src/pages/Page.jsx.

fetchInitialData viene chiamato durante il rendering lato server per ottenere i dati dal server.

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

componentDidUpdate controlla se il percorso della posizione è stato modificato e indica una modifica alla navigazione, quindi recupera i dati di conseguenza.

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

Nel metodo rendering(), è possibile vedere che i dati da visualizzare vengono ottenuti dallo stato del componente. Questi dati dispongono di un elenco di sezioni, pertanto il metodo rendering() dei componenti della pagina viene ripetuto tramite l'elenco e richiama il componente sezione per ogni sezione dell'elenco.

Come il componente App, il componente Page esporta un oggetto contenente la funzione fetchInitialData e il componente.

export default {
  fetchInitialData,
  component:  Page,
};

Componenti intestazione e piè di pagina

Il componente Intestazione, situato in src/components/Header.jsx, e il componente Piè di pagina, situato in src/components/Footer.jsx, utilizzano semplicemente i dati trasmessi dal componente App. Non ottengono dati aggiuntivi dal server.

Componente sezione

Il componente Sezione, situato in origine/componenti/Section.jsx, viene utilizzato dal componente Pagina ed è utilizzato per eseguire il rendering di qualsiasi elemento di contenuto di tipo MinimalSection.

Questo componente include dati passati dal componente Pagina e, se i dati della sezione hanno un'immagine, effettua una chiamata lato client per ottenere gli URL di copia trasformata per l'immagine dal server.

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

Componente persone

Il componente Persone è responsabile del rendering della pagina Persone e si trova in src/pages/People.jsx.

Per ulteriori informazioni su come includere il supporto GraphQL in Oracle Content Management, consultare questa esercitazione.

Componente persona

Il componente Persona, situato in origine/componenti/Person.jsx, viene utilizzato dal componente Persone e viene utilizzato per eseguire il rendering di qualsiasi elemento di contenuto di tipo Persona.

A questo componente sono stati passati dati dal componente Persone e non è necessario effettuare chiamate aggiuntive al server.

Componente errore

Il componente Errore, situato in origine/componenti/Error.jsx, viene utilizzato dai componenti Pagina e Applicazione. In caso di errori durante la chiamata al server, verranno visualizzati.

Task 3: preparazione dell'applicazione per la distribuzione

Ora che abbiamo costruito il nostro sito React minimale, dobbiamo vederlo in un server di sviluppo locale in modo da poter eseguire il debug di eventuali problemi e visualizzare l'anteprima dell'applicazione prima che diventi attiva.

Preparare l'applicazione per la distribuzione in tre fasi:

1. Creare l'applicazione utilizzando Webpack
2. Esegui l'applicazione utilizzando il nodo
3. Usa script per creare ed eseguire l'applicazione in fase di sviluppo e produzione

Creazione dell'applicazione mediante Webpack

Webpack viene utilizzato per raggruppare l'applicazione. Crea due bundle JavaScript: server-bundle.js, eseguito sul server, e client-bundle.js, scaricato ed eseguito sul client.

L'applicazione del sito di dimensioni minime React dispone di tre file di configurazione Webpack:

• webpack.base.config.js viene unito sia con le configurazioni dei pacchetti Web client che con quelle del server.
• webpack.client.config.js raggruppa il codice del client.
• webpack.server.config.js raggruppa il codice del server.

Per creare il bundle client, è necessario specificare la configurazione del pacchetto Web client:

webpack --config webpack.client.config.js

Per creare il bundle di server, è necessario specificare la configurazione Webpack del server:

webpack --config webpack.server.config.js

Eseguire l'applicazione utilizzando il nodo

Una volta creati i bundle, è possibile avviare il server eseguendo il comando seguente:

node server.js

Usa script per creare ed eseguire l'applicazione in sviluppo e produzione

Il file package.json situato nella radice del progetto contiene script che semplificano la creazione di bundle ed eseguono l'applicazione.

Sviluppo

È possibile usare lo script dev durante lo sviluppo:

npm run dev

Questo script crea i bundle di client e server e avvia l'applicazione in un server locale. Webpack verificherà la presenza di modifiche al codice e ricreerà i bundle di client e server, se necessario.

Produzione

Per la produzione, lo script di build verrà utilizzato per creare bundle di client e server:

npm run build

Al termine dello script, è possibile eseguire l'applicazione utilizzando il seguente comando:

npm run start

Conclusione

In questa esercitazione è stato creato un sito minimo in React, disponibile all'indirizzo GitHub. Questo sito utilizza Oracle Content Management come CMS headless. Dopo aver impostato e configurato Oracle Content Management con un canale di contenuto pubblicato per l'esercitazione minima del sito, abbiamo installato ed eseguito il sito React per recuperare il contenuto richiesto e creare il sito.

Per ulteriori informazioni su React, visita il sito Web React.

Scopri i concetti importanti di Oracle Content Management nella documentazione.

Se si desidera utilizzare GraphQL con React, consultare questa esercitazione.

Per scoprire come integrare gli asset Video Plus in Oracle Content Management con React, consulta questa esercitazione.

È possibile trovare altri esempi come questo nella pagina Esempi di Oracle Content Management di Oracle Help Center.

---

Titolo e informazioni sul copyright

Creare un sito minimo in React con Oracle Content Management headless

F38764-05

Dicembre 2022

Copyright © 2021, 2022, Oracle and/or its affiliates.

Autore principale: Oracle Corporation