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
.
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.
Nella directory del progetto, è possibile eseguire i comandi sotto riportati:
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:
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
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.
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.
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.