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.
Tout d’abord, passez en revue les dépendances SPA npm pour le projet React et installez-les.
@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
v2 : fournit une API pour la création de composants SPA personnalisés et fournit des implémentations courantes telles que le AEMPage
Composant React.$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components
Plusieurs variables d’environnement doivent être exposées à la SPA distante afin qu’elle sache interagir avec AEM.
Ouvrez le projet SPA à distance à l’adresse ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
dans votre IDE
Ouvrez le fichier .env.development
Dans le fichier , prêtez une attention particulière aux clés, puis effectuez les mises à jour suivant les besoins :
REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_USE_PROXY=true
REACT_APP_AUTH_METHOD=basic
REACT_APP_BASIC_AUTH_USER=admin
REACT_APP_BASIC_AUTH_PASS=admin
N’oubliez pas que les variables d’environnement personnalisées dans React doivent comporter le préfixe REACT_APP_
.
REACT_APP_HOST_URI
: le schéma et l’hôte du service AEM auquel le SPA distant se connecte.
REACT_APP_USE_PROXY
: cela évite les problèmes CORS pendant le développement en informant le serveur de développement de la réaction des requêtes d’AEM proxy telles que /content, /graphql, .model.json
using http-proxy-middleware
module .REACT_APP_AUTH_METHOD
: méthode d’authentification pour les demandes AEM diffusées, les options sont 'service-token', 'dev-token', 'basic' ou laissez vide pour un cas d’utilisation sans authentification
REACT_APP_BASIC_AUTH_USER
: l’AEM username par le SPA à authentifier lors de la récupération du contenu AEM.REACT_APP_BASIC_AUTH_PASS
: l’AEM password par le SPA à authentifier lors de la récupération du contenu AEM.Avec les dépendances SPA npm d’AEM disponibles pour l’application, initialisez l’AEM ModelManager
dans le fichier index.js
before ReactDOM.render(...)
est appelée.
Le 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
Ajouter un import ModelManager
et l’initialisez avant l’événement root.render(..)
appel,
...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";
// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
Le src/index.js
doit se présenter comme suit :
Lors de la création d’un SPA modifiable, il est préférable de configurer une proxy interne dans le SPA, qui est configuré pour acheminer les requêtes appropriées vers AEM. Pour ce faire, utilisez http-proxy-middleware module npm, qui est déjà installé par l’application WKND GraphQL de base.
Ouvrez le projet SPA distant dans votre IDE.
Ouvrez le fichier dans src/proxy/setupProxy.spa-editor.auth.basic.js
Mettez à jour le fichier avec le code suivant :
const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = 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('/graphql') ||
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_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
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 setupProxy.spa-editor.auth.basic.js
doit se présenter comme suit :
Cette configuration de proxy effectue deux opérations principales :
http://localhost:3000
) à 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
Examinez la ligne pointant vers le setupProxy.spa-editor.auth.basic
fichier de configuration du proxy :
...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...
Notez que toute modification apportée à la variable src/setupProxy.js
ou les fichiers référencés nécessitent un redémarrage de la 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 sur AEM as a Cloud Service, vous devez procéder de la même manière pour la variable .env
fichiers .
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éfixe le logo WKND <img src=.../>
avec REACT_APP_PUBLIC_URI
pour forcer la résolution contre le 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 le 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" />
}
}
Le App.js
, Loading.js
, et AdventureDetails.js
Les fichiers doivent se présenter comme suit :
Pour prendre en charge le mode de mise en page de SPA Éditeur pour les zones modifiables dans la SPA, nous devons intégrer le code CSS Grille réactive de l’AEM dans le . Ne vous inquiétez pas : ce système de grille ne s’applique qu’aux conteneurs modifiables et 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 mobiles) et des colonnes (12).Ouvrir src/App.scss
et import ./styles/grid-init.scss
...
@import './styles/grid-init';
...
Le _grid.scss
et _grid-init.scss
Les fichiers 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.
Copiez dans les classes d’utilitaires suivantes dans votre projet d’application React.
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js
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 (si vous ne l’avez pas déjà fait).
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start
Parcourir le SPA http://localhost:3000. Tout devrait être beau !
Avec le SPA en cours d’exécution http://localhost:3000, nous allons l’ouvrir à l’aide d’AEM SPA Editor. 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 et appuyez sur Modifier et le SPA apparaît.
Basculer vers Aperçu utilisation 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 une composant modifiable fixe dans le SPA.