Crea un sito minimo in un ambiente angolare con Oracle Content Management Headless

Introduzione

Angular è una piattaforma per la creazione di applicazioni Web per dispositivi mobile e desktop.

Per utilizzare il contenuto di Oracle Content Management in un'applicazione angolare, è possibile utilizzare il campione minimo angolare disponibile come repository open source su GitHub.

In questa esercitazione, creeremo un sito semplice e minimo in Angular, sfruttando Oracle Content Management come CMS senza problemi e il relativo kit di sviluppo software (SDK) per la distribuzione dei contenuti in JavaScript. Questo esempio angolare è disponibile su GitHub.

L'esercitazione prevede tre passi:

1. Prepara Oracle Content Management
2. Costruisci il sito minimo in Angular
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, sono necessari:

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

Cosa stiamo costruendo

Grazie al minimo angolare, è possibile recuperare facilmente immagini e altri contenuti dal repository di Oracle Content Management.

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

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

Questo è l'aspetto della home page alla fine di questa esercitazione:

Questo è l'aspetto della pagina Contattateci alla fine di questa esercitazione:

Per continuare, sarà necessario disporre di una sottoscrizione attiva a Oracle Content Management ed eseguire il login 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 senza problemi.

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

Per preparare Oracle Content Management, effettuare le operazioni riportate di seguito.

1. Creare un repository di canali e asset.
2. Creare un modello di contenuto utilizzando due metodi:
   • Metodo 1: Importazione del pacchetto asset di campioni di Oracle Content Management
   • Metodo 2: creare un proprio modello di contenuto

Crea un repository di canale e asset

Prima è 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 sinistro, quindi scegliere Pubblicazione canali 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 sinistro, quindi scegliere Repositori dalla lista 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 di asset 'OCEMinimalRepository' ai fini di questa esercitazione.

   

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

   

Creazione di un modello di contenuto

Il passo successivo consiste nella creazione di un modello di contenuto. È possibile utilizzare uno dei due metodi riportati di seguito.

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

Importa pacchetto asset campioni di Oracle Content Management

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

È possibile caricare una copia del contenuto utilizzato in questa esercitazione dal pacchetto di asset dei campioni di Oracle Content Management. In questo modo sarà possibile provare i tipi di contenuto e modificare il contenuto. Se si desidera importare il pacchetto di asset di esempio di Oracle Content Management, è possibile scaricare l'archivio del pacchetto di asset, OCESamplesAssetPack.zip, quindi estrarlo in una directory selezionata:

1. Scaricare il pacchetto asset di campioni di Oracle Content Management (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 sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina. Selezionare ora 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 aver caricato, selezionare OCEMinimal_data.zip e fare clic su OK per importare il contenuto nel repository degli asset.

   

6. Dopo aver importato il contenuto, passare alla pagina Asset e aprire il repository OCEMinimalRepository. Si noterà che tutte le immagini e gli elementi di contenuto correlati sono stati aggiunti al repository di 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 visualizzare l'icona sopra il nome dell'asset).

Dopo aver importato il pacchetto di asset di campioni di Oracle Content Management, è possibile avviare la creazione del sito minimo in React.

Crea il tuo modello di contenuto

Invece di importare il pacchetto di asset dei campioni di Oracle Content Management, è possibile creare un proprio modello di contenuto.

In questa esercitazione viene utilizzato un tipo di contenuto denominato 'MinimalMain' come tipo di contenuto principale per questo esempio. Questo tipo di contenuto è costituito da loghi di intestazione e piè di pagina e da un elenco di pagine da includere nel nav.

Per creare tipi di contenuto per il modello di contenuto, eseguire 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 sinistro, 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 l'operazione per tutti i tipi di contenuto richiesti.

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

• MinimalMain
• MinimalPage
• MinimalSection

Il primo tipo di contenuto, MinimalMain, deve avere i seguenti campi:

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

Questo è l'aspetto che dovrebbe avere la 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

Questo è l'aspetto del tipo di contenuto MinimalPage:

Il terzo e il tipo di contenuto finale, MinimalSection, devono avere 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 di grandi dimensioni a valore singolo		corpo
immagine	Campo immagine a valore singolo		immagine
azioni	Campo di contenuto incorporato a valore singolo		azioni

Questo è l'aspetto del tipo di contenuto MinimalSection:

Dopo aver creato i tipi di contenuto, è possibile aggiungerli 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 tre 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 angolare

Per utilizzare il contenuto di Oracle Content Management in un'applicazione Angular di rendering lato server, è possibile utilizzare l'esempio di sito Angular minimal, disponibile come repository open source in GitHub.

