Configuração do desenvolvimento local

Clone o aplicativo React WKND Teams a partir da ramificação da 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 React WKND Teams 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 SDK do AEM local, usando as APIs do GraphQL (/graphql/execute.json/my-project/all-teams), que você pode verificar por meio da guia de rede do navegador.

Baixe a versão mais recente do serviço do editor universal do Portal de distribuição de softwares.

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

Inicie o serviço do editor universal local.

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

Instale 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 SDK do AEM na porta 8443.
• Proxy HTTP SSL local do serviço do editor universal 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 SDK do AEM.

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

Atualize o arquivo ../src/proxy/setupProxy.auth.basic.js para usar as 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 seu navegador. Se solicitado, faça logon com o seu Adobe ID.

Insira o URL do aplicativo React WKND Teams no campo de inserção de URL do site do editor universal e clique em Open.

O aplicativo React WKND Teams será carregado no editor universal, mas você ainda não poderá editar o conteúdo. É necessário instrumentar o aplicativo React para habilitar a edição de conteúdo com o editor universal.