Configuration du développement local

Cloner l’application WKND Teams React 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 WKND Teams React dans votre navigateur à l’adresse http://localhost:3000. Elle affiche la liste des membres de l’équipe et leurs détails. Le contenu de l’application React est fourni par le SDK d’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 du service Universal Editor à partir du Portail de distribution de logiciels.

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
EXPRESS_PORT=8000
# Disable SSL verification
NODE_TLS_REJECT_UNAUTHORIZED=0

Démarrez le service local Universal Editor.

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

Installez le package local-ssl-proxy globalement.

$ npm install -g local-ssl-proxy

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

• AEM SDK local du proxy HTTP SSL sur le port 8443.
• proxy HTTP SSL local du service Universal Editor 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 le 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 Universal Editor https://experience.adobe.com/#/aem/editor dans votre navigateur. Si vous y êtes invité, connectez-vous à l’aide de votre Adobe ID.

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

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