Configuration du développement local

Clonez l’application React WKND Teams de la branche de solution basic-tutorial.

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

Accédez au répertoire basic-tutorial et ouvrez-le dans votre éditeur de code.

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

Installez les dépendances et démarrez l’application React.

$ npm install
$ npm start

Ouvrez l’application React WKND Teams dans votre navigateur à l’adresse http://localhost:3000. Elle affiche la liste des personnes membres de l’équipe et leurs détails. Le contenu de l’application React est fourni par le SDK AEM local à l’aide des API GraphQL (/graphql/execute.json/my-project/all-teams), que vous pouvez vérifier à l’aide de l’onglet réseau du navigateur.

Téléchargez la dernière version de l’éditeur universel à partir du Portail de distribution logicielle.

Extrayez le fichier ZIP téléchargé et copiez le fichier universal-editor-service.cjs dans un nouveau répertoire appelé universal-editor-service.

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

Créez le fichier .env dans le répertoire universal-editor-service et ajoutez les variables d’environnement suivantes :

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

Démarrez le service local Éditeur universel.

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

Installez le package local-ssl-proxy de manière globale.

$ npm install -g local-ssl-proxy

Démarrez deux instances du proxy HTTP SSL local pour les services suivants :

• SDL AEM local du proxy HTTP SSL sur le port 8443.
• Proxy HTTP SSL local du service Éditeur universel sur le port 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

Arrêtez l’application React en appuyant sur Ctrl + C dans le terminal.

Mettez à jour le fichier package.json pour inclure la variable d’environnement HTTPS=true dans le script start.

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

Mettez à jour REACT_APP_HOST_URI dans le fichier .env.development pour utiliser le protocole HTTPS et le port proxy HTTP SSL local du SDK AEM.

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

Mettez à jour le fichier ../src/proxy/setupProxy.auth.basic.js pour utiliser des paramètres SSL souples à l’aide de l’option 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}`
    })
);
};

Démarrez l’application React.

$ npm start

Ouvrez l’éditeur universel https://experience.adobe.com/#/aem/editor dans votre navigateur. Si on vous y invite, connectez-vous à l’aide de votre Adobe ID.

Saisissez l’URL de l’application React WKND Teams dans le champ de saisie URL du site de l’éditeur universel et cliquez sur Open.

L’application React WKND Teams se charge dans l’éditeur universel, mais vous ne pouvez pas encore modifier le contenu. Vous devez utiliser l’application React pour activer la modification de contenu à l’aide de l’éditeur universel.