Configuração do desenvolvimento local

Clonar o aplicativo WKND Teams React da ramificação de solução basic-tutorial.

$ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

Navegue até o diretório basic-tutorial e abra-o no editor de código.

$ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

Instale as dependências e inicie o aplicativo React.

$ npm install
$ npm start

Abra o aplicativo WKND Teams React no navegador em http://localhost:3000. Ele exibe uma lista de membros da equipe e seus detalhes. O conteúdo do aplicativo React é fornecido pelo AEM SDK local usando APIs do GraphQL (/graphql/execute.json/my-project/all-teams), que você pode verificar usando a guia de rede do navegador.

Baixe a versão mais recente do serviço Universal Editor do Portal de Distribuição de Software.

Extraia o arquivo zip baixado e copie o arquivo universal-editor-service.cjs para um novo diretório chamado universal-editor-service.

$ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

Crie o arquivo .env no diretório universal-editor-service e adicione as seguintes variáveis de ambiente:

# The port on which the Universal Editor service runs
UES_PORT=8000
# Disable SSL verification
UES_TLS_REJECT_UNAUTHORIZED=false

Iniciar o serviço Editor Universal local.

$ cd universal-editor-service
$ node universal-editor-service.cjs

Instalar o pacote local-ssl-proxy globalmente.

$ npm install -g local-ssl-proxy

Inicie duas instâncias do proxy HTTP SSL local para os seguintes serviços:

• Proxy HTTP SSL local do AEM SDK na porta 8443.
• Proxy HTTP SSL local do serviço do Universal Editor na porta 8001.

# AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

Pare o React pressionando Ctrl + C no terminal.

Atualize o arquivo package.json para incluir a variável de ambiente HTTPS=true no script start.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

Atualize o REACT_APP_HOST_URI no arquivo .env.development para usar o protocolo HTTPS e a porta do proxy HTTP SSL local do AEM SDK.

REACT_APP_HOST_URI=https://localhost:8443
...

Atualize o arquivo ../src/proxy/setupProxy.auth.basic.js para usar configurações de SSL relaxadas usando a opção secure: false.

...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

Inicie o aplicativo React.

$ npm start

Abra o Editor universal https://experience.adobe.com/#/aem/editor no navegador. Se solicitado, faça logon usando sua Adobe ID.

Insira a URL do aplicativo WKND Teams React no campo de entrada URL do site do Editor Universal e clique em Open.

O aplicativo WKND Teams React é carregado no Universal Editor mas você ainda não pode editar o conteúdo. É necessário instrumentar o aplicativo React para habilitar a edição de conteúdo usando o Editor universal.