Nota: tenere presente che l'uso del campione angolare è facoltativo e che viene utilizzato in questa esercitazione per iniziare rapidamente. Puoi anche creare la tua applicazione Angular.

Per costruire il sito minimo in Angular:

1. Duplicare il repository di esempio e installare le dipendenze
2. Configurazione dell'applicazione Angular
3. Utilizzare l'SDK di Oracle Content Management Content
4. Utilizzare l'SDK del contenuto per recuperare il contenuto

Duplicare il repository di esempio e installare le dipendenze

Il campione di sito minimo angolare è disponibile come repository open source in GitHub.

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

git clone https://github.com/oracle/oce-angular-minimal-sample.git
    cd oce-angular-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

Configurazione dell'applicazione angolare

In questo esempio di sito minimo angolare è necessario configurare alcune informazioni in modo che l'SDK di Oracle Content Management Content (e qualsiasi altra richiesta) possa definire la versione corretta dell'URL dell'istanza e dell'API con il token di canale corretto. Questi valori sono utilizzati in src/scripts/server-config-utils.js per creare un'istanza di un nuovo client di distribuzione.

Questa applicazione utilizza un file .env letto da Webpack quando raggruppa le applicazioni client e server. Utilizzando webpack.DefinePlugin, tutti i valori letti dal file .env possono essere resi disponibili in qualsiasi punto dell'applicazione.

Aprire il file .env in un editor di testo. Sono disponibili 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 in modo che rifletta l'URL dell'istanza, la versione dell'API a cui si desidera indirizzare e il token canale associato al canale di pubblicazione. Il canale per questa esercitazione è OCEMinimalChannel.

Utilizzare l'SDK di Oracle Content Management Content

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 gestito in hosting su GitHub.

Per ulteriori informazioni sull'SDK, fare clic qui.

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

Utilizzare l'SDK del contenuto per recuperare il contenuto

Ora possiamo utilizzare il kit SDK del contenuto per recuperare il contenuto in modo da renderlo disponibile nell'applicazione Angular.

L'SDK del contenuto utilizza un oggetto DeliveryClient per specificare l'endpoint. È possibile creare tutte le richieste utilizzando tale oggetto client.

La cartella src/scripts contiene il codice per il recupero dei dati da Oracle Content Management mediante l'SDK del contenuto.

Il file src/scripts/server-config-utils.js importa l'SDK del contenuto, quindi crea un client di distribuzione 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 un slug di minimalmain.

export async function fetchOceMinimalMain() {
      const data = await getItem('minimalmain', '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;
    }

Per il rendering delle immagini, service.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 che può essere definita in una sezione utilizzando l'ID per tale immagine. Questa chiamata è 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));
    }

Ora che abbiamo la nostra query di dati, possiamo rendere le risposte nei nostri componenti angolari.

Rendering 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 mediante JavaScript. Con il rendering lato server (SSR), l'intera pagina viene creata sul server e viene restituita una pagina Web completa al client.

Quando la pagina Web viene richiesta dal server nel rendering lato client, il documento HTML restituito contiene HTML scheletro e nessun contenuto effettivo. Contiene un riferimento a un bundle JavaScript che il client richiede quindi dal server. Alla ricezione di questo bundle, il client esegue il codice JavaScript e popola la pagina Web. Finché il client non ha terminato l'esecuzione di JavaScript, l'utente visualizza una pagina Web vuota. Un lato negativo delle applicazioni di rendering lato client è che quando alcuni web crawler indicizzano il sito, non esiste un contenuto effettivo da indicizzare.

Con il rendering lato server (SSR), l'intera pagina viene creata sul server e viene restituita una pagina Web completa al client. Il vantaggio è che i web crawler possono indicizzare l'intero contenuto sulla pagina Web.

Rendering angolare lato server

Il flusso dell'applicazione della galleria di immagini angolari è il seguente:

1. Il client invia una richiesta al server per un determinato percorso.
2. Il server Express riceve la richiesta.
3. Il server Express trasmette tutte le richieste client per le pagine al motore Express di Angular Univeral
4. Express Engine di Angular Univeral utilizza un file HTML di modello e lo popola con il seguente
   1. Il markup per il percorso specificato
   2. I dati dell'instradamento sono serializzati in uscita
   3. Riferimenti a qualsiasi foglio di stile
   4. Riferimenti ai bundle JavaScript da eseguire sul client
