Configurazione dello sviluppo locale

Clona l'app WKND Teams React dal ramo della soluzione basic-tutorial.

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

Passa alla directory basic-tutorial e aprila nell'editor di codice.

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

Installa le dipendenze e avvia l'app React.

$ npm install
$ npm start

Apri l'app WKND Teams React nel browser in http://localhost:3000. Viene visualizzato un elenco dei membri del gruppo e i relativi dettagli. Il contenuto dell'app React è fornito dal SDK AEM locale tramite le API GraphQL (/graphql/execute.json/my-project/all-teams), che puoi verificare utilizzando la scheda di rete del browser.

Scarica la versione più recente del servizio Editor universale dal Portale di distribuzione software.

Estrai il file zip scaricato e copia il file universal-editor-service.cjs in una nuova directory denominata universal-editor-service.

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

Crea il file .env nella directory universal-editor-service e aggiungi le seguenti variabili di ambiente:

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

Avvia il servizio dell’editor universale locale.

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

Installare il pacchetto local-ssl-proxy a livello globale.

$ npm install -g local-ssl-proxy

Avvia due istanze del proxy HTTP SSL locale per i servizi seguenti:

• Proxy HTTP SSL locale di AEM SDK sulla porta 8443.
• Proxy HTTP SSL locale del servizio Editor universale sulla 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

Interrompi React premendo Ctrl + C nel terminale.

Aggiorna il file package.json per includere la variabile di ambiente HTTPS=true nello script start.

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

Aggiorna REACT_APP_HOST_URI nel file .env.development per utilizzare il protocollo HTTPS e la porta proxy HTTP SSL locale di AEM SDK.

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

Aggiorna il file ../src/proxy/setupProxy.auth.basic.js per utilizzare le impostazioni SSL flessibili utilizzando l’opzione 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}`
    })
);
};

Avvia l’app React.

$ npm start

Apri l’editor universale https://experience.adobe.com/#/aem/editor nel browser. Se richiesto, effettua l’accesso con il tuo Adobe ID.

Immetti l’URL dell’app React WKND Teams nel campo di input per l’URL del sito dell’editor universale e fai clic su Open.

L’app React WKND Teams viene caricata nell’editor universale ma non è ancora possibile modificare il contenuto. È necessario dotare l’app React di strumenti che consentano di modificare i contenuti mediante l’editor universale.