Bootstrap: o SPA remoto para o editor de SPA
- O editor universal para editar conteúdo headless visualmente.
- O editor de fragmentos de conteúdo para editar conteúdo headless com base em formulários.
Para que as áreas editáveis possam ser adicionadas ao SPA remoto, ele deve ser inicializado com o AEM SPA Editor JavaScript SDK e algumas outras configurações.
Instalar dependências npm do AEM SPA Editor JS SDK
Primeiro, analise as dependências de SPA npm do AEM para o projeto React e instale-as.
@adobe/aem-spa-page-model-manager
: fornece a API para recuperar conteúdo do AEM.@adobe/aem-spa-component-mapping
: fornece a API que mapeia o conteúdo AEM para componentes SPA.@adobe/aem-react-editable-components
v2 : fornece uma API para a compilação de componentes de SPA personalizados e fornece implementações de uso comum, como o componente ReactAEMPage
.
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components
Revisar variáveis de ambiente SPA
Várias variáveis de ambiente devem ser expostas ao SPA remoto para que ele saiba como interagir com o AEM.
-
Abrir projeto SPA Remoto em
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
no IDE -
Abrir o arquivo
.env.development
-
No arquivo, preste atenção específica às chaves e atualize conforme necessário:
code language-none REACT_APP_HOST_URI=http://localhost:4502 REACT_APP_USE_PROXY=true REACT_APP_AUTH_METHOD=basic REACT_APP_BASIC_AUTH_USER=admin REACT_APP_BASIC_AUTH_PASS=admin
Lembre-se de que as variáveis de ambiente personalizadas no React devem receber o prefixo
REACT_APP_
.-
REACT_APP_HOST_URI
: o esquema e o host do serviço AEM ao qual o SPA Remoto se conecta.- Esse valor é alterado com base no tipo de serviço do AEM (local, Desenvolvimento, Preparo ou Produção) e do AEM (Autor versus Publicação)
-
REACT_APP_USE_PROXY
: isso evita problemas do CORS durante o desenvolvimento, informando ao servidor de desenvolvimento do react para solicitações de proxy AEM, como/content, /graphql, .model.json
usando o módulohttp-proxy-middleware
. -
REACT_APP_AUTH_METHOD
: método de autenticação para solicitações atendidas pelo AEM, as opções são "service-token", "dev-token", "basic" ou deixe em branco para caso de uso sem autenticação- Obrigatório para uso com o AEM Author
- Possivelmente necessário para uso com o AEM Publish (se o conteúdo estiver protegido)
- O desenvolvimento no AEM SDK é compatível com contas locais via Autenticação básica. Este é o método usado neste tutorial.
- Ao integrar com o AEM as a Cloud Service, use tokens de acesso
-
REACT_APP_BASIC_AUTH_USER
: o nome de usuário do AEM pelo SPA para autenticar ao recuperar o conteúdo do AEM. -
REACT_APP_BASIC_AUTH_PASS
: a senha do AEM pelo SPA para autenticar ao recuperar o conteúdo do AEM.
-
Integrar a API ModelManager
Com as dependências npm de SPA do AEM disponíveis para o aplicativo, inicialize o ModelManager
do AEM no index.js
do projeto antes que ReactDOM.render(...)
seja chamado.
O ModelManager é responsável pela conexão com o AEM para recuperar o conteúdo editável.
-
Abra o projeto do SPA remoto no IDE
-
Abrir o arquivo
src/index.js
-
Adicionar importação
ModelManager
e inicializá-la antes da invocaçãoroot.render(..)
,code language-javascript ... import { ModelManager } from "@adobe/aem-spa-page-model-manager"; // Initialize the ModelManager before invoking root.render(..). ModelManager.initializeAsync(); const container = document.getElementById('root'); const root = createRoot(container); root.render(<App />);
O arquivo src/index.js
deve ser semelhante a:
Configurar um proxy de SPA interno
Ao criar um SPA editável, é melhor configurar um proxy interno no SPA, que esteja configurado para rotear as solicitações apropriadas para o AEM. Isso é feito usando o módulo http-proxy-middleware npm, que já está instalado pelo aplicativo WKND GraphQL base.
-
Abra o projeto do SPA remoto no IDE
-
Abrir o arquivo em
src/proxy/setupProxy.spa-editor.auth.basic.js
-
Atualize o arquivo com o seguinte código:
code language-javascript const { createProxyMiddleware } = require('http-proxy-middleware'); const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env; /* Set up a proxy with AEM for local development In a production environment this proxy should be set up at the webserver level or absolute URLs should be used. */ module.exports = function(app) { /** * Filter to check if the request should be re-routed to AEM. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with .model.json (AEM Content Services) * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns true if the SPA request should be re-routed to AEM */ const toAEM = function(path, req) { return path.startsWith('/content') || path.startsWith('/graphql') || path.endsWith('.model.json') } /** * Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources * - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM * - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/ * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns returns a re-written path, or nothing to use the @param path */ const pathRewriteToAEM = function (path, req) { if (path === '/.model.json') { return '/content/wknd-app/us/en/home.model.json'; } else if (path.startsWith('/adventure/') && path.endsWith('.model.json')) { return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop(); } } /** * Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter */ app.use( createProxyMiddleware( toAEM, // Only route the configured requests to AEM { target: REACT_APP_HOST_URI, changeOrigin: true, // Pass in credentials when developing against an Author environment auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`, pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM } ) ); /** * Enable CORS on requests from the SPA to AEM * * If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000 */ app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI); next(); }); };
O arquivo
setupProxy.spa-editor.auth.basic.js
deve ser semelhante a:Essa configuração de proxy faz duas coisas principais:
-
Solicitações específicas de proxy feitas ao SPA (
http://localhost:3000
) para o AEMhttp://localhost:4502
- Somente solicitações de proxy cujos caminhos correspondem a padrões que indicam que devem ser atendidos pelo AEM, conforme definido em
toAEM(path, req)
. - Ele substitui caminhos de SPA para suas páginas de AEM de contrapartida, conforme definido em
pathRewriteToAEM(path, req)
- Somente solicitações de proxy cujos caminhos correspondem a padrões que indicam que devem ser atendidos pelo AEM, conforme definido em
-
Ele adiciona cabeçalhos CORS a todas as solicitações para permitir acesso ao conteúdo AEM, conforme definido por
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
- Se isso não for adicionado, ocorrerão erros CORS ao carregar o conteúdo do AEM no SPA.
-
-
Abrir o arquivo
src/setupProxy.js
-
Revise a linha que aponta para o arquivo de configuração de proxy
setupProxy.spa-editor.auth.basic
:code language-none ... case BASIC: // Use user/pass for local development with Local Author Env return require('./proxy/setupProxy.spa-editor.auth.basic'); ...
Observe que qualquer alteração no src/setupProxy.js
ou em seus arquivos referenciados requer uma reinicialização do SPA.
Recurso SPA estático
Os recursos de SPA estáticos, como o Logotipo WKND e o Carregamento de gráficos, precisam ter seus URLs src atualizados para forçá-los a serem carregados do host do SPA remoto. Se relativo, quando o SPA é carregado no Editor de SPA para criação, esses URLs assumem o padrão de usar o host do AEM, em vez do SPA, resultando em 404 solicitações, conforme ilustrado na imagem abaixo.
Para resolver esse problema, faça com que um recurso estático hospedado pelo SPA remoto use caminhos absolutos que incluam a origem do SPA remoto.
-
Abra o projeto SPA no IDE
-
Abra o arquivo de variáveis de ambiente
src/.env.development
do SPA e adicione uma variável para o URI público do SPA:code language-none ... # The base URI the SPA is accessed from REACT_APP_PUBLIC_URI=http://localhost:3000
Ao implantar no AEM as a Cloud Service, você precisa fazer o mesmo para os
.env
arquivos correspondentes. -
Abrir o arquivo
src/App.js
-
Importe o URI público de SPA das variáveis de ambiente de SPA
code language-javascript const { REACT_APP_PUBLIC_URI } = process.env; function App() { ... }
-
Prefixe o logotipo WKND
<img src=.../>
comREACT_APP_PUBLIC_URI
para forçar a resolução contra o SPA.code language-html <img src={REACT_APP_PUBLIC_URI + '/' + logo} className="logo" alt="WKND Logo"/>
-
Faça o mesmo para carregar a imagem em
src/components/Loading.js
code language-javascript const { REACT_APP_PUBLIC_URI } = process.env; class Loading extends Component { render() { return (<div className="loading"> <img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." /> </div>); } }
-
E para as duas instâncias do botão Voltar em
src/components/AdventureDetails.js
code language-javascript const { REACT_APP_PUBLIC_URI } = process.env; function AdventureDetail(props) { ... render() { <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" /> } }
Os arquivos App.js
, Loading.js
e AdventureDetails.js
devem ter a seguinte aparência:
Grade responsiva do AEM
Para oferecer suporte ao modo de layout do Editor de SPA para áreas editáveis no SPA, devemos integrar o CSS de grade responsiva do AEM no SPA. Não se preocupe: esse sistema de grade é aplicável apenas aos contêineres editáveis e você pode usar o sistema de grade de sua escolha para direcionar o layout do restante do SPA.
Adicione os arquivos SCSS da Grade responsiva do AEM ao SPA.
-
Abra o projeto SPA no IDE
-
Baixe e copie os dois arquivos a seguir em
src/styles
- _grid.scss
- O gerador de SCSS da grade responsiva do AEM
- _grid-init.scss
- Invoca
_grid.scss
usando os pontos de interrupção específicos do SPA (desktop e dispositivos móveis) e as colunas (12).
- Invoca
- _grid.scss
-
Abrir
src/App.scss
e importar./styles/grid-init.scss
code language-scss ... @import './styles/grid-init'; ...
Os arquivos _grid.scss
e _grid-init.scss
devem ter a seguinte aparência:
Agora, o SPA inclui o CSS necessário para oferecer suporte ao Modo de layout do AEM para componentes adicionados a um contêiner do AEM.
Classes de utilitário
Copie as seguintes classes de utilitários no projeto de aplicativo React.
- RoutedLink.js a
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
- EditorPlaceholder.js a
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
- withConditionalPlaceholder.js a
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
- withStandardBaseCssClass.js to
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js
Iniciar o SPA
Agora que o SPA foi inicializado para integração com o AEM, vamos executar o SPA e ver como ele se parece!
-
Na linha de comando, navegue até a raiz do projeto de SPA
-
Inicie o SPA usando os comandos normais (se você ainda não tiver feito isso)
code language-shell $ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app $ npm install $ npm run start
-
Navegue pelo SPA em http://localhost:3000. Tudo deve ficar bem!
Abra o SPA no AEM SPA Editor
Com o SPA em execução em http://localhost:3000, vamos abri-lo usando o AEM SPA Editor. Nada é editável no SPA ainda, isso só valida o SPA no AEM.
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND > us > en
-
Selecione a Página Inicial do Aplicativo WKND e toque em Editar, e o SPA será exibido.
-
Alternar para Visualização usando o alternador de modo no canto superior direito
-
Clique ao redor do SPA
Parabéns!
Você inicializou o SPA remoto para ser compatível com o AEM SPA Editor! Agora você sabe como:
- Adicionar as dependências npm do SDK JS do Editor SPA do AEM ao projeto SPA
- Configurar as variáveis de ambiente do SPA
- Integrar a API ModelManager ao SPA
- Configure um proxy interno para o SPA para que ele encaminhe as solicitações de conteúdo apropriadas para o AEM
- Resolver problemas com recursos estáticos de SPA que são resolvidos no contexto do Editor de SPA
- Adicionar CSS de grade responsiva do AEM para oferecer suporte à definição de layout em containers editáveis do AEM
Próximas etapas
Agora que atingimos uma linha de base de compatibilidade com o AEM SPA Editor, podemos começar a introduzir áreas editáveis. Primeiro, observamos como colocar um componente editável fixo no SPA.