5. Il server Express restituisce il documento HTML creato da Angular Univeral's Express Engine al client.
6. Il client riceve il codice HTML e lo visualizza. L'utente visualizzerà una pagina Web completamente formata.
7. Il client richiede eventuali bundle JavaScript dal server. Dopo averlo ricevuto, il client esegue il codice JavaScript nel bundle.
   1. "idrata" l'HTML, aggiungendo in qualsiasi JavaScript lato client come i listener di eventi.
   2. Angular prende automaticamente i dati serializzati dalla pagina e li inserisce nel codice JavaScript per essere disponibili ai componenti
8. Se il documento HTML contiene un foglio di stile, il client richiede il foglio di stile.

La CLI angolare supporta l'aggiunta del supporto di rendering lato server a un'applicazione angolare esistente. Per ulteriori dettagli, visitare il sito https://angular.io/guide/universal.

Server Express lato server

L'applicazione server utilizza un server Express per ricevere la richiesta e inoltrare a Angular Univeral's Express Engine.

Il file del server Express si trova in server.js. Questo file viene creato dall'interfaccia CLI angolare quando si aggiunge il supporto di rendering lato server.

Componenti angolari

I componenti angolari vengono scritti in TypeScript e definiscono un modello che definisce la vista. Questi modelli contengono HTML ordinario, direttive angolari e markup di associazione, che consentono ad Angular di regolare l'HTML prima della visualizzazione.

Le prossime sezioni forniscono una panoramica di come Angular rende la nostra applicazione in ciascuno dei nostri componenti:

• Modulo applicativo
• Modulo root per il rendering lato server
• Resolver dati pagina
• Componente applicazione
• Componenti di intestazione e pagina
• Componente sezione
• PageComponent

Modulo applicativo

Modulo applicazione situato in src/app/app.module.ts. Esegue il bootstrap dell'applicazione con il componente applicazione.

Questo file definisce i diversi percorsi per la nostra applicazione. Nel nostro sito vogliamo fornire due percorsi: - il percorso radice (/) - e un percorso pagina (/page/:slug)

L'instradamento radice viene reindirizzato all'instradamento della pagina senza slug della pagina specificato. L'instradamento della pagina definisce il risolutore PageDataResolver, utilizzato per ottenere tutti i dati richiesti per l'instradamento prima della creazione dei componenti dell'instradamento.

Aprire il componente radice, situato in src/app/app.module.ts e visualizzare i percorsi definiti:

const appRoutes: Routes = [
      // no path specified, go to home
      {
        path: '',
        redirectTo: '/page/',
        pathMatch: 'full',
        runGuardsAndResolvers: 'always',
      },
      {
        path: 'page/:slug',
        component: PageComponent,
        resolve: { routeData: PageDataResolver },
        runGuardsAndResolvers: 'always',
      },
    ];

Questo modulo app è il punto di accesso durante il rendering dell'applicazione sul lato client.

Modulo root per il rendering lato server

Il punto di accesso principale a questa applicazione angolare, quando si esegue il rendering dell'applicazione sul server, è il modulo del server applicazioni situato in src/app/app.server.module.ts.

Questo modulo importa il modulo app, che si trova in src/app/app.server.module.ts, insieme a Angular's ServerModule. L'applicazione lato server esegue il bootstrap dello stesso componente applicazione del client e utilizza tutti gli stessi componenti.

La CLI angolare crea il file del modulo server quando si aggiunge il supporto di rendering lato server.

Resolver dati pagina

Il risolutore dei dati della pagina, che si trova in src/resolvers/page-data.resolver.ts, gestisce il recupero dei dati da visualizzare nelle pagine.

Quando il client è in fase di idratazione, questi dati vengono ottenuti dal file transferState popolato durante il rendering lato server e serializzato nel documento HTML restituito al client.

Durante il rendering lato server o il rendering lato client durante la navigazione lato client, transferState non conterrà i dati. I dati vengono ottenuti dal server Oracle Content Management mediante l'SDK del contenuto.

return fetchOceMinimalMain()
      .then((appData) => {
        if (pageSlug === null || pageSlug === '') {
          pageSlug = appData.fields.pages[0].slug;
        }
        return fetchPage(pageSlug).then((pageData) => {
          if (isPlatformServer(this.platformId)) {
            // add the two pieces of data to the transfer state separately
            this.transferState.set(APP_KEY, appData);
            this.transferState.set(PAGE_KEY, pageData);
          }
    
          // return the two pieces of data in a single object
          const fullData = { appData, pageData };
          return fullData;
        });
      });

Componente applicazione

