Build front-end per SPA React

In questo documento vengono illustrati i dettagli del progetto creato quando si utilizza l'archetipo per creare un'applicazione a pagina singola (SPA) basata sul framework React. Ad esempio, quando imposti l’opzione frontendModule su react.

Panoramica

Questo progetto è stato avviato con create-react-app.

Questa applicazione è creata per utilizzare il modello AEM di un sito. Genererà automaticamente il layout utilizzando i componenti helper del pacchetto @adobe/cq-react-editable-components .

Script

Nella directory di progetto, puoi eseguire i seguenti comandi:

inizio npm

npm start

Questo comando esegue l'app in modalità di sviluppo tramite il proxy del modello JSON da un'istanza AEM locale in esecuzione su http://localhost:4502. Ciò presuppone che l’intero progetto sia stato distribuito per AEM almeno una volta (mvn clean install -PautoInstallPackage nella directory principale del progetto).

Dopo aver eseguito npm start nella directory ui.frontend, l’app verrà automaticamente aperta nel browser (nel percorso http://localhost:3000/content/<appId>/<country>/<language>/home.html). Se apporti modifiche, la pagina verrà ricaricata.

Se ricevi errori relativi a CORS, configura AEM come segue:

  1. Passa a Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. Apri la configurazione per "Adobe Granite Cross-Origin Resource Sharing Policy"
  3. Crea una nuova configurazione con i seguenti valori aggiuntivi:
    • Origini consentite: http://localhost:3000
    • Intestazioni supportate: Autorizzazione
    • Metodi consentiti: OPTIONS

test npm

npm test

Questo comando avvia l'esecuzione del test in modalità orologio interattivo. Per ulteriori informazioni, consulta la documentazione React sull'esecuzione di test .

build di esecuzione npm

npm run build

Questo comando crea l'app per la produzione nella cartella build. Offre la funzionalità React in modalità di produzione e ottimizza la build per ottenere le migliori prestazioni. Per ulteriori informazioni, consulta la documentazione React sulla distribuzione .

Inoltre, un AEM ClientLib viene generato dall'app utilizzando il pacchetto aem-clientlib-generator .

Supporto browser

Per impostazione predefinita, questo progetto utilizza l'opzione predefinita BrowserList per identificare i browser di destinazione. Inoltre, include i polyfills per le funzioni della lingua moderna per supportare i browser più vecchi (ad esempio Internet Explorer 11). Se il supporto di tali browser non è un requisito, le dipendenze di polyfill e le importazioni possono essere rimosse.

Suddivisione del codice

L'app React è configurata per l'utilizzo di suddivisione del codice per impostazione predefinita. Durante la creazione dell'app per la produzione, il codice viene inviato in diversi blocchi:

$ ls build/static/js
2.5b77f553.chunk.js
2.5b77f553.chunk.js.map
main.cff1a559.chunk.js
main.cff1a559.chunk.js.map
runtime~main.a8a9905a.js
runtime~main.a8a9905a.js.map

Il caricamento dei blocchi solo quando necessari può migliorare notevolmente le prestazioni dell’app.

Affinché questa funzione funzioni con AEM, l’app deve essere in grado di identificare quali file JS e CSS devono essere richiesti dall’HTML generato da AEM. Questo può essere ottenuto utilizzando la chiave "entrypoints" nel file asset-manifest.json. Il file viene analizzato in clientlib.config.js e solo i file entrypoint sono raggruppati in ClientLib. I file rimanenti vengono inseriti nella directory delle risorse di ClientLib e verranno richiesti dinamicamente e quindi caricati solo quando sono effettivamente necessari.

Per ulteriori informazioni sull'utilizzo di ClientLibs AEM dall'archetipo del progetto, consulta la documentazione generale del modulo ui.frontend .

In questa pagina