Crea la prima applicazione a pagina singola React in AEM

Ti diamo il benvenuto in un tutorial in più parti progettato per gli sviluppatori che hanno introdotto la funzionalità Editor SPA in Adobe Experience Manager (AEM). Questo tutorial illustra l’implementazione di un’applicazione React per un brand di lifestyle fittizio, il WKND. L’app React verrà sviluppata e progettata per essere implementata con l’Editor SPA di AEM, che mappa i componenti React sui componenti AEM. L’applicazione a pagina singola completata, implementata in AEM, può essere creata in modo dinamico con i tradizionali strumenti di modifica in linea di AEM.

SPA finale implementata

Implementazione SPA WKND

Informazioni su

L’obiettivo di questa esercitazione in più parti è insegnare a uno sviluppatore come implementare un’applicazione React per lavorare con la funzione Editor SPA di AEM. In uno scenario reale, le attività di sviluppo sono suddivise per tipo, spesso coinvolgendo uno sviluppatore front-end e uno sviluppatore back-end. Riteniamo utile per qualsiasi sviluppatore che sarà coinvolto in un progetto AEM SPA Editor di completare questa esercitazione.

Il tutorial è progettato per funzionare con AEM as a Cloud Service ed è retrocompatibile con AEM 6.5.4+ e AEM 6.4.8+. L’applicazione a pagina singola è implementata utilizzando:

Stimare 1-2 ore per passare attraverso ciascuna parte dell’esercitazione.

Codice più recente

Tutto il codice dell'esercitazione si trova su GitHub.

La base di codice più recente è disponibile come pacchetti AEM scaricabili.

Prerequisiti

Prima di avviare questa esercitazione, è necessario quanto segue:

Sebbene non sia necessario, è utile avere una conoscenza di base sullo sviluppo dei componenti AEM Sites tradizionali.

Ambiente di sviluppo locale

Per completare questa esercitazione, è necessario un ambiente di sviluppo locale. Le schermate e i video vengono acquisiti utilizzando l’SDK di AEM as a Cloud Service in esecuzione in un ambiente Mac OS con Visual Studio Code come IDE. I comandi e il codice devono essere indipendenti dal sistema operativo locale, salvo diversa indicazione.

NOTA

Ti avvicini adesso ad AEM as a Cloud Service? Consulta la seguente guida per configurare un ambiente di sviluppo locale utilizzando SDK di AEM as a Cloud Service.

Ti avvicini ora ad AEM 6.5? Consulta la seguente guida per configurare un ambiente di sviluppo locale.

Passaggi successivi

Cosa stai aspettando?! Avvia l’esercitazione andando al capitolo Progetto editor SPA e scopri come generare un progetto abilitato per l’editor SPA utilizzando AEM Project Archetype.

Compatibilità con le versioni precedenti

Il codice del progetto per questa esercitazione è stato creato per AEM as a Cloud Service. Per rendere il codice del progetto retrocompatibile per 6.5.4+ e 6.4.8+ sono state apportate diverse modifiche ai file POM dell’esercitazione.

La UberJar v6.4.4 è stata inclusa come dipendenza:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

È stato aggiunto un profilo Maven aggiuntivo, denominato classic, per modificare la build per gli ambienti AEM 6.x:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

Il profilo classic è disabilitato per impostazione predefinita. Se segui l’esercitazione con AEM 6.x, aggiungi il profilo classic ogni volta che ti viene richiesto di eseguire una build Maven, ovvero:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Quando si genera un nuovo progetto per un'implementazione AEM, utilizza sempre la versione più recente di AEM Project Archetype e aggiorna aemVersion per eseguire il targeting della versione prevista di AEM.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now