Avant que les zones modifiables puissent être ajoutées au SPA distant, il doit être démarré avec le SDK JavaScript de l’AEM éditeur et quelques autres configurations.
Si vous ne l’avez pas déjà fait, téléchargez le code source de l’application WKND à partir de Github.com, puis changez de branche contenant les modifications apportées au SPA exécuté dans ce tutoriel.
$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql
Tout d’abord, ajoutez AEM dépendances npm SPA au projet React.
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install --save \
@adobe/aem-spa-page-model-manager \
@adobe/aem-spa-component-mapping \
@adobe/aem-react-editable-components \
@adobe/aem-core-components-react-base \
@adobe/aem-core-components-react-spa
@adobe/aem-spa-page-model-manager
fournit l’API pour récupérer du contenu d’AEM.@adobe/aem-spa-component-mapping
fournit l’API qui mappe AEM contenu aux composants SPA. @adobe/aem-react-editable-components
fournit une API pour la création de composants SPA personnalisés et fournit des implémentations courantes telles que le composant AEMPage
React.@adobe/aem-core-components-react-base
fournit une suite de composants React prêts à l’emploi qui s’intègrent facilement aux composants principaux de la gestion de contenu web d’AEM et sont indifférents SPA l’éditeur. Il s’agit principalement de composants de contenu, tels que :
@adobe/aem-core-components-react-spa
fournit une suite de composants React prêts à l’emploi qui s’intègrent facilement aux composants principaux de la gestion de contenu web d’AEM et qui nécessitent SPA éditeur. Ils contiennent principalement des composants qui contiennent des composants de contenu provenant de @adobe/aem-core-components-react-base
, tels que :
Plusieurs variables d’environnement doivent être exposées à la SPA distante afin qu’elle sache interagir avec AEM.
Ouvrez le projet SPA distant à ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
dans votre IDE.
Ouvrez le fichier .env.development
Ajoutez le fichier en portant une attention particulière aux clés :
REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_AUTHORIZATION=admin:admin
N’oubliez pas que les variables d’environnement personnalisées dans React doivent comporter le préfixe REACT_APP_
.
REACT_APP_AEM_URI
: le schéma et l’hôte du service AEM auquel le SPA distant se connecte.
REACT_APP_AEM_AUTH
: les informations d’identification utilisées par SPA s’authentifient pour AEM et récupèrent du contenu.
Avec les dépendances npm d’AEM disponibles pour l’application, initialisez l’élément ModelManager
dans la balise index.js
du projet avant l’appel de ReactDOM.render(...)
.
ModelManager est chargé de se connecter à AEM pour récupérer le contenu modifiable.
Ouvrez le projet SPA distant dans votre IDE.
Ouvrez le fichier src/index.js
Ajoutez l’importation ModelManager
et initialisez-la avant l’appel ReactDOM.render(..)
,
...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";
// Initialize the ModelManager before invoking ReactDOM.render(...).
ModelManager.initializeAsync();
ReactDOM.render(...);
Le fichier src/index.js
doit se présenter comme suit :
Lors de l’approvisionnement de contenu modifiable à partir d’AEM dans la SPA, il est préférable de configurer un proxy interne dans la balise , qui est configuré pour acheminer les requêtes appropriées vers. Pour ce faire, utilisez le module npm http-proxy-middleware qui est déjà installé par l’application graphique WKND de base.
Ouvrez le projet SPA distant dans votre IDE.
Créez un fichier sur src/proxy/setupProxy.spa-editor.auth.basic.js
Ajoutez le code suivant au fichier :
const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_AUTHORIZATION } = process.env;
/*
Set up a proxy with AEM for local development
In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
module.exports = function(app) {
/**
* Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
* - Starts with /content (AEM content)
* - Starts with /graphql (AEM graphQL endpoint)
* - Ends with .model.json (AEM Content Services)
*
* @param {*} path the path being requested of the SPA
* @param {*} req the request object
* @returns true if the SPA request should be re-routed to AEM
*/
const toAEM = function(path, req) {
return path.startsWith('/content') ||
path.startsWith('/graphq') ||
path.endsWith('.model.json')
}
/**
* Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
* - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
* - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
*
* @param {*} path the path being requested of the SPA
* @param {*} req the request object
* @returns returns a re-written path, or nothing to use the @param path
*/
const pathRewriteToAEM = function (path, req) {
if (path === '/.model.json') {
return '/content/wknd-app/us/en/home.model.json';
} else if (path.startsWith('/adventure:') && path.endsWith('.model.json')) {
return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
}
}
/**
* Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
*/
app.use(
createProxyMiddleware(
toAEM, // Only route the configured requests to AEM
{
target: REACT_APP_HOST_URI,
changeOrigin: true,
// Pass in credentials when developing against an Author environment
auth: REACT_APP_AUTHORIZATION,
pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
}
)
);
/**
* Enable CORS on requests from the SPA to AEM
*
* If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
*/
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
next();
});
};
Le fichier setupProxy.spa-editor.auth.basic.js
doit se présenter comme suit :
Cette configuration de proxy effectue deux opérations principales :
http://localhost:3000
pour AEM http://localhost:4502
toAEM(path, req)
.pathRewriteToAEM(path, req)
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
Ouvrez le fichier src/setupProxy.js
Mettre la ligne en commentaire const proxy = require('./proxy/setupProxy.auth.basic')
Ajoutez une ligne pointant vers le nouveau fichier de configuration du proxy :
// Proxy configuration for SPA Editor (and GraphQL) using Basic Auth
const proxy = require('./proxy/setupProxy.spa-editor.auth.basic')
Le fichier setupProxy.js
doit se présenter comme suit :
Notez que toute modification apportée à src/setupProxy.js
ou à ses fichiers référencés nécessite un redémarrage du SPA.
Les ressources de SPA statiques telles que le logo WKND et le graphique de chargement doivent avoir leurs URL src mises à jour pour les forcer à charger à partir de l’hôte SPA distant. S’il reste relatif, lorsque le SPA est chargé dans SPA Éditeur pour la création, ces URL utilisent par défaut l’hôte de l’instance d’envoi plutôt que le , ce qui génère 404 requêtes, comme illustré dans l’image ci-dessous.
Pour résoudre ce problème, faites en sorte qu’une ressource statique hébergée par la SPA distante utilise des chemins absolus qui incluent l’origine SPA distante.
Ouvrez le projet SPA dans votre IDE.
Ouvrez votre fichier de variables d’environnement SPA src/.env.development
et ajoutez une variable pour l’URI public SPA :
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
Lors d’un déploiement vers AEM en tant que Cloud Service, vous devez en faire de même pour les .env
fichiers correspondants.
Ouvrez le fichier src/App.js
Importez l’URI public SPA à partir des variables d’environnement SPA
const { REACT_APP_PUBLIC_URI } = process.env;
function App() { ... }
Préfixez le logo WKND <img src=.../>
avec REACT_APP_PUBLIC_URI
pour forcer la résolution de la SPA.
<img src={REACT_APP_PUBLIC_URI + '/' + logo} className="logo" alt="WKND Logo"/>
Faites de même pour charger l’image dans src/components/Loading.js
const { REACT_APP_PUBLIC_URI } = process.env;
class Loading extends Component {
render() {
return (<div className="loading">
<img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
</div>);
}
}
. et pour les deux instances du bouton Précédent dans src/components/AdventureDetails.js
const { REACT_APP_PUBLIC_URI } = process.env;
function AdventureDetail(props) {
...
render() {
<img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
}
}
Les fichiers App.js
, Loading.js
et AdventureDetails.js
doivent se présenter comme suit :
Pour prendre en charge le mode de mise en page de SPA Editor pour les zones modifiables de l’SPA, nous devons intégrer le code CSS Grille réactive d’AEM dans le . Ne vous inquiétez pas : ce système de grille s’applique uniquement aux conteneurs modifiables. Vous pouvez utiliser votre système de grille de votre choix pour orienter la mise en page du reste de votre SPA.
Ajoutez les AEM fichiers SCSS de grille réactive à la SPA.
Ouvrez le projet SPA dans votre IDE.
Téléchargez et copiez les deux fichiers suivants dans src/styles
_grid.scss
à l’aide des points d’arrêt spécifiques SPA (ordinateurs de bureau et appareils mobiles) et des colonnes (12).Ouvrez src/App.scss
et importez ./styles/grid-init.scss
...
@import './styles/grid-init';
...
Les fichiers _grid.scss
et _grid-init.scss
doivent se présenter comme suit :
Désormais, le SPA inclut le CSS requis pour prendre en charge AEM mode Mise en page pour les composants ajoutés à un conteneur d’AEM.
Maintenant que le SPA est amorcé pour l’intégration à AEM, faisons tourner le et voyons à quoi ça ressemble !
Sur la ligne de commande, accédez à la racine du projet SPA
Démarrez le SPA à l’aide des commandes normales (exécutez npm install
si ce n’est pas déjà fait).
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start
Parcourez le SPA sur http://localhost:3000. Tout devrait être beau !
Avec le SPA exécuté sur http://localhost:3000, ouvrons-le à l’aide d’AEM Éditeur. Rien n’est encore modifiable dans le SPA, cela ne valide que le SPA dans l’.
Connexion à l’auteur AEM
Accédez à Sites > Application WKND > us > en
Sélectionnez la page d’accueil de l’application WKND, appuyez sur Modifier et le SPA s’affiche.
Basculez vers Aperçu à l’aide du sélecteur de mode en haut à droite.
Cliquez sur le SPA
Vous avez amorcé la SPA distante pour être AEM Éditeur compatible ! Vous savez maintenant comment :
Maintenant que nous avons atteint une base de compatibilité avec AEM SPA Editor, nous pouvons commencer à introduire des zones modifiables. Nous allons d’abord examiner comment placer un composant modifiable fixe dans le SPA.