Build Front-End para React SPA

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 React. Ou seja, quando você define a opção frontendModule para react.

Visão geral

Este projeto foi inicializado com create-response-app.

Este aplicativo é criado para consumir o modelo de AEM de um site. Ele gerará automaticamente o layout usando os componentes de ajuda do pacote @adobe/cq-response-editable-components.

Scripts

No diretório do projeto, você pode executar os seguintes comandos:

npm start

npm start

Este comando executa o aplicativo no modo de desenvolvimento, enviando o modelo JSON de uma instância de AEM local em execução em http://localhost:4502. Isso pressupõe que todo o projeto foi implantado em 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 AEM da seguinte maneira:

1. Navegue até o Configuration Manager (http://localhost:4502/system/console/configMgr)
2. Abra a configuração para "Política de compartilhamento de recursos entre origens do Adobe Granite"
3. Crie uma nova configuração com os seguintes valores adicionais:
   • Origens permitidas: http://localhost:3000
   • Cabeçalhos suportados: Autorização
   • Métodos permitidos: OPTIONS

teste npm

npm test

Este comando inicia o executor de teste no modo de observação interativo. Consulte a documentação React sobre a execução de testes para obter mais informações.

npm executar compilação

npm run build

Este comando cria o aplicativo para produção na pasta de compilação. Ele agrupa o React no modo de produção e otimiza a build para obter o melhor desempenho. Consulte a documentação React sobre implantação para obter mais informações.

Além disso, um ClientLib AEM é gerado pelo aplicativo usando o pacote aem-clientlib-generator.

Suporte ao navegador

Por padrão, esse projeto usa a opção padrão de Browserslist para identificar navegadores de destino. Além disso, inclui preenchimentos eletrônicos 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.

Divisão de código

O aplicativo React é configurado para usar 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

O carregamento de 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 "entrypoints" no arquivo asset-manifest.json . O arquivo é analisado em clientlib.config.js e somente os arquivos do ponto de entrada são agrupados no ClientLib. Os arquivos restantes são colocados no diretório de recursos do ClientLib e serão solicitados dinamicamente e, portanto, carregados somente quando forem realmente necessários.

Consulte a documentação geral do módulo ui.frontend para obter mais informações sobre como AEM ClientLibs são usadas pelo arquétipo de projeto.