Este documento explica os detalhes do projeto criado ao usar o arquétipo para criar um aplicativo de página única (SPA) com base na estrutura do React. Ou seja, ao definir a opção frontendModule
para react
.
Este projeto foi inicializado com create-response-app.
Este aplicativo é criado para consumir o modelo do AEM de um site. Ele gerará automaticamente o layout usando os componentes de ajuda do pacote @adobe/cq-response-editable-components.
No diretório do projeto, você pode executar os seguintes comandos:
npm start
Este comando executa o aplicativo no modo de desenvolvimento, usando o proxy do modelo JSON de uma instância do AEM local em execução em http://localhost:4502. Isso pressupõe que todo o projeto foi implantado no AEM pelo menos uma vez (mvn clean install -PautoInstallPackage
na raiz do projeto).
Depois de executar npm start
no diretório ui.front-end, seu aplicativo será aberto automaticamente no navegador (no caminho http://localhost:3000/content/<appId>/<country>/<language>/home.html
). Se você fizer edições, a página será recarregada.
Se você estiver recebendo erros relacionados ao CORS, convém configurar o AEM da seguinte maneira:
npm test
Este comando inicia o executor de teste no modo de observação interativo. Consulte a documentação do React sobre a execução de testes para mais informações.
npm run build
Este comando cria o aplicativo para produção na pasta de build. Ele agrupa o React no modo de produção e otimiza a build para obter o melhor desempenho. Consulte a documentação do React sobre implantação para mais informações.
Além disso, uma ClientLib do AEM é gerado pelo aplicativo usando o pacote aem-clientlib-generator.
Por padrão, esse projeto usa a opção Browserslist padrão para identificar navegadores de destino. Além disso, inclui polyfills para recursos de linguagem moderna para suportar navegadores mais antigos (por exemplo, Internet Explorer 11). Se o suporte a esses navegadores não for um requisito, as dependências de polyfill e as importações poderão ser removidas.
O aplicativo React é configurado para usar a divisão de código por padrão. Ao criar o aplicativo para produção, o código será emitido em várias partes:
$ 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
Carregar as partes somente quando necessário pode melhorar significativamente o desempenho do aplicativo.
Para que esse recurso funcione com o AEM, o aplicativo precisa identificar quais arquivos JS e CSS precisam ser solicitados do HTML gerado pelo AEM. Isso pode ser feito usando a chave "pontos de entrada" no arquivo asset-manifest.json. O arquivo é analisado em clientlib.config.js e somente os arquivos do ponto de entrada são agrupados na ClientLib. Os arquivos restantes são colocados no diretório de recursos da ClientLib e serão solicitados dinamicamente e, portanto, carregados somente quando forem realmente necessários.
Consulte a documentação do módulo ui.frontend para mais informações sobre como ClientLibs do AEM são usadas pelo arquétipo de projeto.