Configurazione sviluppo locale

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

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

Passare alla directory basic-tutorial e aprirla 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 team e dei 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.

Arrestare React premendo Ctrl + C nel terminale.

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

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

Aggiornare 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
...

Aggiornare 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