Il componente App, che si trova in src/app/app.component.ts, definisce la vista radice.

Questo componente contiene i tag router-link. In base all'instradamento corrente, i componenti verranno spostati su e fuori dalla pagina all'interno di tali tag.

Componenti di intestazione e pagina

I componenti Intestazione e Piè di pagina vengono utilizzati per visualizzare rispettivamente l'intestazione e il piè di pagina.

I dati dell'intestazione vengono passati al componente Intestazione, che si trova in src/app/header/header.component.ts e i dati del piè di pagina vengono passati al componente Piè di pagina, che si trova nel componente src/app/footer/footer.component.ts. I componenti Intestazione e Piè di pagina utilizzano semplicemente i dati passati; non ottengono dati aggiuntivi dal server. Vedere le associazioni in src/app/header/header.component.html e src/app/footer/footer.component.html.

Componente sezione

Il componente Sezione, che si trova in src/app/section/section.component.ts, viene utilizzato dal componente Pagina e viene utilizzato per eseguire il rendering di qualsiasi elemento di contenuto di tipo MinimalSection.

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

  ngOnInit() {
        this.heading = this.section.fields.heading;
        this.type = this.section.fields.type;
        // sanitize the content for html display
        const content = this.section.fields.body;
        const options = {
          stripIgnoreTag: true, // filter out all HTML not in the whitelist
          stripIgnoreTagBody: ['script'],
        };
        this.body = filterXSS(content, options);
        this.actions = this.section.fields.actions;
        if (this.section.fields.image) {
          getRenditionURLs(this.section.fields.image.id).then((urls) => {
            this.renditionURLs = urls;
          });
        }
      }

Componente di pagina

Il componente Pagina è responsabile del rendering dell'intestazione, del piè di pagina e di tutte le sezioni definite per una pagina.

Aprire il componente Pagina, disponibile in src/app/page/page.component.ts. In ngOnInit è possibile vedere che il componente recupera i dati dall'instradamento attivo, popolato dal risolutore della home page.

  ngOnInit() {
        const fullData = this.route.snapshot.data.routeData;
        this.appData = fullData.appData;
        this.headerRenditionURLs = this.appData.headerRenditionURLs;
        this.footerRenditionURLs = this.appData.footerRenditionURLs;
    
        this.pageData = fullData.pageData;
        if (!this.pageData.hasError) {
          this.sections = this.pageData.fields.sections;
          this.pages = this.appData.fields.pages;
        }
      }

Il markup per il componente Pagina si trova in src/app/page/page.component.html.

Task 3: Prepara la tua applicazione per la distribuzione

Ora che abbiamo creato il nostro sito Angular minimal, dobbiamo vederlo in un server di sviluppo locale in modo da poter eseguire il debug di qualsiasi problema e visualizzare in anteprima l'applicazione prima che diventi attiva.

Preparare l'applicazione per la distribuzione in due passaggi:

1. Attiva un server di sviluppo locale
2. Testare l'applicazione nell'ambiente di produzione

Attiva un server di sviluppo locale

È possibile avviare localmente un server di sviluppo eseguendo il comando seguente.

npm run dev

Aprire quindi il browser a http://localhost:4200 per visualizzare il sito in azione.

Test dell'applicazione nell'ambiente di produzione

Per la produzione, lo script di build verrà utilizzato per generare il codice client e server.

Utilizzare il comando seguente per eseguire lo script di build:

npm run build

Questo script esegue in primo luogo la build del client, quindi esegue la build del server.

Distribuire il dist/server e il dist/browser creati sul computer server prima di avviare l'applicazione. Quindi utilizzare il comando seguente per avviarlo:

npm run start

Conclusione

In questa esercitazione è stato creato un sito minimo in Angular, disponibile su GitHub. Questo sito utilizza Oracle Content Management come CMS senza problemi. Dopo aver impostato e configurato Oracle Content Management con un canale di contenuto pubblicato per l'esercitazione relativa al sito minimo, abbiamo installato ed eseguito il sito angolare per recuperare il contenuto richiesto e creare il sito.

Per ulteriori informazioni su Angular, visitare il sito Web angolare.

Acquisire informazioni sui concetti importanti di Oracle Content Management nella documentazione.

Nella pagina Esempi di Oracle Content Management del Oracle Help Center è possibile trovare altri esempi.

---

Titolo e informazioni sul copyright

Crea un sito minimo in un ambiente angolare con Oracle Content Management Headless

F51768-01

Dicembre 2021

Copyright © 2021, Oracle and/or its affiliates.

Autore principale: Oracle Corporation