Sviluppo 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 il comando create-react-app.

Questa applicazione è stata sviluppata per avvalersi del modello AEM di un sito. Genera automaticamente il layout utilizzando i componenti helper del pacchetto @adobe/cq-react-editable-components.

Script

Nella directory del progetto, è possibile eseguire i comandi sotto riportati:

npm start

npm start

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

Dopo aver eseguito il comando 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 viene ricaricata.

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

  1. Vai a Gestione configurazione (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: OPZIONI

npm test

npm test

Questo comando avvia l’esecuzione dei test in modalità espressione di controllo interattivo. Per ulteriori informazioni, vedi la documentazione di React sull’esecuzione dei test.

npm run build

npm run build

Questo comando esegue lo sviluppo dell’app per la produzione nella cartella di sviluppo. Crea il bundle React in modalità di produzione e ottimizza lo sviluppo per ottenere le migliori prestazioni. Per ulteriori informazioni, vedi la documentazione di React sulla distribuzione.

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

Supporto del browser

Per impostazione predefinita, questo progetto utilizza l’opzione predefinita Browserslist per identificare i browser di destinazione. Inoltre, include i polyfill per permettere alle moderne funzioni di lingua di supportare i browser precedenti (ad esempio, Internet Explorer 11). Se il supporto di questi browser non è un requisito, le dipendenze e importazioni di polyfill possono essere rimosse.

Suddivisione del codice

Per impostazione predefinita, l’app React è configurata per utilizzare la suddivisione del codice. Durante lo sviluppo 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 se necessari può migliorare notevolmente le prestazioni dell’app.

Perché questa funzione interagisca con AEM, l’app deve poter identificare quali file JS e CSS devono essere richiesti all’HTML generato da AEM. Ciò 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 vengono inclusi nel bundle in ClientLib. I restanti file vengono inseriti nella directory delle risorse di ClientLib e verranno richiesti dinamicamente e quindi caricati solo quando saranno effettivamente necessari.

Per ulteriori informazioni sull’utilizzo delle AEM ClientLib da parte dell’Archetipo di progetto, vedi la documentazione generale del modulo ui.frontend.

In questa pagina