Criar projeto spa-editor-project

Abra um terminal de linha de comando e insira o seguinte comando Maven:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"

Observe a frontendModule=react propriedade. Isso instrui o Arquétipo de projeto AEM a inicializar o projeto com um iniciador Base de código do React para ser usado com o editor SPA AEM. Propriedades como appTitle, appId, artifactId, e groupId são usados para identificar o projeto e a finalidade.

Uma lista completa de propriedades disponíveis para configurar um projeto pode ser encontrado aqui.

A seguinte pasta e estrutura de arquivo são geradas pelo arquétipo Maven no sistema de arquivos local:

|--- aem-guides-wknd-spa.react/
    |--- LICENSE
    |--- README.md
    |--- all/
    |--- archetype.properties
    |--- core/
    |--- dispatcher/
    |--- it.tests/
    |--- pom.xml
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- .gitignore

Cada pasta representa um módulo Maven individual. Neste tutorial, trabalharemos principalmente com a ui.frontend que é o aplicativo React. Mais detalhes sobre módulos individuais podem ser encontrados na Documentação do Arquétipo de projeto do AEM.

Verifique se uma instância do AEM está sendo executada localmente na porta 4502.

Na linha de comando, navegue até o aem-guides-wknd-spa.react diretório do projeto.

$ cd aem-guides-wknd-spa.react

Execute o seguinte comando para criar e implantar o projeto inteiro no AEM:

$ mvn clean install -PautoInstallSinglePackage

A build levará cerca de um minuto e deve terminar com a seguinte mensagem:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

O perfil Maven autoInstallSinglePackage compila os módulos individuais do projeto e implanta um único pacote na instância do AEM. Por padrão, esse pacote é implantado em uma instância AEM executada localmente na porta 4502 e com as credenciais de admin:admin.

Navegue até Gerenciador de pacotes na sua instância local do AEM: http://localhost:4502/crx/packmgr/index.jsp.

Você deve ver vários pacotes com o prefixo aem-guides-wknd-spa.react.

Gerenciador de pacotes AEM

Todo o código personalizado necessário para o projeto está incluído nesses pacotes e instalado no ambiente AEM.

Navegue até a Sites console: http://localhost:4502/sites.html/content.

O SPA WKND inclui uma estrutura básica do site com um país, idioma e página inicial. Essa hierarquia é baseada nos valores padrão do arquétipo para language_country e isSingleCountryWebsite. Esses valores podem ser substituídos pela atualização da variável propriedades disponíveis ao gerar um projeto.

Abra o us > en > Página inicial do WKND SPA React selecionando a página e clicando no ícone Editar botão na barra de menus:

A Texto já foi adicionado à página. É possível editar esse componente como qualquer outro componente no AEM.

Adicionar um adicional Texto componente à página.

Observe que a experiência de criação é semelhante àquela de uma página tradicional do AEM Sites. Atualmente, um número limitado de componentes está disponível para uso. Mais informações são adicionadas durante o curso do tutorial.

No Editor de páginas, clique no link Informações da página botão > Exibir como publicado:

Isso abrirá uma nova guia com o parâmetro de consulta ?wcmmode=disabled que desliga efetivamente o editor AEM: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Visualize a fonte da página e observe que o conteúdo do texto Hello World ou qualquer outro conteúdo não for encontrado. Em vez disso, você deve ver HTML como o seguinte:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js O é o SPA do React que é carregado na página e responsável pela renderização do conteúdo.

No entanto, de onde vem o conteúdo?

Retorne à guia: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Abra as ferramentas de desenvolvedor do navegador e inspecione o tráfego de rede da página durante uma atualização. Exibir o XHR solicitações:

Deve ser feita uma solicitação para http://localhost:4502/content/wknd-spa-react/us/en.model.json. Ele contém todo o conteúdo, formatado em JSON, que direcionará o SPA.

Em uma nova guia, abra http://localhost:4502/content/wknd-spa-react/us/en.model.json

A solicitação en.model.json representa o modelo de conteúdo que direcionará o aplicativo. Inspect a saída JSON e você poderá encontrar o trecho que representa a variável Texto componente(s)

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...

No próximo capítulo, verificaremos como esse conteúdo JSON é mapeado de componentes AEM para componentes SPA, a fim de formar a base da experiência do editor de AEM SPA.